Turn line on angle

p5.js Coding Questions
1

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?

Schermafbeelding 2020-04-02 om 19.33.34
Schermafbeelding 2020-04-02 om 19.33.341418×836 4.98 KB 

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;
  }

  addSpeed() {
    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
    branch.addSpeed();
  }
}
1 Like
2

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;
  angle=0;  //Radians
  deltaAngle = radians(2); //Convert degrees to radians
  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