Moving shape with rotate

Processing Beginners
1

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

2

Hello @Janoer,

Yes!

Look into the references for:

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

Tutorial:
https://processing.org/tutorials/transform2d

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

:)

1 Like
3

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

4

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
5

Thank you so much for helping me!

1 Like
6

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
7

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
8

see trails: Object walk with trail (footprints) - #14 by Chrisir

1 Like
9

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) {
    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);
  }
}
10

[Mod edit: please avoid sharing full code solutions]

2 Likes
11

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

1 Like