Generative Animation: Creating a Clock for Aliens

Interpreting the 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 (or both if need be).

Visualizing Time: Sketching My Concept with the Color Wheel

After reviewing the brief, I envisioned designing an innovative clock as an alien creature itself—specifically, a chameleon-like being that communicates and measures time through its shifting colors. This clock is inspired by the dynamic nature of the alien lifeform. It acts as a captivating rotating color wheel that cycles through the entire spectrum of hues. This design mimics the vibrant display of colors seen on the creature's skin, reflecting its ability to change colors.

As the alien shifts through its colors, it creates a mesmerizing visual experience that draws the viewer in. Every time the creature comes to rest on the color red, it serves as a signal to the aliens that a full day has passed in their world. In this way, the clock allows the aliens to perceive the passage of time through color changes.

A hand-drawn color wheel concept for representing time, with segments in various colors for different hours.

Sketch illustrating the gradual transition of hues through a color cycle, highlighting the seamless blending of shades.

Inspired by Jordan Peele's 'NOPE': Crafting an Alien Clock from the Film's Intriguing Creature

I felt a surge of excitement to start designing an alien clock. I began brainstorming and discussing my ideas with my peers. I recalled a film I had watched called ‘NOPE,’ where the alien creature captivated me. This inspired me to conceptualize the alien itself as a clock. I realized that aliens might communicate visually, which opened up new possibilities for my design.

GIF of the alien creature in the film 'NOPE.'

Building on the Foundation: Utilizing Maxim's Code from Class

Using the code that Maxim provided in class, I've decided to use it as the foundation for my project. This will serve as the starting point for my own generative animation. I can’t just jump into coding; I need to reference someone else's work to understand the concepts and approach involved in tackling this challenge.

1let pY = 0
2
3function setup() {
4  createCanvas(800, 800);
5  colorMode(HSB, TWO_PI, 1, 1)
6}
7
8function draw() {
9  background(0.8);
10  
11  pY = map(sin(millis() * 0.002), -1, 1, 0, height)
12  console.log(pY)
13  let sat = map(sin(millis() * 0.005), -1, 1, 0, 1)
14  fill(5, sat, 0.8)
15  circle(width * 0.5, height*0.5, pY)
16}

Written Code that depicts animation of a purple circle scaling up and down.

Animation of a purple circle scaling up and down.

Modifying the Shape to a Square

After recreating the code shared in class, I decided to modify the shape to a square to better resemble the square-shaped alien creature in 'NOPE' that inspired my project. To achieve this, I adjusted the rectMode() function to CENTER and replaced the circle with a square by using the rect() function instead. This change allowed me to create a square shape that scales up and down in a similar manner to the original circle.

1let pY = 0
2
3function setup() {
4  createCanvas(800, 800);
5  colorMode(HSB, TWO_PI, 1, 1)
6}
7
8function draw() {
9  background(0.8);
10  
11  pY = map(sin(millis() * 0.002), -1, 1, 0, height)
12  console.log(pY)
13  let sat = map(sin(millis() * 0.005), -1, 1, 0, 1)
14  fill(5, sat, 0.8)
15  // Set the rect mode to center
16  rectMode(CENTER) 
17  // Draw a square instead of a circle
18  rect(width * 0.5, height*0.5, pY, pY)
19}

Written Code that depicts animation of a purple square scaling up and down.

Incorporating Color Changes in a Specific Order: A Rainbow Effect via HSB Color Wheel

In this modified code, I introduced a loop to draw multiple squares around the center of the canvas, using trigonometric functions to animate their size and color. The pY variable, which oscillates based on a sine function, determines the size of the squares, while the hue is mapped to this value to create a dynamic color effect. Each square is positioned using a transformation matrix that applies translate() to move to the center and rotate() to create an angular offset for each square based on its index. This results in a visually appealing arrangement of rotating squares that change size and color over time.

1let pY = 0;
2let hues = [60 / 360, 120 / 360, 180 / 360, 240 / 360, 300 / 360, 0];
3let numSquares = 12; // Number of squares to draw
4let angleStep;
5
6function setup() {
7  createCanvas(800, 800);
8  colorMode(HSB, 1, 1, 1);
9  // Calculate the angle step based on the number of squares
10  angleStep = TWO_PI / numSquares;
11}
12
13function draw() {
14  background(0.8);
15  
16  // Calculate pY based on a sine wave
17  pY = map(sin(millis() * 0.002), -1, 1, 0, height);
18  
19  // Calculate saturation based on a different sine wave
20  let sat = map(sin(millis() * 0.005), -1, 1, 0, 1);
21  
22  // Loop to draw multiple squares with rotation
23  for (let i = 0; i < numSquares; i++) {
24    // Calculate the angle for the current square
25    let angle = angleStep * i;
26    
27    // Map pY to hues for color
28    let index = floor(map(pY, 0, height, 0, hues.length));
29    let h = hues[index % hues.length];
30
31    // Set fill color
32    fill(h, sat, 0.8);
33    
34    // Save the current transformation matrix
35    push();
36    
37    // Translate to the center of the canvas
38    translate(width / 2, height / 2);
39    
40    // Rotate the square
41    rotate(angle);
42    
43    // Set the rect mode to center and draw the square
44    rectMode(CENTER);
45    rect(0, 0, pY * 0.1, pY * 0.1); // Adjust size if necessary
46    
47    // Restore the previous transformation matrix
48    pop();
49  }
50}
51

The code animates rotating, color-shifting squares based on sine waves and radial symmetry.

An animation depicting Rotating, color-shifting squares based on sine waves and radial symmetry.

Generative Animation: Alien Clock

Let’s make something great together!

Generative Animation: Alien Clock

Let’s make something great together!

Let’s make something great together!