let images rotate like on a turntable

elkallemajor

Hi everybody... I am a processing noob but somewhat experienced in coding in Actionscript 2.0.. You name it.. last coding was some time ago. Anyways, right now I am looking for a solution for an arts-project and I think processing is the way to go but I got stuck here and there. What I'm trying to archieve is to let images rotate around a pivot outside the background. Imagine it as a turntable with images lying on it. The images should appear each time they are transferred inside a folder. So to trigger that I found a workaround. My problem is the animation part. Coming from flash my thinking goes like this: Animate a Movieclip that rotates at a given speed and position. Load images into that container and let them rotate with it.

It would be even cooler to do that in 3D and position the images at a certain depth as well, so it looks more like a vortex of images seen from above.

Any ideas on how to archieve this with smooth output for up to 200 images? I am thankful for every help.

PascalAudet

https://processing.org/examples/rotate.html

jeremydouglass

@elkallemajor -- re:

What I'm trying to achieve is to let images rotate around a pivot outside the background.

Review the 2D Transformations tutorial -- it specifically discusses pivoting at the corner of the background or beyond (even on accident)

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

One approach:

1. Use translate() to move your turntable pivot point from the upper left corner of the screen to somewhere offscreen
2. add a single rotate step for interactively moving the turntable
3. inside a for() loop, place a rotate() for drawing each step around the edges of the turntable
4. at each rotate step in the loop, either do drawing at a given distance with x/y arguments or push/pop a translate(r,0) and draw at 0,0.

elkallemajor

Hey there, thanks a lot for your help! Actually I got it working with two images at a fixed position on the "turntable" right now. My problem is to add an image at a random position that gets stored. But I think I will be able to do that with an array in which I store the filename and a position once. Each time a new file is added it gets stored in the array as well and in the animation I can load all images at their fixed position. Makes sense, doesn't it? I will write as soon as tried that.

jeremydouglass

@elkallemajor --

Glad to hear that the approach is working out for you!

Supposing you have a list of equidistant step "slots" on the turntable to store things, then you could choose to put something in a particular slot. For example, here is a demonstration of the approach with 24 slots. Each one is marked with a colored rect rather than an image.

/**
 * TurntableOffscreen
 * rotate a turntable of objects through the screen from an offscreen pivot point
 * 2017-09-17 Jeremy Douglass - Processing 3.3.6
 * forum.processing.org/two/discussion/24130/let-images-rotate-like-on-a-turntable
 */
int turns = 24;
float off = 0.0;
float speed = 0.1;

void setup(){
  fill(255);
  stroke(0);
  rectMode(CENTER);
  textAlign(CENTER,CENTER);
}
void draw() {
  background(0);
  translate(-width/2, height/2);
  rotate(off);
  for (int i=0; i<turns; i++) {
    fill(255 - i * 192.0/turns);
    rotate(radians(360.0/turns));
    rect(width, 0, 20, 20);
    fill(0);
    text(i, width, 0);
  }
}
void keyPressed(){
  // change the offset
  if (keyCode == LEFT  || keyCode == UP )  { off = off + speed; }
  if (keyCode == RIGHT || keyCode == DOWN) { off = off - speed; }
}