code20240305.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 functions

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. We also played with the rotate function as well:

function setup() {
  createCanvas(400, 400);
}

function drawWheel(x,y) {
  push();
  translate(x,y);
  rotate(n);
  fill("#000000");
  circle(0,0,50);
  fill("#AAAAAA");
  circle(0,0,25);
  fill(255);
  rectMode(CENTER);
  square(0,0,15);
  square(0,0,8);
  pop();
}

function drawTruck(x,y) {
  push();
  translate(x,y)
  rect(0,0,200,75);
  rect(150,-10,70,50);
  drawWheel(40,75);
  drawWheel(160,75);
  pop();
}

let n=0;
function draw() {
  n+=0.1;
  background(220);
  
  drawTruck(100,100);
  drawTruck(100,200);
  
}

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

Drawing a Truck using an Object

The following is our class definition of a Truck. It defines how to build truck objects

class Truck {
  constructor(ax,ay) {
    this.x=ax;
    this.y=ay;
    this.v=2; // speed, we will use this later
  }
  drawWheel(x,y) {
    push();
    translate(x,y);
    rotate(n);
    fill("#000000");
    circle(0,0,50);
    fill("#AAAAAA");
    circle(0,0,25);
    fill(255);
    rectMode(CENTER);
    square(0,0,15);
    square(0,0,8);
    pop();
  }
  draw() {
    push();
    translate(this.x,this.y)
    rect(0,0,200,75);  // draw body of truck
    rect(150,-10,70,50); // draw cab
    this.drawWheel(40,75);
    this.drawWheel(160,75);
    pop();
  }
}