Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*Name: Qaisar Ali
 *Student number: 991396492
 *Move your mouse to the right and left for the clouds to move
 *You can use the mouse click, and cursor to move the sun, change color in the house.
 *you can also use keypress which displays texts on the consol.
 */

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

void draw() {

  //setting the framerate to a constant 60 frames per second
  frameRate(60);
  
  //will not show a stroke around objects
  noStroke();
  
  //draws a background that changes colour with the mouseY
  background(60-mouseY/2, 200-mouseY/2, 250-mouseY/6);

  //sun
  fill(255, 255, 0);  
  //makes the sun move up and down witht the mouseY
  ellipse(mouseY+90, 50+mouseY, 80, 80);

  //clouds
  //changes the grey scale for the clouds with mouseY
  fill(255-mouseY/5);
  
  //draws clouds and allows them to move with the mouseX from left to right
  ellipse(380+mouseX/10, 150, 70, 60);
  ellipse(140+mouseX/10, 220, 130, 170);
  ellipse(0+mouseX/10, 240, 70, 40);
  ellipse(60+mouseX/10, 230, 50, 60);

  //mountains
  //gets darker as the sun goes down
  fill(100-mouseY/5, 97-mouseY/5, 153-mouseY/5);
  //draws mountain
  triangle(40, 300, 200, 300, 120, 220);
  triangle(80, 300, 260, 300, 170, 200);
  triangle(320, 160, 380, 150, 450, 250);
  fill(71-mouseY/5, 69-mouseY/5, 109-mouseY/5);
  triangle(160, 240, 310, 80, 452, 300);

  //Ground
  //draws ground and the colour gets darker as the sun goes down
  fill(153-mouseY-10, 204-mouseY/10, 51-mouseY-10);
  ellipse(320, 330, 500, 250);
  ellipse(20, 360, 400, 250);

  //Tree
  
  //shadow
  fill(0, 52-mouseY-10, 0, 255-mouseY/3.5);
  //sets the mode of ellipse to corner
  ellipseMode(CORNER);
  //the shadow expands as the sun goes down, like how it would happen in real life
  ellipse(52, 315-mouseY/80, -40-mouseY, 20);
  
  //trunk
  //set the ellipse mode back to center
  ellipseMode(CENTER);
  fill(102, 51, 0);
  quad(33, 320, 38, 260, 48, 270, 53, 320);
  ellipse(43, 320, 20, 10);

  //leaves
  fill(4, 101, 6);
  ellipse(45, 260, 60, 50);
  ellipse(30, 250, 30, 25);
  ellipse(22, 270, 20, 20);
  ellipse(27, 275, 20, 20);
  ellipse(40, 280, 20, 20);
  ellipse(55, 278, 20, 20);
  ellipse(60, 272, 20, 20);
  ellipse(68, 272, 20, 20);
  ellipse(65, 265, 30, 20);
  ellipse(65, 256, 30, 20);
  ellipse(60, 250, 25, 30);
  ellipse(50, 245, 25, 30);


  //house
  stroke(143, 64, 5);

  //Walls
  fill(254, 208, 122);
  //setting rectangle mode to corners
  rectMode(CORNERS);
  rect(230, 240, 290, 270);
  rect(310, 230, 340, 260);
  quad(340, 230, 350, 220, 350, 250, 340, 260);
  quad(290, 240, 310, 230, 310, 260, 290, 270);

  //top triangles
  fill(213, 124, 20);
  triangle(230, 240, 260, 210, 290, 240);
  triangle(340, 230, 345, 215, 350, 220);

  //Roof 
  fill(153, 74, 15);
  quad(260, 210, 310, 190, 340, 215, 290, 240);

  //small roof
  fill(170, 91, 22);
  quad(310, 230, 315, 215, 345, 215, 340, 230);

  //Front and Side Door
  fill(213, 124, 20);
  rect(250, 250, 270, 270);
  quad(343, 257, 343, 240, 348, 233, 348, 251);

  //Windows
  //the colour changes from yellow to blue with mouseX and the opacity from 10 to full
  fill(255-mouseX/6, 240-mouseX/8, 90+mouseX, 10+mouseY);
  ellipse(260, 228, 18, 18);
  rect(320, 240, 330, 250);

  //Lines that fill the windows
  fill(0);
  line(325, 250, 325, 240);
  line(320, 245, 330, 245);
  line(260, 237, 260, 219);
  line(251, 228, 269, 228);

  //front door light
  noStroke();
  //makes the front door light expand and more saturated 
  fill(255, 255, 10, 0+mouseY/2);
  ellipse(250, 250, 0+mouseY/20, 0+mouseY/20);

  //Stars
  //increases the opacity to 100% using mouseY variable
  fill(255, 0+mouseY/3);
  stroke(255, 0+mouseY/3);
  ellipse(20, 100, 2, 2);
  ellipse(20, 180, 2, 2);
  ellipse(40, 160, 2, 2);
  ellipse(100, 130, 2, 2);
  ellipse(140, 60, 2, 2);
  ellipse(130, 200, 2, 2);
  ellipse(180, 100, 2, 2);
  ellipse(180, 180, 2, 2);
  ellipse(230, 130, 2, 2);
  ellipse(230, 60, 2, 2);
  ellipse(230, 110, 2, 2);
  ellipse(240, 140, 2, 2);
  ellipse(360, 120, 2, 2);
  ellipse(380, 40, 2, 2);

  //Sliders
  stroke(255);
  fill(255);
  ellipse(20, 10, 5, 5);
  ellipse(380, 10, 5, 5);
  ellipse(10, 20, 5, 5);
  ellipse(10, 380, 5, 5);
  line(10, 20, 10, 380);
  line(20, 10, 380, 10);

  //the sliders move with x and y axis with the mouse
  ellipse(25+mouseX/1.13, 10, 10, 10);
  ellipse(10, 25+mouseY/1.13, 10, 10);
  

  //carpet
  noStroke();
  fill(255);
  quad(80, 310, 110, 310, 90, 350, 60, 350);

  //person
  stroke(0);
  line(90, 320, 93, 330);
  line(90, 320, 75, 324);
  line(90, 320, 80, 335);
  line(80, 335, 80, 350);
  line(80, 335, 60, 350);
  ellipse(90, 315, 10, 10);
}

//when the mouse is pressed the following code runs
void mousePressed() {

  //framerate is 1 per second so the following text can stay long
  frameRate(1);
  noStroke();
  //speech bubble
  triangle(100, 305, 110, 290, 120, 290);
  ellipse(120, 280, 40, 40);

  //speech dots
  fill(0);
  stroke(0);
  ellipse(110, 280, 5, 5);
  ellipse(117, 280, 5, 5);
  ellipse(124, 280, 5, 5);
}
//when a board key is pressed the following code runs
void keyPressed() {
  
  //the text is printed out to the consol
  println("it looks like rain is coming.");
  println("By. Qaisar Ali :)");
}