let images rotate like on a turntable

edited September 2017 in How To...

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.



  • @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)

    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.
  • 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.

  • edited September 2017

    @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(){
    void draw() {
      translate(-width/2, height/2);
      for (int i=0; i<turns; i++) {
        fill(255 - i * 192.0/turns);
        rect(width, 0, 20, 20);
        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; }


Sign In or Register to comment.