möbius.pde

void setup() {
  size(500, 500, P3D);
  frameRate(25);
  colorMode(RGB, 1);
  fill(0);
  stroke(0, 1, 1);
  noSmooth();
  strokeWeight(2);
}

final int SEGMENTS = 20;
final int LOOP_LENGTH = 60;

final float RADIUS = 150;
final float WIDTH = 50;

final float IRADIUS = RADIUS - WIDTH;
final float ORADIUS = RADIUS + WIDTH;

final int SIDES = 4;

void draw() {
  final int FRAME = frameCount % LOOP_LENGTH;
  final float RATIO = FRAME / float(LOOP_LENGTH);
  
  background(0);
  
  pushMatrix();
  
  translate(width / 2 - 20, height / 2 - 20);
  
  rotateY(-PI / 6 + sin(-RATIO * 2 * PI) * 0.15);
  rotateX(PI / 8 + cos(-RATIO * 2 * PI) * 0.15);

  for (int j = 0; j != SIDES; ++j) {
    beginShape(TRIANGLE_STRIP);
    for (int i = 0; i != SEGMENTS; ++i) {
      final float ANGLE = (i * 2 * PI) / (SEGMENTS - 1);
      
      final float TWIST_OFF = (2 * PI) / SIDES;
      final float TWIST = (ANGLE / SIDES) + (TWIST_OFF * RATIO);
      
      final float THIS_TWIST = TWIST + (TWIST_OFF * j);
      final float NEXT_TWIST = TWIST + (TWIST_OFF * (j + 1));
      
      placeVertex(ANGLE, IRADIUS, ORADIUS, THIS_TWIST, WIDTH);
      placeVertex(ANGLE, IRADIUS, ORADIUS, NEXT_TWIST, WIDTH);
    }
    endShape();
  }
  
  popMatrix();
    
//  saveFrame("###-mobius.png");
//  if (frameCount == LOOP_LENGTH) exit();
}

void placeVertex(float ANGLE,
                 float IRADIUS,
                 float ORADIUS,
                 float TWIST,
                 float WIDTH) {
  final float RAD = lerp(IRADIUS, ORADIUS, cos(TWIST) * 0.5 + 0.5);
  vertex(sin(ANGLE) * RAD, cos(ANGLE) * RAD, sin(TWIST) * WIDTH);
}