# Moving shape with rotate

**URL:** <https://discourse.processing.org/t/moving-shape-with-rotate/42071>\
**Category:** Beginners\
**Tags:** homework\
**Created:** [May 26, 2023, 12:31am UTC](https://discourse.processing.org/t/moving-shape-with-rotate/42071 "2023-05-26T00:31:16Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Janoer](https://avatars.discourse-cdn.com/v4/letter/j/34f0e0/32.png) [@Janoer](https://discourse.processing.org/u/Janoer)\
**Post date:** [May 26, 2023, 12:31am UTC](https://discourse.processing.org/t/moving-shape-with-rotate/42071/1 "2023-05-26T00:31:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 26, 2023, 12:46am UTC](https://discourse.processing.org/t/moving-shape-with-rotate/42071/2 "2023-05-26T00:46:17Z")

</div>

Hello @Janoer,

Yes!

Look into the references for:

- translate()
- pushMatrix()
- rotate()
- popMatrix()

Tutorial:  
[https://processing.org/tutorials/transform2d](https://processing.org/tutorials/transform2d)

Additional examples:  
[http://learningprocessing.com/examples/](http://learningprocessing.com/examples/) See Chapter on transformations

`:)`

---

<div class="post-metadata">

**Author:** ![Janoer](https://avatars.discourse-cdn.com/v4/letter/j/34f0e0/32.png) [@Janoer](https://discourse.processing.org/u/Janoer)\
**Post date:** [May 26, 2023, 1:14am UTC](https://discourse.processing.org/t/moving-shape-with-rotate/42071/3 "2023-05-26T01:14:42Z")

</div>

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  
 ![ezgif.com-video-to-gif](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/f/7f24cec62585489b6683322b5519cffffc16fd11.gif)

---

<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:** [May 26, 2023, 7:16am UTC](https://discourse.processing.org/t/moving-shape-with-rotate/42071/4 "2023-05-26T07:16:58Z")

</div>

Hey, welcome to the forum!

It’s best when you post your code first

**The general idea is**

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

```

* * *

**Example**

```auto
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();
}

```

---

<div class="post-metadata">

**Author:** ![Janoer](https://avatars.discourse-cdn.com/v4/letter/j/34f0e0/32.png) [@Janoer](https://discourse.processing.org/u/Janoer)\
**Post date:** [May 26, 2023, 2:55pm UTC](https://discourse.processing.org/t/moving-shape-with-rotate/42071/5 "2023-05-26T14:55:03Z")

</div>

Thank you so much for helping me!

---

<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:** [May 26, 2023, 3:01pm UTC](https://discourse.processing.org/t/moving-shape-with-rotate/42071/6 "2023-05-26T15:01:27Z")

</div>

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()`

```auto

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

```

---

<div class="post-metadata">

**Author:** ![Janoer](https://avatars.discourse-cdn.com/v4/letter/j/34f0e0/32.png) [@Janoer](https://discourse.processing.org/u/Janoer)\
**Post date:** [May 26, 2023, 3:05pm UTC](https://discourse.processing.org/t/moving-shape-with-rotate/42071/7 "2023-05-26T15:05:41Z")

</div>

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?

```auto
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);

```

---

<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:** [May 26, 2023, 3:07pm UTC](https://discourse.processing.org/t/moving-shape-with-rotate/42071/8 "2023-05-26T15:07:34Z")

</div>

see trails: [Object walk with trail (footprints) - #14 by Chrisir](https://discourse.processing.org/t/object-walk-with-trail-footprints/42059/14)

---

<div class="post-metadata">

**Author:** ![Janoer](https://avatars.discourse-cdn.com/v4/letter/j/34f0e0/32.png) [@Janoer](https://discourse.processing.org/u/Janoer)\
**Post date:** [May 26, 2023, 3:43pm UTC](https://discourse.processing.org/t/moving-shape-with-rotate/42071/9 "2023-05-26T15:43:43Z")

</div>

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

```auto
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) {
    listFootprints.add(new PVector(x+150, y-200));
 
    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);
  }
}

```

---

<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:** [May 26, 2023, 5:16pm UTC](https://discourse.processing.org/t/moving-shape-with-rotate/42071/10 "2023-05-26T17:16:37Z")

</div>

_[Mod edit: please [avoid sharing full code solutions](https://discourse.processing.org/t/guidelines-answering-questions/2145#)]_

---

<div class="post-metadata">

**Author:** ![Janoer](https://avatars.discourse-cdn.com/v4/letter/j/34f0e0/32.png) [@Janoer](https://discourse.processing.org/u/Janoer)\
**Post date:** [May 27, 2023, 12:01am UTC](https://discourse.processing.org/t/moving-shape-with-rotate/42071/11 "2023-05-27T00:01:06Z")

</div>

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