# Moving shape with rotate

hello, I’m new at this. can a rotating shape be moved with mouseX and mouseY?

Hello @Janoer,

Yes!

Look into the references for:

• translate()
• pushMatrix()
• rotate()
• popMatrix()

http://learningprocessing.com/examples/ See Chapter on transformations

`:)`

1 Like

Thank you for helping me out! what if the shape rotate but when moved by mousex and mouse y, the shape doesn’t change? like this. and where should I put the mousex and mousey if i want like that

Hey, welcome to the forum!

It’s best when you post your code first

The general idea is

``````rectMode(CENTER);
translate (300,300);
rotate (mouseX);
rect(0,0,60,20);
``````

Example

``````void setup() {
size(900, 900);
rectMode(CENTER);
background(0);
}

void draw() {
background(0);

push();
translate (300, 300);
rotate(map(mouseX,
0, width,
0, TWO_PI));
rect(0, 0, 60, 20);
pop();
}

``````
2 Likes

Thank you so much for helping me!

1 Like

when you want to change both, pos and angle,
use left and right mouse button.

Of course you can change this, for example,

• click center of rect = change pos
• click circle at the top = change angle
• click corner = change size
• I haven’t done this, code would be similar, except for `mousePressed()`
``````
// Demo for combining pos and angle of a rect, input by mouse drag.
// Use left and right mouse button and drag.

boolean holdLeft, holdRight;
float posx=300, posy=300, angle;

void setup() {
size(900, 900);
rectMode(CENTER);
background(0);
}

void draw() {
background(0);

// Help Text
text("Left mouse = drag pos, right mouse = drag angle",
17, 17);

// display rect
push();
translate (posx, posy);
rotate(angle);
rect(0, 0, 60, 20);
pop();

// dragging
if (holdLeft) {
// POS
posx=mouseX;
posy=mouseY;
} else if (holdRight) {
// angle
angle=
map(mouseX,
0, width,
0, TWO_PI);
}
}

// ----------------------------------------------------------------------

void mousePressed() {
// start dragging (pos OR angle)
if (mouseButton == LEFT) {
holdLeft=true;
holdRight=false;
} else if (mouseButton == RIGHT) {
holdLeft=false;
holdRight=true;
}//else if
}//func

void mouseReleased() {
// stop
holdLeft=false;
holdRight=false;
}

``````
2 Likes

I really thank you for helping me. May i ask again? How this sun has trails without having to move the background to void setup?

``````void setup() {
size (700,700);
}

void draw() {
background(255);

stroke(0);
strokeWeight(3);

//sun
stroke(0);
fill(255,255,0);
ellipse(mouseX+150,mouseY-200,100,100);
``````
1 Like
1 Like

Thank you for the explanation! I have tried it, but there is an error. Here is the code

``````ArrayList<Ellipse> listFootprints = new ArrayList();
void setup() {
size (700,700);
smooth();
}

void draw() {
background(255);

// draw FootPrints
drawFootPrints();

// show size of the list (for testing)
text(listFootprints.size(), 17, 17);

//Draw Sun
drawSun(mouseX, mouseY);
}

// ---------------------------------------------------------------------------------

void drawSun(float x, float y) {
// draw Sun

// store formatting
push();
stroke(0);
strokeWeight(3);

//sun
stroke(0);
fill(255,255,0);
ellipse(mouseX+150,mouseY-200,100,100);
// store footprints (from legs position)
if (mouseX>0 && mouseY>0) {   // if mouse is there
storeFootprints(x, y);
}

// restore formatting
pop();
}

void storeFootprints( float x, float y ) {
// first time we store the foot print
if (listFootprints.size()==0) {

return; // leave
}

// After the first time we check if the last position was the same,
// we store the foot print only when it's new:
// last position:
if (listFootprints.get(listFootprints.size()-2).x != x+150 || listFootprints.get(listFootprints.size()-2).y != y-200)

void drawFootPrints(){
for (PVector pv : listFootprints) {
noFill();
ellipse(pv.x, pv.y, 2, 2);
//ellipse(pv.x+3, pv.y+3, 2, 2);
//ellipse(pv.x+3, pv.y-3, 2, 2);
}
}
``````

[Mod edit: please avoid sharing full code solutions]

2 Likes

I’m much obliged for your help all this time!

1 Like