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

Processing Coding Questions
1

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

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

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.

4

Please describe what you want to achieve.

The player…?

5

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

1 Like
6

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.

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
//