# Turn line on angle

**URL:** <https://discourse.processing.org/t/turn-line-on-angle/19349>\
**Category:** Coding Questions\
**Created:** [April 2, 2020, 6:24pm UTC](https://discourse.processing.org/t/turn-line-on-angle/19349 "2020-04-02T18:24:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![yasinyer](https://avatars.discourse-cdn.com/v4/letter/y/ce73a5/32.png) [@yasinyer](https://discourse.processing.org/u/yasinyer)\
**Post date:** [April 2, 2020, 6:24pm UTC](https://discourse.processing.org/t/turn-line-on-angle/19349/1 "2020-04-02T18:24:38Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/72688acd7540cd85aeee67cefa7530ba2753aa0a.png)

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

```

```auto
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();
  }
}

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [April 3, 2020, 2:00am UTC](https://discourse.processing.org/t/turn-line-on-angle/19349/2 "2020-04-03T02:00:31Z")

</div>

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

```java

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

```