Drag your mouse!

Here's a bunch of pictures that rotate in a ring, like an old-fashioned camera shutter. For fun, they also get bigger as the ring gets bigger.

This program does a lot of work in just a few lines of text. By the end of the course, you'll know the how and why of every line, and you'll be able to write your own programs that do stuff like this (or entirely unlike this!).

The Program

PImage[] MyImages;       // an array to hold all the images
String[] ImageFiles = {  // paths to the photos we'll be using
          "shutterpix/NZtrip.jpg",  "shutterpix/NZtrip3.jpg",  
          "shutterpix/NZtrip2.jpg", "shutterpix/NZtrip4.jpg",
          "shutterpix/NZtrip5.jpg"}; 
int Xsize = 600;    // draw all pictures 600 pixels wide
int Ysize = 450;    // draw all pictures 450 pixels high
int NumImages = 10; // how many photos to draw
   
void setup() {
  size(Xsize, Ysize);   // make a window the size of a photo
  smooth();
  MyImages = new PImage[ImageFiles.length];  // allocate the photo array
  for (int i=0; i<ImageFiles.length; i++) {  
    MyImages[i] = loadImage(ImageFiles[i]);  // and read in the photos
  }
}

void draw() {
  background(255);
  float minScale = .05;   // minimum and maximum scale for pictures
  float maxScale = .3;    // I played with this by hand until it looked good
  float bigR = min(width, height)/2.0;  // radius of the ring
  
  float diagLen = mag(width/2, height/2);  // half the diagonal of the window
  float dx = mouseX - (width/2);        // distance from the current mouse to
  float dy = mouseY - (height/2);       // the center of the window.
  float d = mag(dx, dy)/diagLen;        // 0: mouse is at center, 1: at corner
  float scl = lerp(minScale, maxScale, d); // use d to find the scale factor
  float trans = lerp(Ysize*scl, bigR-(Ysize*scl), d); // d is ring radius
  float picAngle = atan2(dy, dx);       // find the angle by which to rotate
  for (int i=0; i<NumImages; i++) {     // we're going to draw each image in turn
  float angle = map(i, 0, NumImages, 0, TWO_PI);  // angle to spin by
  pushMatrix();                       // save the coordinates
    translate(width/2, height/2);     // move to center
    rotate(angle);                    // point Y-axis at next picture's center
    translate(0, -trans);             // move to the picture center
    scale(scl);                       // scale the picture
    rotate(picAngle);                 // rotate around this picture's center
    image(MyImages[i%MyImages.length], -Xsize/2, -Ysize/2, Xsize, Ysize);  
  popMatrix();                        // restore the coordinates
  }
}