Your browser does not support the canvas tag.
previous        Show / Hide Source    
Process
    Download        next
/*
INTERACTIVE DRAWING- Pastel Haze
Xinran Ma 2017/09/20

A twilight to night landscape of a barren desert amongst tall dunes of sand. 
Move the mouse to experience perspective and subtle changes in the setting.
Pressing a key will reveal the darkness that lies beneath it's tranquil surface.

Course: PROG14998 Introduction to Media Computation - 1169_89545
Instructor: Nicolas Hesler

*/

void setup() {
  size(400,400);
  frameRate(8);
}

void draw() {
  background(252,198,201);
  
  //Background gradient. Blue gradient uses mouse vertical movement to fade in.
  
  //Pink gradient
  rectMode(CORNER);
  noStroke();
  fill(253,198,201);
  rect(0,0,400,400);
  fill(251,187,194);
  rect(0,0,400,257);
  fill(247,172,190);
  rect(0,0,400,230);
  fill(231,161,181);
  rect(0,0,400,153);
  fill(213,157,178);
  rect(0,0,400,114);
  fill(198,161,180);
  rect(0,0,400,50);
  fill(186,163,175);
  rect(0,0,400,30);
  fill(183,161,170);
  rect(0,0,400,5);
  
  //Blue gradient
  fill(253-60,198,201+90,mouseY);
  rect(0,0,400,400);
  fill(251-60,187,194+90,mouseY);
  rect(0,0,400,257);
  fill(247-60,172,190+90,mouseY);
  rect(0,0,400,230);
  fill(231-60,161,181+90,mouseY);
  rect(0,0,400,153);
  fill(213-60,157,178+90,mouseY);
  rect(0,0,400,114);
  fill(198-60,161,180+90,mouseY);
  rect(0,0,400,50);
  fill(186-60,163,175+90,mouseY);
  rect(0,0,400,30);
  fill(183-60,161,170+90,mouseY);
  rect(0,0,400,5);
  
  //Stars- move in different speeds horizontally with mouse. Fade at day.
  fill(255,255,255,mouseY);
  rectMode(CENTER);
  rect(mouseX/15, 60, 5, 5);
  rect(mouseX/10+200, 100, 3, 3);
  rect(mouseX/8+170, 96, 5, 5);
  rect(mouseX/15+350, 50, 3, 3);
  rect(mouseX/10+200, 30, 3, 3);
  rect(mouseX/8+270, 86, 5, 5);
  
  //Clouds- move in different speeds horizontally with mouse. Fade at night.
  fill(255,255,255,80-mouseY);
  rect(120+mouseX/8, 70 + (mouseY), 70, 20, 10);
  rect(360+mouseX/8, 90 + (mouseY), 40, 30, 10);
  rect(280+mouseX/8, 130 + (mouseY), 60, 30, 10);
  rect(40+mouseX/10, 110 + (mouseY), 60, 20, 10);
  rect(180+mouseX/8, 150 + (mouseY), 40, 30, 10);
  rect(230+mouseX/10, 120 + (mouseY), 70, 10, 10);
  
  //Moon- appears in twilight, hides in dusk.
  fill(255,255,255);
  ellipse(mouseX/17+90,240+mouseY/7,40,40);
  
  //MoonLight- shines by pulsating various opacities of white
  fill(255,255,255,40+5*sin(frameCount/3.6));
  ellipse(mouseX/17+90,240+mouseY/7,73,73);
  ellipse(mouseX/17+90,240+mouseY/7,45,45);
  ellipse(mouseX/17+90,240+mouseY/7,89,89);
  fill(255,255,255,10+5*sin(frameCount/3.6));
  ellipse(mouseX/17+90,240+mouseY/7,150,150);
  ellipse(mouseX/17+90,240+mouseY/7,120,120);
  ellipse(mouseX/17+90,240+mouseY/7,50,50);
  
  //Sand Dunes- moves in perspective of the image, changes hue based on day/dusk
  fill(204-mouseY/5, 150, 170+mouseY);
  beginShape();
  vertex(-200-mouseX/7,310);
  vertex(-20-mouseX/7,310);
  vertex(90-mouseX/7,250);
  vertex(280-mouseX/7,300);
  vertex(480-mouseX/7,250);
  vertex(450-mouseX/7,450);
  vertex(-200-mouseX/7,450);
  endShape(CLOSE);
  
  //Sand Dune Shadows
  fill(147, 100, 108,80);
  beginShape();
  vertex(-20-mouseX/7,310);
  vertex(90-mouseX/7,250);
  vertex(70-mouseX/7,290);
  endShape(CLOSE);
  
  beginShape();
  vertex(280-mouseX/7,300);
  vertex(480-mouseX/7,250);
  vertex(350-mouseX/7,310);
  endShape(CLOSE);
  
  //Path
  fill(255-mouseY/10,255-mouseY/10,255-mouseY/15);
  beginShape();
  vertex(350-mouseX/7,310);
  vertex(375-mouseX/7,325);
  vertex(386-mouseX/7,335);
  vertex(380-mouseX/7,341);
  vertex(130-mouseX/7,361);
  vertex(120-mouseX/7,367);
  vertex(130-mouseX/7,372);
  vertex(400-mouseX/7,400);
  
  vertex(140-mouseX/7,400);
  vertex(90-mouseX/7,372);
  vertex(95-mouseX/7,367);
  vertex(100-mouseX/7,361);
  vertex(375-mouseX/7,338);
  vertex(380-mouseX/7,335);
  vertex(375-mouseX/7,329);
  vertex(340-mouseX/7,308);
  endShape(CLOSE);
  
  //Electric tower
  stroke(96, 93, 92);
  strokeWeight(1.2);
  line(340-mouseX/7,240,340-mouseX/7,300);
  line(350-mouseX/7,240,350-mouseX/7,300);
  line(320-mouseX/7,240,370-mouseX/7,240);
  line(320-mouseX/7,240,340-mouseX/7,250);
  line(350-mouseX/7,250,370-mouseX/7,240);
  line(340-mouseX/7,250,350-mouseX/7,250);
  line(340-mouseX/7,250,350-mouseX/7,240);
  line(340-mouseX/7,240,350-mouseX/7,250);
  line(340-mouseX/7,260,350-mouseX/7,250);
  line(340-mouseX/7,250,350-mouseX/7,260);
  line(340-mouseX/7,260,350-mouseX/7,260);
  line(340-mouseX/7,270,350-mouseX/7,260);
  line(340-mouseX/7,260,350-mouseX/7,270);
  line(340-mouseX/7,270,350-mouseX/7,270);
  line(340-mouseX/7,280,350-mouseX/7,270);
  line(340-mouseX/7,270,350-mouseX/7,280);
  line(340-mouseX/7,280,350-mouseX/7,280);
  line(340-mouseX/7,290,350-mouseX/7,280);
  line(340-mouseX/7,280,350-mouseX/7,290);
  line(340-mouseX/7,290,350-mouseX/7,290);
  line(340-mouseX/7,300,350-mouseX/7,290);
  line(340-mouseX/7,290,350-mouseX/7,300);
  line(340-mouseX/7,300,350-mouseX/7,300);
  line(340-mouseX/7,250,310-mouseX/7,260);
  line(310-mouseX/7,260,340-mouseX/7,260);
  line(350-mouseX/7,250,380-mouseX/7,260);
  line(380-mouseX/7,260,350-mouseX/7,260);
  line(310-mouseX/7,300,380-mouseX/7,300);
  line(340-mouseX/7,290,310-mouseX/7,300);
  line(350-mouseX/7,290,380-mouseX/7,300);
  line(340-mouseX/7,300,330-mouseX/7,370);
  line(350-mouseX/7,300,360-mouseX/7,370);
  
  line(350-mouseX/7,300,339-mouseX/7,310);
  line(340-mouseX/7,300,351-mouseX/7,310);
  line(337-mouseX/7,320,351-mouseX/7,310);
  line(352-mouseX/7,320,339-mouseX/7,310);
  line(337-mouseX/7,320,355-mouseX/7,332);
  line(352-mouseX/7,320,335-mouseX/7,332);
  
  strokeWeight(2);
  line(310-mouseX/7,260,310-mouseX/7,275);
  line(380-mouseX/7,260,380-mouseX/7,275);
  line(310-mouseX/7,300,310-mouseX/7,315);
  line(380-mouseX/7,300,380-mouseX/7,315);

}

void mousePressed (){

  //A dark rendition of the setting when mouse click function active.
  
  //Grey gradient
  rectMode(CORNER);
  noStroke();
  fill(79);
  rect(0,0,400,400);
  fill(75);
  rect(0,0,400,257);
  fill(70);
  rect(0,0,400,230);
  fill(66);
  rect(0,0,400,153);
  fill(55);
  rect(0,0,400,114);
  fill(45);
  rect(0,0,400,50);
  fill(30);
  rect(0,0,400,30);
  fill(0);
  rect(0,0,400,5);
  
  //Stars
  fill(0,0,0,mouseY);
  rectMode(CENTER);
  rect(mouseX/15, 60, 5, 5);
  rect(mouseX/10+200, 100, 3, 3);
  rect(mouseX/8+170, 96, 5, 5);
  rect(mouseX/15+350, 50, 3, 3);
  rect(mouseX/10+200, 30, 3, 3);
  rect(mouseX/8+270, 86, 5, 5);
  
  //Clouds
  fill(255,255,255,80-mouseY);
  rect(120+mouseX/8, 70 + (mouseY), 70, 20, 10);
  rect(360+mouseX/8, 90 + (mouseY), 40, 30, 10);
  rect(280+mouseX/8, 130 + (mouseY), 60, 30, 10);
  rect(40+mouseX/10, 110 + (mouseY), 60, 20, 10);
  rect(180+mouseX/8, 150 + (mouseY), 40, 30, 10);
  rect(230+mouseX/10, 120 + (mouseY), 70, 10, 10);
  
  //Moon
  fill(237, 3, 0);
  ellipse(mouseX/17+90,240+mouseY/7,40,40);
  fill(237, 3, 0,40);
  ellipse(mouseX/17+90,240+mouseY/7,73,73);
  ellipse(mouseX/17+90,240+mouseY/7,45,45);
  ellipse(mouseX/17+90,240+mouseY/7,89,89);
  fill(237, 3, 0,10);
  ellipse(mouseX/17+90,240+mouseY/7,150,150);
  ellipse(mouseX/17+90,240+mouseY/7,120,120);
  ellipse(mouseX/17+90,240+mouseY/7,50,50);
  
  //Sand Dunes
  fill(80);
  beginShape();
  vertex(-200-mouseX/7,310);
  vertex(-20-mouseX/7,310);
  vertex(90-mouseX/7,250);
  vertex(280-mouseX/7,300);
  vertex(480-mouseX/7,250);
  vertex(450-mouseX/7,450);
  vertex(-200-mouseX/7,450);
  endShape(CLOSE);
  
  //Sand Dune Shadows
  fill(40);
  beginShape();
  vertex(-20-mouseX/7,310);
  vertex(90-mouseX/7,250);
  vertex(70-mouseX/7,290);
  endShape(CLOSE);
  
  beginShape();
  vertex(280-mouseX/7,300);
  vertex(480-mouseX/7,250);
  vertex(350-mouseX/7,310);
  endShape(CLOSE);
  
  //Path
  fill(60);
  beginShape();
  vertex(350-mouseX/7,310);
  vertex(375-mouseX/7,325);
  vertex(386-mouseX/7,335);
  vertex(380-mouseX/7,341);
  vertex(130-mouseX/7,361);
  vertex(120-mouseX/7,367);
  vertex(130-mouseX/7,372);
  vertex(400-mouseX/7,400);
  
  vertex(140-mouseX/7,400);
  vertex(90-mouseX/7,372);
  vertex(95-mouseX/7,367);
  vertex(100-mouseX/7,361);
  vertex(375-mouseX/7,338);
  vertex(380-mouseX/7,335);
  vertex(375-mouseX/7,329);
  vertex(340-mouseX/7,308);
  endShape(CLOSE);
  
  //Electric tower
  stroke(70);
  strokeWeight(1.2);
  line(340-mouseX/7,240,340-mouseX/7,300);
  line(350-mouseX/7,240,350-mouseX/7,300);
  line(320-mouseX/7,240,370-mouseX/7,240);
  line(320-mouseX/7,240,340-mouseX/7,250);
  line(350-mouseX/7,250,370-mouseX/7,240);
  line(340-mouseX/7,250,350-mouseX/7,250);
  line(340-mouseX/7,250,350-mouseX/7,240);
  line(340-mouseX/7,240,350-mouseX/7,250);
  line(340-mouseX/7,260,350-mouseX/7,250);
  line(340-mouseX/7,250,350-mouseX/7,260);
  line(340-mouseX/7,260,350-mouseX/7,260);
  line(340-mouseX/7,270,350-mouseX/7,260);
  line(340-mouseX/7,260,350-mouseX/7,270);
  line(340-mouseX/7,270,350-mouseX/7,270);
  line(340-mouseX/7,280,350-mouseX/7,270);
  line(340-mouseX/7,270,350-mouseX/7,280);
  line(340-mouseX/7,280,350-mouseX/7,280);
  line(340-mouseX/7,290,350-mouseX/7,280);
  line(340-mouseX/7,280,350-mouseX/7,290);
  line(340-mouseX/7,290,350-mouseX/7,290);
  line(340-mouseX/7,300,350-mouseX/7,290);
  line(340-mouseX/7,290,350-mouseX/7,300);
  line(340-mouseX/7,300,350-mouseX/7,300);
  line(340-mouseX/7,250,310-mouseX/7,260);
  line(310-mouseX/7,260,340-mouseX/7,260);
  line(350-mouseX/7,250,380-mouseX/7,260);
  line(380-mouseX/7,260,350-mouseX/7,260);
  line(310-mouseX/7,300,380-mouseX/7,300);
  line(340-mouseX/7,290,310-mouseX/7,300);
  line(350-mouseX/7,290,380-mouseX/7,300);
  line(340-mouseX/7,300,330-mouseX/7,370);
  line(350-mouseX/7,300,360-mouseX/7,370);
  
  line(350-mouseX/7,300,339-mouseX/7,310);
  line(340-mouseX/7,300,351-mouseX/7,310);
  line(337-mouseX/7,320,351-mouseX/7,310);
  line(352-mouseX/7,320,339-mouseX/7,310);
  line(337-mouseX/7,320,355-mouseX/7,332);
  line(352-mouseX/7,320,335-mouseX/7,332);
  
  strokeWeight(2);
  line(310-mouseX/7,260,310-mouseX/7,275);
  line(380-mouseX/7,260,380-mouseX/7,275);
  line(310-mouseX/7,300,310-mouseX/7,315);
  line(380-mouseX/7,300,380-mouseX/7,315); 
  

}