Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
void setup() {
  size(400, 400);
}

void draw() {
  noStroke();
  ellipseMode(CENTER);
  rectMode(CENTER);

  //This draws the background. The background fades to a different colour based on the y position. One of the background layers losses opacity as the y increases while the other gains opacity. 
  background(238, 0, 255, -mouseY+200);
  fill(96, 0, 135, mouseY);
  rect(200, 200, 400, 400);

  //This draws the sun at different sizes depending on the mouse y position. There are two suns to achieve the colour changing effect. One of the sun's losses opacity as the y increases while the other increases.
  fill(255, 153, 0, -mouseY+200);
  ellipse(200, mouseY, mouseY+50, mouseY+50); 
  fill(167, 0, 175, mouseY);
  ellipse(200, mouseY, mouseY+50, mouseY+50);

  //This draws the triangles that make up the ground.
  noStroke();
  fill(0, 0, 204);
  triangle(200, 200, 0, 200, 0, 370);
  triangle(200, 200, 400, 200, 400, 370);
  fill(0, 0, 102);
  triangle(200, 200, -40, 400, 440, 400);

  //The following code draws the lattice that forms the one point perspective.

  //This draws the horizon line.
  stroke(255, 0, 255);
  line(0, 200, 400, 200);

  //This draws the part of the lattice that forms the depth.
  line(200, 200, 200, 400);
  line(200, 200, 120, 400);
  line(200, 200, 40, 400);
  line(200, 200, -40, 400);
  line(200, 200, 280, 400);
  line(200, 200, 360, 400);
  line(200, 200, 440, 400);

  //This draws the horizontal part of the lattice
  line(9, 360, 391, 360);
  line(56, 320, 345, 320);
  line(105, 280, 295, 280);
  line(152, 240, 247, 240);

  //This following code draws the car 

  //This Draws the tires and rims

  noStroke();
  fill(0);
  rect(140, 360, 20, 25);
  ellipse(140, 370, 20, 10);
  rect(260, 360, 20, 25);
  ellipse(260, 370, 20, 10);

  stroke(255, 0, 0);
  fill(0);
  ellipse(140, 340, 20, 30);
  rect(140, 350, 20, 20);
  ellipse(140, 360, 20, 5);
  ellipse(260, 340, 20, 30);
  rect(260, 350, 20, 20);
  ellipse(260, 360, 20, 5);

  noStroke();
  rect(140, 350, 18, 22);
  rect(260, 350, 18, 22);

  //This draws the car outline

  stroke(255, 0, 0);
  rect(200, 340, 120, 40);
  ellipse(200, 360, 120, 5);
  noStroke();
  rect(200, 350, 115, 20);
  stroke(255, 0, 0);
  ellipse(200, 280, 80, 5);
  line(150, 300, 160, 280);
  line(250, 300, 240, 280);
  noStroke();
  triangle(200, 280, 151, 300, 161, 280);
  triangle(200, 280, 250, 300, 240, 280);
  triangle(200, 280, 150, 300, 250, 300);
  stroke(255, 0, 0);
  fill(0);
  ellipse(200, 300, 100, 5);
  triangle(150, 300, 140, 320, 150, 320);
  triangle(250, 300, 260, 320, 240, 320);
  noStroke();
  rect(200, 310, 100, 20);

  //This draws the car details
  stroke(255, 0, 0);
  fill(0, 0, 102);
  ellipse(200, 305, 80, 5);
  triangle(160, 305, 155, 317, 160, 317);
  triangle(240, 305, 245, 317, 240, 317);
  line(160, 317, 240, 317);
  noStroke();
  rect(200, 311, 82, 12);
  stroke(255, 0, 0);
  fill(0);
  triangle(260, 320, 265, 340, 200, 340);
  triangle(140, 320, 135, 340, 200, 340);
  triangle(260, 360, 265, 340, 200, 340);
  triangle(140, 360, 135, 340, 200, 340);
  noStroke();
  stroke(0);
  rect(200, 340, 115, 40);
  line(265, 340, 135, 340);
  stroke(255, 0, 0);
  fill(0);
  triangle(150, 325, 140, 335, 200, 335);
  triangle(250, 325, 260, 335, 200, 335);
  noStroke();
  rect(200, 330, 100, 10);
  stroke(255, 0, 0);
  line(150, 325, 250, 325);
  fill(0);
  triangle(145, 355, 140, 340, 200, 340);
  triangle(255, 355, 260, 340, 200, 340);
  triangle(200, 340, 145, 355, 255, 355);

  //This draws the lights based on the y position of the mouse
  fill(0, 225, 255, mouseY);
  rect(155, 330, 5, 5);
  rect(160, 330, 5, 5);
  rect(165, 330, 5, 5);

  rect(245, 330, 5, 5);
  rect(240, 330, 5, 5);
  rect(235, 330, 5, 5);
}