car_objects_demo.js

/*

Objects Demo
Adapted from Josi's Animation Practice
https://sites.google.com/a/lwhs.org/computational-design-fall-16/p5-animation-practice/josi-s-p5-animation-practice

*/

//initially, green light is on
var redlight = 160;
var yellowlight = 160;
var greenlight = 255;

var pinkCar;
var cars = []; //array (list) of cars

function setup() {
  createCanvas(800, 800);
  pinkCar = new Car(0, 500, 2, color(200, 0, 200));
  for (var i = 0; i < 10; i++) {
    cars.push(new Car(random(0, 100), random(500, 700), random(1, 20), random(0, 255)));
  }
}

function draw() {

  background(200);

  //white background rectangle
  noStroke();
  fill(255);
  rect(0, 0, 75, 20);

  //text showing mouse coordinates
  fill(255, 0, 0);
  text("(" + mouseX + ", " + mouseY + ")", 5, 15);

  //black rectangle
  strokeWeight(1);
  stroke(0);
  fill(75);
  rect(350, 100, 100, 300);

  //red circle with black outline (red light)
  strokeWeight(2);
  stroke(0);
  fill(redlight, 0, 0); //160 for off, 255 for on
  ellipse(400, 155, 85, 85);

  //yellow circle with black outline (yellow light)
  strokeWeight(2);
  stroke(0);
  fill(yellowlight, yellowlight, 0); //160 for off, 255 for on
  ellipse(400, 250, 85, 85);

  //green circle with black outline (green light)
  strokeWeight(2);
  stroke(0);
  fill(0, greenlight, 0); //255 for on, 160 for off
  ellipse(400, 345, 85, 85);

  //make road
  fill(100, 100, 100);
  rect(0, 650 - 170, 1000, 100);
  stroke(200, 200, 0);
  line(0, 700 - 170, 50, 700 - 170);
  line(75, 700 - 170, 125, 700 - 170);
  line(150, 700 - 170, 200, 700 - 170);
  line(225, 700 - 170, 275, 700 - 170);
  line(300, 700 - 170, 350, 700 - 170);
  line(375, 700 - 170, 425, 700 - 170);
  line(450, 700 - 170, 500, 700 - 170);
  line(525, 700 - 170, 575, 700 - 170);
  line(600, 700 - 170, 650, 700 - 170);
  line(675, 700 - 170, 725, 700 - 170);
  line(750, 700 - 170, 800, 700 - 170);
  line(825, 700 - 170, 875, 700 - 170);
  line(900, 700 - 170, 950, 700 - 170);
  line(975, 700 - 170, 1000, 700 - 170);

  pinkCar.display();
  cars.forEach(function(c) {
    c.display();
  });
}

function keyPressed() {
  // car is moved when red key is pressed
  if (keyCode == RIGHT_ARROW) {
    pinkCar.move();
    cars.forEach(function(c) {
      c.move();
    });
  }

  //red light when r key is pressed
  if (key == 'R' || key == 'r') {
    redlight = 255;
    yellowlight = 160;
    greenlight = 160;
  }

  //yellow light when y key is pressed
  if (key == 'Y' || key == 'y') {
    redlight = 160;
    yellowlight = 255;
    greenlight = 160;
  }

  //green light when g key is pressed
  if (key == 'G' || key == 'g') {
    redlight = 160;
    yellowlight = 160;
    greenlight = 255;
  }
}

function Car(startX, startY, startSpeed, color) {
  this.x = startX; //x position variable
  this.y = startY; //y position variable
  this.speed = startSpeed;
  this.color = color;

  this.move = function() {
    this.x += this.speed;
  }

  this.display = function() {
    //car
    strokeWeight(1)
    stroke(0);
    fill(color);
    ellipse(this.x + 5, this.y, 25, 25);
    ellipse(this.x + 45, this.y, 25, 25)
    rect(this.x - 12.5, this.y - 45, 75, 40)
  }
}