Movement with keyboard and mouse

hotdogwe

For a project, we get to make a game with three levels. I am trying to do a Hotline Miami kind of game. I am having trouble with player rotation. The info online helped but when trying to copy it into my code it just increases the circumference of the rotation each time.

Here is my code

PImage biker;

int x = 100;
int y = 100;

void setup()
{
  size(1500,1000);
}


void draw()
{
  background(0);
  biker = loadImage("biker.png");

  bikerMovement();
  bikerThrowKnife();
}


void bikerMovement()
{

  rotate(atan2(mouseY-y,mouseX-x));
  image(biker, x, y);



}

void bikerThrowKnife()
{





}


void keyPressed()
{

  if(key == 'w')
  {

    y-=7;

  }
  else if(key == 'w' && key == 'a')
  {

    x-=7;
    y-=7;
  }



  if(key == 's')
  {

    y+=7;

  }
  if(key == 'a')
  {

    x-=7;

  }
  if(key == 'd')
  {

    x+=7;

  }

}

Eeyorelife

Sounds really cool! Make sure to share the result :)

Take a look at pushMatrix() amd popMatrix();

Also, it might be a good idea to make a player class and an enemy class.

Eeyorelife

The rotate() and translate() function can be a bit hard to understand at first, but when you get it, it will make sense (i hope).

translate() is not so hard to use. You decide how much you want to translate something by, and then it moves that amount to the left or right or up or down. But you should know something about the mechanism behind, in order to be able to use it correctly. Once you understand translate(), rotate() will be more understandable too.

I assume you already know that processing uses a coordinate system with its base (0,0) in the top left corner where the y-axis increases in value downwards, and the x-axis increases in value to the right. So in order to display an ellipse in the middle of the window, you write: ellipse(width/2, height/2,diameter,diameter);

Easy enough. If you translate() by width/2 and height/2, the ellipse will now appear in the bottom righthans corner. Why? Because you moved the base of the coordinatesystem to the middle of the screen. So "width/2, height/2" is only the middle of the screen when the base is at the top lefthand corner. To make the ellipse appear in the middle of the screen now, you have to write ellipse(0,0,diameter,diameter);

The rotate() function works pretty much the same way. It's all about the base ('bout dat base, 'bout dat base, no treble). So when you rotate() 90 degrees, the whole grid rotates AROUND THE BASE. Which means the the base is still in the top left corner, but ten pixels along the x-axis will now appear ten pixels below the base. Which might seem weird, but it makes sense.

So if you want something to rotate around itself, you should rotate(), then translate() to where you want it to appear, and then draw it with the centre on the base. Like this:

rotate(radians(90));
translate(width/2,height/2);
ellipse(0,0,30,30);

Of, course, since it's a circle, you cant even see that it's rotated, but try with your image, and you'll understand :). But there's a problem. If you do the above every frame of draw, the rotation and translation will accumulate and the whole thing will spiral out of control! Which is why you need pushmatrix() and popmatrix() !