# How could I make my player gradually rotate to the angle it's moving?

**URL:** <https://discourse.processing.org/t/how-could-i-make-my-player-gradually-rotate-to-the-angle-its-moving/40496>\
**Category:** Coding Questions\
**Created:** [January 7, 2023, 2:08pm UTC](https://discourse.processing.org/t/how-could-i-make-my-player-gradually-rotate-to-the-angle-its-moving/40496 "2023-01-07T14:08:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![vinijoncrafts](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vinijoncrafts/32/14306_2.png) [@vinijoncrafts](https://discourse.processing.org/u/vinijoncrafts)\
**Post date:** [January 7, 2023, 2:08pm UTC](https://discourse.processing.org/t/how-could-i-make-my-player-gradually-rotate-to-the-angle-its-moving/40496/1 "2023-01-07T14:08:32Z")

</div>

I don’t really understand fully how vectors work, and I’m trying to implement them in my code. I am very sure that the use of vector makes a lot of stuff easier but for now I’ll rely on the help of you guys lol

```auto
Vini vini;

void setup() {
  size(600, 600);
  //fullScreen();
  surface.setLocation(600, 50);
  vini = new Vini();
}

void draw() {
  background(50);
  vini.movement();
  vini.display();
}

void keyPressed() {
  if (key < 255) {
    vini.keys[key] = true;
  }
}

void keyReleased() {
  if (key < 255) {
    vini.keys[key] = false;
  }
}

class Vini {

  PVector pos;
  PVector vel;
  float rot;
  final int finvel = 10;
  final float accel = finvel/10;
  boolean [] keys = new boolean[255];
  PImage seta = loadImage("Seta.png");
  //float triamp = -(abs(vel.x) + abs(vel.y))*10;
  
  Vini() {
    pos = new PVector(width/2, height/2);
    vel = new PVector(0, 0);
  }

  void display() {
    pushMatrix();
    translate(pos.x, pos.y);
    rotate(rot);
    shapeMode(CENTER);
    triangle(20, 12, 20, -12,-(abs(vel.x) + abs(vel.y))*10, 0);
    circle(0, 0, 50);
    image(seta, -19, -10, 40, 20);
    popMatrix();
  }

  void movement() {

    pos.x += vel.x;
    pos.y += vel.y;
    
    if (keys['w'] && vel.y > -finvel ) {
      vel.y -= 2*accel;
       rot = -PI/2;
      }
    else if (keys['w'] == false && vel.y < 0) {
      vel.y += accel;
    }
    if (keys['s'] && vel.y < finvel) {
      vel.y += 2*accel;
      rot = PI/2;
    } else if (keys['s'] == false && vel.y > 0) {
      vel.y -= accel;
    }
    if (keys['a'] && vel.x > -finvel) {
      vel.x -= 2*accel;
      rot = PI;
    } else if (keys['a'] == false && vel.x < 0) {
      vel.x += accel;
    }
    if (keys['d'] && vel.x < finvel) {
      vel.x += 2*accel;
      rot = 0;
    } else if (keys['d'] == false && vel.x > 0) {
      vel.x -= accel;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![vinijoncrafts](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vinijoncrafts/32/14306_2.png) [@vinijoncrafts](https://discourse.processing.org/u/vinijoncrafts)\
**Post date:** [January 9, 2023, 7:19pm UTC](https://discourse.processing.org/t/how-could-i-make-my-player-gradually-rotate-to-the-angle-its-moving/40496/3 "2023-01-09T19:19:09Z")

</div>

that didn’t work, the player still didn’t gradually rotate into position, and the player now was also facing to the wrong side, somehow.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 9, 2023, 9:03pm UTC](https://discourse.processing.org/t/how-could-i-make-my-player-gradually-rotate-to-the-angle-its-moving/40496/4 "2023-01-09T21:03:14Z")

</div>

Please describe what you want to achieve.

The player…?

---

<div class="post-metadata">

**Author:** ![vinijoncrafts](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vinijoncrafts/32/14306_2.png) [@vinijoncrafts](https://discourse.processing.org/u/vinijoncrafts)\
**Post date:** [January 10, 2023, 1:21am UTC](https://discourse.processing.org/t/how-could-i-make-my-player-gradually-rotate-to-the-angle-its-moving/40496/5 "2023-01-10T01:21:48Z")

</div>

when I press W/A/S/D, the player rotates in a constant speed to the angle of the movement. Example: D is being pressed, so when D is released and W is pressed, it’ll rotate gradually from 0 to 90 degrees, instead of instantly flipping directions. I hope that’s enough information

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 10, 2023, 9:22am UTC](https://discourse.processing.org/t/how-could-i-make-my-player-gradually-rotate-to-the-angle-its-moving/40496/6 "2023-01-10T09:22:18Z")

</div>

still unclear description, but much better now

here is an example, where the angle gets changed slowly. It’s called easing.  
(the walking direction is not effected)

- It’s unclear whether you want the walking direction effected or not.

```auto

Vini vini;

void setup() {
  size(600, 600);
  //fullScreen();
  surface.setLocation(600, 50);
  vini = new Vini();
}

void draw() {
  background(50);
  vini.movement();
  vini.display();
}

void keyPressed() {
  if (key < 255) {
    vini.keys[key] = true;
  }
}

void keyReleased() {
  if (key < 255) {
    vini.keys[key] = false;
  }
}

// ===================================================================================

class Vini {

  final float easing = 0.0091; 

  PVector pos;
  PVector vel;
  float rotWishedFor, rotUsed;
  final int finvel = 10;
  final float accel = finvel/10;
  boolean [] keys = new boolean[255];
  PImage seta = loadImage("Seta.png");
  //float triamp = -(abs(vel.x) + abs(vel.y))*10;

  Vini() {
    pos = new PVector(width/2, height/2);
    vel = new PVector(0, 0);
  }

  void display() {
    pushMatrix();
    fill(0); 
    translate(pos.x, pos.y);
    rotate(rotUsed);
    shapeMode(CENTER);

    // Nose 
    pushMatrix();
    translate(20, 0);
    fill(255, 0, 0);
    rect(0, 0, 10, 10); 
    popMatrix();

    triangle(20, 12, 
      20, -12, 
      -(abs(vel.x) + abs(vel.y))*10, 0);
    ellipse(0, 0, 50, 50);
    fill(255, 0, 0); 
    fill(220); 
    text("seta", -19, -10, 40, 20);
    popMatrix();
  }

  void movement() {

    pos.x += vel.x;
    pos.y += vel.y;

    if (keys['w'] && vel.y > -finvel ) {
      vel.y -= 2*accel;
      rotWishedFor = -PI/2;
    } else if (keys['w'] == false && vel.y < 0) {
      vel.y += accel;
    }
    if (keys['s'] && vel.y < finvel) {
      vel.y += 2*accel;
      rotWishedFor = PI/2;
    } else if (keys['s'] == false && vel.y > 0) {
      vel.y -= accel;
    }
    if (keys['a'] && vel.x > -finvel) {
      vel.x -= 2*accel;
      rotWishedFor = PI;
    } else if (keys['a'] == false && vel.x < 0) {
      vel.x += accel;
    }
    if (keys['d'] && vel.x < finvel) {
      vel.x += 2*accel;
      rotWishedFor = 0;
    } else if (keys['d'] == false && vel.x > 0) {
      vel.x -= accel;
    }

    rotUsed += ( rotWishedFor-rotUsed ) * easing ;
  }
}//class
//

```