previous sketch Wheels next sketch

Here's an example of how a simple recipe can produce hypnotic, animated visuals.

You can control this interaction using the keyboard:

  • r   make the rings thinner
  • R   make the rings thicker
  • s   make everything slower
  • S   make everything faster

The Program

float AngleStart = 0;  // where outer ring starts
float AngleBump = 0;   // added rotation of each ring
float RingThickness = 30; // how thick each ring is
float Speed = 1;       // how fast everything spins
color OrangeColor = color(180, 95, 10);
color BlueColor = color(0, 80, 110);
  
void setup() {
  size(400, 400);  // make a graphics window
  smooth();        // draw everything nicely
  noStroke();      // don't draw outlines of shapes
}

void draw() {
  background(BlueColor);     // background is blue
  float diam = width;        // starting diameter
  float angle = AngleStart;  // starting angle
  while (diam > 0) {         // work our way inwards
    fill(OrangeColor);       // select orange color
    ellipse(200, 200, diam, diam);  // draw a disk
    fill(BlueColor);         // select blue color
    // now draw half a disk in blue
    arc(200, 200, diam, diam, angle, angle+PI);
    diam -= RingThickness;  // next circle is smaller
    angle += Speed*AngleBump;  // rotate a little more
  }
  AngleStart += Speed*.01;  // next frame, start here
  AngleBump += Speed*.005;  // and change the speed of rotation
}

void keyTyped() {
  if (key == 'r') RingThickness = max(RingThickness-10, 10);
  if (key == 'R') RingThickness += 10;
  if (key == 's') Speed = max(Speed-.1, .1);
  if (key == 'S') Speed += .1;
}