Turn line on angle

Hi, I’m kinda new here and need a little help!

I made a line that moves along the arrrow keys and speeds up when the space bar is pressed. In my code when the line changes its direction it makes a corner (see left), but I want to make the line turn gradually in an angle (like a vehicle would turn in reality), as right.

For example: as long as the left arrow is pressed, it keeps turning to the left.

I’m not an expert in p5.js, but I think it can be fixed with sin() and/ or cos(), I just couldn’t find a solution. Is there somebody who can help me with this?

``````class Branch {
constructor(tempX, tempY) {
this.x = tempX;
this.y = tempY;
this.prevx = tempX;
this.prevy = tempY;
this.speed = 1;
this.dirX = 0;
this.dirY = 0;
}

update() {
this.move();
this.show();
this.walls();
}

move() {
this.prevx = this.x;
this.prevy = this.y;
this.x += this.dirX * this.speed;
this.y += this.dirY * this.speed;
}

setDirection(x, y) {
this.dirX = x;
this.dirY = y;
}

this.speed++;
}

show() {
stroke(0);
strokeWeight(1);
line(this.prevx, this.prevy, this.x, this.y);
}

walls() {
if (this.x > windowWidth) {
this.x = 0;
} else if (this.x < 0) {
this.x = windowWidth;
} else if (this.y > windowHeight) {
this.y = 0;
} else if (this.y < 0) {
this.y = windowHeight;
}
}
}
``````
``````let branch = [];

function setup() {
background(255);
createCanvas(windowWidth, windowHeight);
branch = new Branch(width / 2, height / 2);
}

function draw() {
branch.update();
}

function keyPressed() {
if (keyCode === UP_ARROW) {
branch.setDirection(0, -1);
} else if (keyCode === DOWN_ARROW) {
branch.setDirection(0, 1);
} else if (keyCode === LEFT_ARROW) {
branch.setDirection(-1, 0);
} else if (keyCode === RIGHT_ARROW) {
branch.setDirection(1, 0);
}
else if (keyCode === 32) { // SPACE_BAR
}
}

``````
1 Like

I made a simple version but using Processing Java. You want to check the calculate functions as they provide the coordinate information that you want to store in your `branch` array.

Kf

``````
//INSTRUCTIONS:
//         *-- Click on sketch so it get the focus and it can detect keystrokes
//         *-- Click on sketch to tggle play/pause
//         *-- Presse either up or down to adjust the angular direction

//===========================================================================
// GLOBAL VARIABLES:
float px, py;
float vx, vy;
float speed, angle;
float deltaAngle;  //How fast is the change in angle aka.

boolean isPause;

//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:

void settings() {
size(600, 600);
}

void setup() {
px=0;
py=0;

isPause=false;

speed=0.5;
calculateVelocity();

textAlign(CENTER, CENTER);
rectMode(CENTER);

fill(255);
stroke(150, 150, 10);
strokeWeight(2);

resetSketch();
}

void draw() {
//background(50);

translate(width/2,height/2);
scale(1.0, -1.0);  //Inverts vertical axis to match cartesian coordiante

if (!isPause) {
drawPoint();
}

surface.setTitle("State:"+(isPause?"Paused":"Running")+" Angle="+nf(degrees(angle), 0, 0) + " degs");
}

void keyPressed() {

//Only detect key changes if not paused
if(isPause)
return;

if (keyCode==UP) {
angle+=deltaAngle;
} else if (keyCode==DOWN) {
angle-=deltaAngle;
}

}

void mouseReleased() {
isPause=!isPause;
}

//===========================================================================
// OTHER FUNCTIONS:
void calculateVelocity() {
vx=speed*cos(angle);
vy=speed*sin(angle);
}

void calculatePosition() {
calculateVelocity();
px+=vx;
py+=vy;

//checkBoundaries() resetSketch();
}

void drawPoint() {
calculatePosition();
point(px, py);
}

void resetSketch(){
background(50);
}

``````
1 Like