Functions (rotate);How to rotate it according to the direction it moves?

Nadun

v//declaringglobalvaribales

float dia1=50;

//diameteroftheface

float x=400;

float y=400;

float speedX=4;

float speedY=0;

//setup

void setup() {

size(810, 810);

} //draw

void draw() {

background(225);

fill(225, 0, 0);

stroke(0);

ellipse(x, y, dia1, dia1);

fill(0, 225, 0);

//a nose

triangle(x, y, x+10, y+10, x-10, y+10);

//movingtheballXway

x=x+speedX;

//movingtheballYway

y=y+speedY;

//if it hits the left or right corners it will turn around

if (x>width-dia1/2 || x<2+dia1/2) {

    speedX=speedX*-1;
}
// it its hits the top or bottom it will turn around 

if (y>height-dia1/2 || y<2+dia1/2) {

    speedY=speedY*-1;
}

} // this code to move it according to the keys W S D A

void keyPressed() {

if (keyCode=='W') {

    speedX=0;

    speedY=-4;

}
if (keyCode=='S') {

    speedX=0;

    speedY=4;

}
if (keyCode=='A') {

    speedX=-4;

    speedY=0;

}
if (keyCode=='D') {

    speedX=4;

    speedY=0;

}

}

Guys, so I made this ball with a nose, which moves around the screen with the keys W S D A.Also if it hits the edges it will bounce back. what I aim to do is change the direction the ball is facing to make it face the same way as it's moving.I wanted to use rotate for this but once I use rotate...it throws all the coordinates off.Rotating it back doesn't help either..how do I do this please help? I have commented out the stuff I have tried to do...for example, i tried to translate it to 250,250...and then rotate..but then X becomes Y vice versa, and also the ball won't go all the way to the corners and it moves out(Since it's translated down); Thank you and your help is so appreciated Nadun

prince_polka

@Nadun I know how to do this but format your code first.
What do you wan't the W key to do? Shall the ball move faster if it's pressed? If you're just going to change direction you only need 3 keys, or just 2 if you skip the 180 turn.

Nadun

Hi, Thank you so much for replying. I'm really new to coding so I'm sorry if my code looks bad. Have the ball bounce as it hits a wall. It will always bounce back in the opposite direction it was traveling. When it reaches a wall, it will change it's direction of movement and it will change the direction it is pointing as well.
When the user presses 'w', Fizzy should turn and move up, 'a' will make it turn and move left, 's' will turn it to face down the screen and 'd' will make it move right. Thus it will now be able to move in four separate directions controlled by the 'w', 's', 'a', and 'd' keys. I got the second half done by myself! but the rotating thing i'm really frustrated at the moment..

prince_polka

@oh I missunderstood, thought you wanted the direction of controls to rotate. Is it just the green traingle you want to rotate?

Nadun

No sir the triangle along with ball.Think of it has a animal "a circle with a nose" the nose being the traingle.

Nadun

Something like this

prince_polka

the trick is you align the scene so whatever you want to rotate is in the corner, then you rotate and realign

//declaringglobalvaribales
float dia1=50;
//diameteroftheface
float x=400;
float y=400;
float speedX=4;
float speedY=0;
float[] speedsx = new float[] {0,4,0,-4};
float[] speedsy = new float[] {-4,0,4,0};
float rot=0;
int dir=1;
//setup
void setup() { 
size(810, 810);
} //draw
void draw() {
  background(225);
fill(225, 0, 0);
stroke(0);
ellipse(x, y, dia1, dia1);
fill(0, 225, 0);
//a nose
pushMatrix();
translate(x,y);
rotate(dir*HALF_PI);
translate(-x,-y);
triangle(x, y-20, x+15, y+10, x-15, y+10);
popMatrix();
//movingtheballXway
x+=speedX;
//movingtheballYway
y+=speedY;
//if it hits the left or right corners it will turn around
if (x>width-dia1/2 || x<2+dia1/2) {
    dir+=2;
}
// it its hits the top or bottom it will turn around 
if (y>height-dia1/2 || y<2+dia1/2) {
   dir+=2;
}
dir%=4;
speedX=speedsx[dir];
speedY=speedsy[dir];
}
void keyPressed() {
if (keyCode=='W') { dir=0; }
if (keyCode=='A') { dir=3; }
if (keyCode=='S') { dir=2; }
if (keyCode=='D') { dir=1; }
}

Nadun

translate(x,y); rotate(dir*HALF_PI); translate(-x,-y); triangle(x, y-20, x+15, y+10, x-15, y+10); popMatrix();

Could you explain to me what you did here? and also why can't use put rotate as lets say rotate(dir*radians(90)); isn't it the same thing? but it doesn't work though

prince_polka

I'm not the best at explaining, but have you read this tutorial? https://processing.org/tutorials/transform2d/
And yes, radians(90) is the same as HALF_PI, works the same for me

Nadun

Thank you! and your explaining is fine! ill look up the tutorial and ill get back to you if there are any doubts? is that alright?

prince_polka

no problem

kfrajer

Could you explain to me what you did here? and also why can't use put rotate as lets say rotate(dir*radians(90)); isn't it the same thing? but it doesn't work though

It depends on the nature of dir. In general, the reference is your friend: https://processing.org/reference/rotate_.html

And the tutorial by @prince_polka is a really good way to start. By the way, check the examples as well as they are most of the time simple and right to the point: https://processing.org/examples/

Kf

Nadun

translate(x,y); rotate(dir*HALF_PI); translate(-x,-y);

guys this is my only question, can you explain this, why do you rotate it then turn it back to (-x,-y).Also I know what translate is..but when you put it as x and y instead of values what is the difference?

prince_polka

@Nadun

why do you rotate it then turn it back to (-x,-y)

no good reason, you can remove translate(-x,-y); and the x's and y's in triangle and it'll work the same.

translate(-x,-y);

triangle(0, -20, 15, 10, -15, 10);

when you put it as x and y instead of values what is the difference?

passing the value of the variables x and y, rather than a hard-coded constant value, won't make any difference when using translate afaik
when things can make a difference is with object and arrays but that's another topic

kfrajer

pushMatrix();
translate(x,y);
rotate(dir*HALF_PI);
translate(-x,-y);
triangle(x, y-20, x+15, y+10, x-15, y+10);
popMatrix();

What you are doing is setting the pivot of your rotation. The first translate moves the anchor point for rotation to position x,y. After the rotation happens, it translates the reference point back to the original coordinate system. Then you draw the triangle is this rotated frame. Push and pop are there to restore the matrix so anything that is drawn after the popMatrix will be done on an unrotated reference frame.

Imagine you have to floor mats, one orange and one black and the black is on top of the orange. When you call rotate once, what you are doing is placing your finger on the 0,0 corner of the black mat and you are rotating the mat keeping that corner fix. Notice that only the black mat rotates. The orange mat is kept in place.

Now, if you call translate first, then that coordinate x,y in translate() is used as the pivot point. You place your finger at x,y and rotate an angle defined by your function. Now, because you translated your frame, anything drawn in your frame is in reference to this point. Translate(-x,-y) moves the reference back to where 0,0 was originally in the black mat. However keep in mind the black mat was rotated. The back mat does not match the orange mat. The orange mat is un-rotated. When you draw the triangle, is in reference to the 0,0 position in the back mat. After you draw the triangle, you call popMatrix. What this does is to draw everything with respect to the un-transformed coordinate system of the mats aka. the orange mat.

More info in this tutorial: https://processing.org/tutorials/transform2d/

Kf

Kf