transforming coordinates while drawing in p5.js

Question

I'm trying to figure out how to make a track for this car game I'm working on. The current issue is that when I'm drawing the track, the coordinates of the drawing get transformed relative to the coordinates of the car. Sorry, it's kind of hard to explain, but if you look at the code below you'll see what I mean. Then there's the issue of making all of the drawings stay on the newest frame, but that's an issue for another day. (Please ignore the trail the car leaves, that will be fixed once I figure out how to ensure the drawings get redrawn on the newest frame. I really am kind of confused with this JS, so any and all help is appreciated!

var MAX_VELOCITY = 3;
class Car {
  constructor(x, y, angle) {
    this.x = x;
    this.y = y;
    this.angle = angle;
    this.velocity = 0;
    this.accel = 0;
    this.width = 40;
    this.height = 80;
  }

  show() {
    fill(255, 0, 255);
    stroke(0);
    translate(this.x, this.y);
    rotate(this.angle);
    rect(0, 0, this.width, this.height);
  }

  move() {
    this.velocity += this.accel;
    if (this.velocity > MAX_VELOCITY) {
      this.velocity = MAX_VELOCITY;
    }
    if (this.velocity < -MAX_VELOCITY) {
      this.velocity = -MAX_VELOCITY;
    }
    this.y += this.velocity * Math.sin(this.angle + Math.PI / 2);
    this.x += this.velocity * Math.cos(this.angle + Math.PI / 2);
  }
}

function setup() {
  WINDOW_HEIGHT = 600;
  WINDOW_WIDTH = 600;
  window.canvas = createCanvas(WINDOW_HEIGHT, WINDOW_WIDTH);
  rectMode(CENTER);
  car = new Car(width / 2, 500, -Math.PI / 2 + Math.PI / 2);
  console.log("Car Created");
  var flagger = false;
}

function draw() {
  // background(100);
  car.show();
  car.move();
  // console.log("X: ", car.x);
  // console.log("Y: ", car.y)
  console.log("X: ", mouseX)
  console.log("Y: ", mouseY)
  if (car.y < car.height / 2) {
    car.y = car.height / 2;
  }

  if (car.x < car.height / 2) {
    car.x = car.height / 2;
  }

  if (car.y > height - car.height / 2) {
    car.y = height - car.height / 2;
  }

  if (car.x > width - car.height / 2) {
    car.x = width - car.height / 2;
  }

  controls();

  if (mouseIsPressed === true) {
    line(
      mouseX - car.x,
      mouseY - car.y,
      pmouseX - car.x,
      pmouseY - car.y
    );
  }
  // console.log("Velocity: ", car.velocity);
  // console.log("Acceleration: ", car.accel);
}

function controls() {
  if (keyIsDown(UP_ARROW)) {
    car.velocity += -1;
    flagger = false;
  }

  if (keyIsDown(DOWN_ARROW)) {
    car.velocity += 1;
    flagger = false;
  }

  if (keyIsDown(RIGHT_ARROW)) {
    car.angle += 0.1;
  }

  if (keyIsDown(LEFT_ARROW)) {
    car.angle -= 0.1;
  }
}

<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Car Game</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
</body>

</html>

Rabbid76 · Accepted Answer · 2019-12-12T18:08:42.783

1

Use push() and pop() to store and restore the current style settings and transformations. This saves and restores the current matrix, too.

push() before the car is drawn (car.show()) and pop() after. That cause that the transformation in car.show() is applied to the car only:

function draw() {
    background(100);

    push();
    car.show();
    pop();

    car.move();

    // [...]
}

edited Dec 12 '19 at 18:08

answered Dec 09 '19 at 19:56

Rabbid76

202,892
27
131
174

Thanks so much! That worked exactly as intended. Do you by any chance also know how I could get it to be redrawn every frame such that the background works? – BlackCoffee Dec 09 '19 at 19:58
@Zanolon Which background? Just uncomment `background(100);`. If you draw a track, then the track has to be drawn after `background(100)` and before the car. – Rabbid76 Dec 09 '19 at 20:03
What I mean is that when that's uncommented, it only shows the most recent frame of the drawn line because the background gets drawn over it. – BlackCoffee Dec 09 '19 at 20:05
1

@Z Yes of course, there is no way around that. If you clear the background, then you've to redraw the entire scene. That's usual. – Rabbid76 Dec 09 '19 at 20:11

transforming coordinates while drawing in p5.js

1 Answers1