Gabrielle's Animated

//ORIGINAL by Gabrielle 

//Interaction by Ming 

​

var xPosition =70; 

var xPosition2 = 80;

var xPosition3 = 100; 

var blu = 50;

​

function setup() {

  createCanvas(500, 500);

}

​

function draw() {

  if(mouseIsPressed){

  blu = random(150);   

  }

  background(0, 0, blu);

  //moon

  fill(225, 255, 255);

  circle(xPosition, 70, 75);

  circle(xPosition2, 80, 2);

  fill(0, 0, blu);

  strokeWeight(0);

  circle(xPosition3, 70, 75);

  //variable movement 

  xPosition = xPosition + .5; 

  xPosition2 = xPosition2 + .5;

  xPosition3 = xPosition3 + .5; 

  //variable reset 

  if (xPosition == 500){

    xPosition = 70;

    xPosition2 = 80;

    xPosition3 = 100; 

  }

  //street

  fill(33, 34, 41);

  rect(0, 425, 500, 100);

  fill( 230, 223, 255);

  rect( 50, 425, 10, 100);

  rect( 450, 425, 10, 100);

  //Car

  //tires

  fill(0, 0, 0);

  ellipse(125, 415, 55, 69);

  ellipse(425, 415, 55, 69);

  //main part

  fill(55, 56, 64);

  rect(73, 375, 400, 27, 20);

  fill(75, 80, 117);

  rect(85, 305, 375, 75, 20);

​

  //mirrors

  rect(60, 250, 55, 55, 20, 15, 10, 5);

  rect(420, 250, 55, 55, 20, 15, 10, 5);

  quad(100, 308, 435, 308, 370, 200, 150, 200);

  fill(40, 40, 46);

  quad(115, 298, 420, 298, 360, 210, 160, 210);

  //headlights

  fill(247, 255, 138);

  circle(130, 340, 35);

  circle(410, 340, 35);

  fill (55, 56, 64);

  rect(217, 330, 105, 25, 20);

​

  //people

​

​

​

  //bottom of car

  fill(75, 80, 117);

  rect(85, 305, 375, 75, 20);

  circle(130, 340, 35);

  circle(410, 340, 35);

  if (keyIsPressed == true){

    fill(0);

    circle(130, 340, 35);

    circle(410, 340, 35); 

      fill(0, 0, 0);

  circle(210, 250, 50);

  circle(180, 250, 30);

  circle(185, 265, 30);

  circle(190, 230, 30);

  ellipse(210, 310, 40, 70);

  circle(250, 250, 50);

  ellipse(250, 310, 40, 70);

  }

  else{

    fill(247, 255, 138)

    circle(130, 340, 35); 

    circle(410, 340, 35);

          fill(0, 0, 0);

  circle(200, 250, 50);

  circle(170, 250, 30);

  circle(175, 265, 30);

  circle(180, 230, 30);

  ellipse(200, 310, 40, 70);

  circle(290, 250, 50);

  ellipse(290, 310, 40, 70);

  }

​

  fill(75, 80, 117);

  rect(180, 298, 150, 50);

  fill (55, 56, 64);

  rect(217, 330, 105, 25, 20);

}