A Clock for Aliens

Project Brief

Create an animation that shows a clock for aliens. The clock cannot display time tied to the rotation of the Earth - years, months, days, hours, minutes, etc. Instead create your own system of time - however large or small. If the clock is no longer tied to celestial movement - how else can you express the passing of time? Would the time be continuous or discrete? Cyclical or unidirectional? How would you divide it into sub-elements and what visual tools would you use to represent distinctions: color, shape, size, order?

• use arrays and loops
• use rotation with the transformation matrix
• use either trigonometric functions or intervals

Inspiration

The visual inspiration for this clock drew from the life cycle of a flower, which has a distinct beginning and end, much like the progression of physical time. I also wanted to incorporate traditional time-telling concepts, using elements like continuous movement and shapes to represent the unidirectional nature of time.

Trigonometry

In polar coordinates, a circle is a constant radius `r` combined with an angle `a` sweeping from 0 to `TWO_PI`. To draw this on a Cartesian grid, trigonometry translates these polar instructions: `x = r * cos(a)` determines the horizontal position, and `y = r * sin(a)` calculates the vertical position. As the angle `a` increments, plotting these resulting `(x, y)` pairs traces the continuous curve of a circle.

Building the Foundation in p5.js

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(0);
  translate(width / 2, height / 2);

  for (var a = 0; a < TWO_PI; a += 0.1) {
    var r = 100;
    var x = r * cos(a);
    var y = r * sin(a);
    stroke(255);
    strokeWeight(4);
    point(x, y);
  }
}

I set up the code to draw a circle, using trigonometry.

k = 6

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(0);
  translate(width / 2, height / 2);

  for (var a = 0; a < TWO_PI; a += 0.02) {
    var r = 200 * cos(k * a);
    var x = r * cos(a);
    var y = r * sin(a);
    stroke(255);
    strokeWeight(4);
    point(x, y);
  }
}

Adding the variable K determines the amount of rotations around the x,y axis, drawing shape like petals of a flower.

Motion

RotationAngle function provides counter rotation, which applies a transformation to the entire coordinate system before any points are drawn.

maxAngle traces how much of the petals are drawn and scale, controls the "bloom" effect on the radius.

The loop draws the points, using both the maxAngle to determine how many points are rendered and the scale to determine their current size.

Final

var k = 6;

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(0);
  translate(width / 2, height / 2);

  // counter rotation
  var rotationProgress = (millis() % 10000) / 10000;
  var rotationAngle = -rotationProgress * TWO_PI;
  rotate(rotationAngle);

  // draw petals 5 seconds
  var progress = (millis() % 5000) / 5000;

  // Calculate how far along the curve to draw
  var maxAngle = progress * TWO_PI;

  // bloom over 10 seconds
  var pulseProgress = (millis() % 10000) / 10000;
  var pulse = sin(pulseProgress * TWO_PI);
  var scale = 1 + pulse * 0.3; // bloom between 0.7 and 1.3

  for (var a = 0; a < maxAngle; a += 0.02) {
    var r = 200 * cos(k * a) * scale; //bloom on radius
    var x = r * cos(a);
    var y = r * sin(a);
    stroke(255);
    strokeWeight(4);
    point(x, y);
  }
}