# Oscillation

For this week’s assignment in The Nature of Code I used what we have learned about generating oscillations with trigonometric functions to create an abstract clock. My goal was to create something that shows the passage of time in an interesting, though not necessarily useful, way.

This clock sketch makes use of the millis() function to visualize minutes, hours, and days up to a year from the start of the sketch in concentric rings around an oscillating pair of lights in the middle representing seconds.

While I hoped to create something beautiful and meditative the final design ultimately gives me a headache. It did help me though to better understand using sin() to animate oscillations and movement around circles.

let minR = 50; let hrR = 100; let dayR = 150; let yearR = 200; function setup() { createCanvas(windowWidth, windowHeight, WEBGL); } function draw() { background(0); noStroke(); // background light with second oscilation let lightX = sin((millis()/240)%TWO_PI); pointLight(5, 125, 245, lightX*10, 0, 50); pointLight(245, 125, 5, -lightX*10, 0, 50); plane(windowWidth, windowHeight); let incrementMinute = map((millis()/120)%500, 0, 500, PI, 0.01); let incrementHour = map((millis()/7200)%500, 0, 500, PI, 0.01); let incrementDay = map((millis()/172800)%500, 0, 500, PI, 0.01); let incrementYear = map((millis()/6307200)%500, 0, 500, PI, 0.01); translate(0, 0, 50); fill(200); // year counter for(let i = 0; i < TWO_PI; i+= incrementYear){ let x = yearR * sin(i); let y = yearR * cos(i); fill(250); circle(x, y, 12) } // day counter for(let i = 0; i < TWO_PI; i+= incrementDay){ let x = dayR * sin(i); let y = dayR * cos(i); fill(250); circle(x, y, 9) } // hour counter for(let i = 0; i < TWO_PI; i+= incrementHour){ let x = hrR * sin(i); let y = hrR * cos(i); fill(250); circle(x, y, 6) } // minute counter for(let i = 0; i < TWO_PI; i+= incrementMinute){ let x = minR * sin(i); let y = minR * cos(i); fill(250); circle(x, y, 3) } }