// all of the following elements:

// 

// 2 or more objects on the screen at the same time -- done

// conditional statements (if/else) -- done

// variables -- done

// at least one for() loop -- done

// mouseX/mouseY for interaction -- done

// colorMode(HSB) -- done

// optional: keyboard input

// extra: make the program change over time (less predictable)

​

let skyHu;

let skySa;

let skyBr;

​

let hillsy;

let hillS;

let hillM;

let hillL;

​

let cloudHu;

let cloudSa;

let cloudBr;

let cloudx;

let cloudy;

let cloudc;

​

let grassh;

let grassy;

​

let floHu;

let floSa;

let floBr;

let flow;

let floh;

​

let leafHu;

let leafSa;

let leafBr;

let leafx;

let leafy;

let leafw;

let leafh;

​

let trunkHu;

let trunkSa;

let trunkBr;

let trunky;

let trunkw;

let trunkh;

​

let roadHu;

let roadSa;

let roadBr;

let roady;

let roadh;

let stripw;

let space;

let roadTop;

​

let carw;

let carh;

let tirew;

let carx;

let cary;

​

// let myFont;

​

function preload() {

  // myFont = loadFont('project-folder/assets/Loveline.otf');

}

​

function setup() {

  createCanvas(600, 400);

  colorMode(HSB);

}

​

function draw() {

  // sky

  skyHu = 200;

  skySa = 73;

  skyBr = 96;

  background(skyHu, skySa, skyBr);

​

  noStroke();

​

  // grass

  grassy = height - grassh;

  grassh = 80;

​

  rectMode(CORNER);

  fill(leafHu, leafSa, leafBr + 50);

  rect(0, grassy, width, grassh);

​

​

  // hills

​

  hillS = 80;

  hillM = 100;

  hillL = 120;

  hillx = 100;

​

  fill(leafHu, leafSa, leafBr - 20);

  arc(hillx, roadTop, hillS, hillS, 180, PI + HALF_PI, CHORD);

  arc(hillx + 50, roadTop, hillM, hillM, 180, PI + HALF_PI, CHORD);

  arc(width - hillx - 130, roadTop, hillS, hillS, 180, PI + HALF_PI, CHORD);

  arc(width - hillx - 70, roadTop, hillL, hillL, 180, PI + HALF_PI, CHORD);

  arc(width - hillx, roadTop, hillS, hillS, 180, PI + HALF_PI, CHORD);

​

  // clouds

  cloudHu = 0;

  cloudSa = 0;

  cloudBr = 100;

  cloudy = 100;

  cloudc = 30;

​

  fill(cloudHu, cloudSa, cloudBr);

  rectMode(CENTER);

  rect(cloudx, cloudy, cloudc, cloudc);

  ellipseMode(CENTER);

  ellipse(cloudx, cloudy - cloudc / 2, cloudc, cloudc);

  ellipse(cloudx - cloudc / 2, cloudy, cloudc, cloudc);

  ellipse(cloudx + cloudc / 2, cloudy, cloudc, cloudc);

​

  if (mouseY >= 0 && mouseY <= 100) {

    cloudx = mouseX;

    // cloudy = mouseY;

  }

​

​

  // trees

  leafHu = 133;

  leafSa = 69;

  leafBr = 73;

  leafw = 50;

  leafh = 60;

  leafy = height - grassh - roadh - trunkh - leafh / 2;

​

  trunkHu = 39;

  trunkSa = 91;

  trunkBr = 31;

  trunkw = 10;

  trunkh = 30;

  trunky = height - grassh - roadh - trunkh / 2;

​

​

  rectMode(CENTER);

  fill(leafHu, leafSa, leafBr);

  rect(leafx, leafy, leafw, leafh, 5);

  // trunk

  fill(trunkHu, trunkSa, trunkBr);

  rect(leafx, trunky, trunkw, trunkh);

​

  if (mouseY >= 150 && mouseY <= height - grassh - roadh && mouseX >= 0 && mouseX <= 100) {

    leafx = 50;

    // } else if (mouseY >= 150 && mouseY <= roadTop && mouseX >= 100 && mouseX <= 200) {

    //   leafx = 150;

  } else if (mouseY >= 150 && mouseY <= roadTop && mouseX >= 200 && mouseX <= 300) {

    leafx = 250;

    // } else if (mouseY >= 150 && mouseY <= roadTop && mouseX >= 300 && mouseX <= 400) {

    //   leafx = 350;

  } else if (mouseY >= 150 && mouseY <= roadTop && mouseX >= 400 && mouseX <= 500) {

    leafx = 450;

    // } else if (mouseY >= 150 && mouseY <= roadTop - grassh - roadh && mouseX >= 500 && mouseX <= 600) {

    //   leafx = 550;

  }

​

  // road

  roadHu = 71;

  roadSa = 10;

  roadBr = 45;

  roady = height - (roadh * 2);

  roadh = 80;

  stripw = 25;

  space = 50;

  roadTop = height - grassh - roadh;

​

​

  rectMode(CORNER);

  fill(roadHu, roadSa, roadBr);

  rect(0, roady, width, roadh);

​

  // road stripes

  for (stripx = stripw / 2; stripx <= (width + stripw); stripx = stripx + space) {

    fill(roadHu, roadSa, roadBr + 50);

    rect(stripx, height - (roadh * 1.5), stripw, roadh / 12);

  }

​

  // sidewalks

​

  fill(roadHu, roadSa, roadBr + 50);

  rect(0, height - (roadh * 2), width, roadh / 14);

  rect(0, height - roadh, width, roadh / 10);

​

​

  // cars

​

  carw = 100;

  carh = carw / 4;

  tirew = carh;

  cary = height - grassh - roadh / 4 - tirew / 4;

​

  // car body

  rectMode(CENTER);

  // top

  fill(roadHu, roadSa, roadBr / 2);

  rect(carx, cary - tirew / 2 - carh / 2, carw / 1.5, carh * 1.5, 20);

  // windows

  fill(roadHu, roadSa, roadBr);

  rect(carx, cary - tirew / 2 - carh / 2, carw / 1.5 - 20, carh * 1.5 - 10, 20);

  fill(roadHu, roadSa, roadBr / 2);

  rect(carx, cary - tirew / 2 - carh / 2, 5, carh + 10);

​

  // bottom

  fill(roadHu, roadSa, roadBr / 2);

  rect(carx, cary - tirew / 2, carw, carh, 6);

​

​

  // tires

  ellipseMode(CENTER);

  // space around tires

  fill(roadHu, roadSa, roadBr);

  ellipse(carx - carw / 4, cary, tirew + 4, tirew + 4);

  ellipse(carx + carw / 4, cary, tirew + 4, tirew + 4);

  // rubber on tires  

  fill(roadHu, roadSa, roadBr / 2);

  ellipse(carx - carw / 4, cary, tirew, tirew);

  ellipse(carx + carw / 4, cary, tirew, tirew);

  // rims on tires

  fill(roadHu, roadSa, roadBr * 2);

  ellipse(carx - carw / 4, cary, tirew / 2, tirew / 2);

  ellipse(carx + carw / 4, cary, tirew / 2, tirew / 2);

​

  //moves the car with the mouse

  if (mouseY >= roady && mouseY <= grassy) {

    carx = map(mouseX, 0, width, carw, width - carw);

  }

​

​

} // end draw