review7.mp4

Module 7 - Final

https://docs.google.com/document/d/1KQpOv2Ju6MR9VfqfDqJXxD_mrr_W_stn9AFwsQO8HvU/edit#heading=h.gjdgxs

• Drawing a Truck using a Function
• Drawing a Truck using an Object
• Click on Truck to Change Directions
• Move the Truck Class to a truck.js file
• Make an Array of Trucks
• Make another Object, TruckManager that Manages Trucks

Drawing a Truck using a function

In class we went way back to review content from a few weeks ago. This included working with functions, passing parameters (x and y) to the function, and using the translate function to move the canvas origin each time we draw a truck:

let myColors=["#f9dbbd","#fca17d","#da627d","#9a348e","#0d0628"];

function drawTruck(x,y) {
    push();
    translate(x,y);
    // body of truck
    fill(myColors[3]);
    rect(10,10,100,50);
  
    // truck cab
    rect(80,0,40);
    // truck window
    fill(myColors[2]);
    rect(84,4,32,20);
  
    //wheels
    fill(myColors[4]);
    circle(30,60,20);
    circle(90,60,20);
    pop();
}

See the code from class: https://editor.p5js.org/des8963/sketches/QwjLI0ocG

Drawing a Truck using an Object

class Truck {
  // Class Definition
  constructor(ax,ay,aspeed) {
    // we will put code here
    
    this.x=ax;
    this.y=ay;
    this.speedx=aspeed;
    this.speedy=aspeed;
  }
  checkInTruck(ax,ay) {
    // check to see if ax & ay are in this
    //  rectangle:
    // rect(10,10,100,50);
    if ((ax > this.x+10) && (ax < this.x + 10 + 100)) {
          if ((ay > this.y+10) && (ay < this.y + 10 + 50)) {
            print("Mouse is in truck");
            this.speedx*=-1;
            this.speedy*=-1;
          }
    }
  }
  move() {
    this.x+=this.speedx;
    this.y+=this.speedy;
    if ((this.x>width) || (this.x<0)) {
      this.speedx*=-1;
    }
    if ((this.y>height) || (this.y<0))  {
      this.speedy*=-1;
    }
  }
  drawCab() {
    if (this.speedx>0) {
      // truck cab on right side
      rect(80,0,40);
      // truck window
      fill(myColors[2]);
      rect(84,4,32,20);
    } else {
      // truck cab on left side
      rect(0,0,40);
      // truck window
      fill(myColors[2]);
      rect(4,4,32,20);
    }
  }
  drawTruck() {
    this.move();
    push();
    translate(this.x,this.y);
    // body of truck
    fill(myColors[3]);
    rect(10,10,100,50);
    
    this.drawCab();

    //wheels
    fill(myColors[4]);
    circle(30,60,20);
    circle(90,60,20);
    pop();
  }
}