Rotating images without interfering with translation (new to coding!)

Processing Coding Questions
1

Hey coders, I’m working on a clock using a png image. every second the image moves vertically, but every minute I am trying to make the image rotate. That said even with experimenting with push and pop matrixes, I still can’t get a rotation of the image without it affecting the translation. (the image starts to go at an angle instead of vertical). Is there a way to rotate an image every minute while not affecting or accumulating in the translation? Hope that makes sense and here’s the code (and some failed attempts which are //out).

int secscl, sec, hrscl, x, y, z;
float r;
float theta = 0.0;
PImage img1, img2, img3, src;
void setup() {
  colorMode(HSB, 360, 100, 100);
  background(0, 0, 100);
  // size (700, 700);
  fullScreen();
  shapeMode(CENTER);
  imageMode(CENTER);
  secscl = height/60;
  hrscl = width/24;
  img3 = loadImage("clock_hand.png");
  img3.resize(width/10, height/6);
  r = width/4;
}

void draw() {

  x = second()*secscl;
  theta = radians(7.5*minute())-HALF_PI;
  z = hour()*hrscl;
  //pushMatrix();
  //rotate(theta);
  //popMatrix();
  /*if (second() == 0){
   pushMatrix();
  // rotate(theta);
   popMatrix();*/

  image(img3, z, 0+x);
}
1 Like
2

Hello,

and welcome to the forum!

Nice to have you here!!!

remember that rotation is always around 0,0

Hence, say

  translate(x,y); 
  rotate(theta); 
  image(img3, 0, 0);

full code (just an example)




int secscl, sec, hrscl, x, y, z;
float r;
float theta = 0.0;
PImage img1, img2, img3, src;

void setup() {
  size (700, 700);
  colorMode(HSB, 360, 100, 100);
  background(0, 0, 100);
  // 
  // fullScreen();
  shapeMode(CENTER);
  imageMode(CENTER);
  secscl = height/60;
  hrscl = width/24;
  img3 = loadImage("clock_hand.png");
  img3.resize(width/10, height/6);
  r = width/4;
}

void draw() {
  background(0, 0, 100);

  x = second()*secscl;
  theta = radians(7.5*minute())-HALF_PI;
  z = hour()*hrscl;

  pushMatrix();
  translate(second(), z); 
  rotate(theta);
  image(img3, 0, 0);
  popMatrix();
}

Chrisir

2 Likes
3

Hello,

There are lots of resources (tutorials, references, examples, etc.) here:
https://processing.org/
https://processing.org/tutorials/transform2d/ (just one example)

Also the Processing IDE has some examples to explore:
File > Examples… > Basics >

image
image252×593 8.74 KB

:)

1 Like
4

hey sorry for the delayed response. Chrisir, this is working well, and it makes sense to keep the img position at 0,0, and translate with the variables. Seems to be working! and glv thanks for the info much appreciated!

2 Likes
5

Also look at imageMode(CENTER);