0

I'm trying to create a little car simulator in p5.js that has a bird's eye view of a track. So far I've been able to create the car and get it to move (up, down, left, right), but that's not how you drive in real life. I need to only be able to go forwards, backward, and rotate the car while going in those 2 directions to steer.

What I've done so far:

sketch.js

// Declares global variables
const h = window.innerHeight;
const w = window.innerWidth;
var car;
var borders = [];
var pos = {
    x: 200, 
    y: 200,
    angle: 0
}

function setup () {

    // Creates the canvas
    background ( '#000000' );
    createCanvas ( 400, 400 );
    angleMode ( DEGREES );
    rectMode ( CENTER );
    stroke ( 255 );

    // Creates the car 
    car = new Car();

}

function draw () {

    // Clears the canvas
    background ( '#000000' );

    // Moves the car 
    if ( keyIsDown ( UP_ARROW ) ) {
        pos.y -= 2;
    } 

    if ( keyIsDown ( RIGHT_ARROW ) ) {
        
        pos.angle += 2;

    }

    if ( keyIsDown ( DOWN_ARROW ) ) {
        pos.y += 2;
    }

    if ( keyIsDown ( LEFT_ARROW ) ) {

        pos.angle -= 2;

    }

    // Displays the car on the canvas
    translate(pos.x, pos.y);
    rotate(pos.angle);
    car.show();

}

and the car class

class Car {

    // Defines the class
    constructor ( ) {

        this.pos = createVector ( 0, 0 );
        this.width = 10;
        this.length = 20;

    }

    // Displays the car on the canvas
    show () {
        rect ( this.pos.x, this.pos.y, this.width, this.length );
    }

}

When I run this code, I can go forwards and backward, but when I try to steer and go forwards, I just go up, not in the direction the car is facing.

I know why this is happening (the Y-axis isn't relative to the rotation of the car), but I don't know how to do it any other way.

Federico Fusco
  • 545
  • 1
  • 5
  • 18
  • 1
    Up means forward, and the vector pointing forward can be calculated based on speed and angle. In general: `dx = cos(angle) * speed` and `dy = sin(angle) * speed`. –  Apr 08 '21 at 14:08
  • I've read that sentence 4 times and I genuinely don't understand what that means, or how to implement. – Federico Fusco Apr 08 '21 at 14:12
  • 1
    When the user presses the up arrow, you're doing `pos.y -= 2`. What you need to do instead is `pos.y -= cos(angle) * 2`, and also `pos.x -= sin(angle) * 2`. See also here: https://commons.wikimedia.org/wiki/File:Circle_cos_sin.gif –  Apr 08 '21 at 14:16
  • So I changed `pos.y -= 2` to `pos.y -= cos(pos.angle) * 2; pos.x -= sin(pos.angle) * 2;` and It's partially working, It's still only going up and down. Sorry if I'm not getting this, I haven't studied cos() and sin() in school yet. – Federico Fusco Apr 08 '21 at 14:24
  • 1
    I tested it and all you need is to fix the signs: for UP `pos.y -= cos(pos.angle) * 2; pos.x += sin(pos.angle) * 2;` and for DOWN `pos.y += cos(pos.angle) * 2; pos.x -= sin(pos.angle) * 2;` –  Apr 08 '21 at 14:34
  • Holy cow you're a lifesaver, thank you! If you post it as an answer I'll sign it as the correct one. – Federico Fusco Apr 08 '21 at 14:36
  • Sorry, this is a dupe: [Calculate vector with given angle and length](https://stackoverflow.com/questions/26950853/calculate-vector-with-given-angle-and-length) –  Apr 08 '21 at 14:40

0 Answers0