Generative Animation: A Clock for Aliens
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)
Ideation
When I was told that we were designing a clock for aliens, my brain stopped working. I don’t even like aliens, they scare me, and I don’t want to know what they look like or what they want.
But here I am, designing a clock for aliens.
Since the brief says that we can’t use time tied to the rotation of the earth, first I was thinking about just trying not to see time connected to numbers as much as possible - it should be something just passing no matter what until we all die at the end.
First Phase
Here are some of the ideation sketches that I designed during the workshop:
Initially, my first ideas were basically like this:
There is no sense of time that they can describe with numbers, but they do know that time is passing
it can be something that starts with a big chunk of something (any shape can work)
as they live and approach to death, smaller chunk will fall apart from the big one
big one gets shrink as they produce small chunks
when the big one has no longer has any left to produce small chunks, it disappear - a.k.a. death.
Still, there is no sense of time, but for this idea the big chunk will be called lifeMama, and small chunks will be called lifeEvents that is coming from interaction with people. Once the canvas has X amounts of lifeEvents, lifeMama explodes - again, a.k.a. death. Then it starts getting bigger again, meaning they are in next life.
depending on the type of interaction, the size of lifeEvents changes
bad interaction = larger chunks will be falling apart because this kind of interaction will stress out the aliens
good interaction = smaller chunks will be falling apart because aliens are happy (even though they are still approaching to death)
when lifeMama is getting smaller, the color changes to darker shade because lifeMama is sad that it’s getting closer to die
when lifeMama is getting bigger (after reborn), the color changes to lighter share because lifeMama is excited to have another life
After the first phase at the workshop, I designed this:
As you can see, the small chunks kept being produced and it was visually and mentally hurting me. Although I like the idea of lifeEvents and lifeMama, I decided not to go for this. Instead, I wanted to design something more unique, visually pleasing, and alien-friendly.
Second Phase
After I failed at my first idea, I did additional research to get more inspiration. Then I found this cool design on OpenProcessing.
In this design, it starts from one circle and then revolves into multiple circles until it gets back to the previous shape. Once it finally ends one round of revolving, it still keeps going and start new round which I found very interesting.
This design reminded me of circle of life, so I started thinking how I could implement this design to this project. At this point, there were a couple things in my mind that I wanted to going for:
Revolving Circles: this is going to show circle of life, starting from when it’s born to death, and reborn
Pulsing Circles: this would be translated as a power of life, representing life itself (even though I don’t know if aliens even have a heart to pulse)
Obstacle: this is going to be something that would interfere our life, a.k.a. an outlander
To create a pulsing circles, I designed this by using loop:
Final Design
After the research and designing on the second phase, I basically combined the code for Revolving Circles and Pulsing Circles, make some adjustment for both to make it look blended and natural. Last but not least, I added a polygon rotating to the opposite way in the center of the canvas to express the “outlander.”
Here’s the video of the final design:
Takeaway
Although I’m not a big fan of aliens, I ended up having fun seeking for ideas for their time system. I can’t say I’m 100% satisfied just because there are some lines that I still don’t fully understand how it’s even working. I’m usually a type of person who’s convinced that “if it works, it works,” but this project really challenge me to actually figure everything out until I finally burn my brain off.
Code
Here’ s my final code, or you can check it at my OpenProcessing page!
//uwu
//Revolving circles were based on Atsushi Tadokoro's Circle Motion 04
//https://openprocessing.org/sketch/1964091
int numRings = 8; // Number of concentric rings
float[] ringSpeeds = new float[numRings]; // Speed of rotation for each ring
color[] ringColors = new color[numRings]; // Colors for each ring
float[] ringRadii; // Radii for each ring
float[] ringPulseSpeeds = new float[numRings]; // Speed of pulsation for each ring
float[] ringBaseRadii; // Base radii for each ring
int numCircles = 16; // Number of revolving circles
PVector[] circlePos = new PVector[numCircles]; // Circle positions
float radius; // Orbit radius
float velocity; // Angular velocity
color bgColor; // Background color
float polyRadius; // Radius of the rotating polygon
int polySides = 7; // Number of polygon sides
float polyRotationSpeed = -radians(1); // Opposite direction rotation
float polyRotationAngle = 0; // Current angle of polygon rotation
void setup() {
size(800, 800);
noFill();
// Initialize ring speeds, colors, radii, and pulsation speeds
for (int i = 0; i < numRings; i++) {
ringSpeeds[i] = random(0.01, 0.1); // Random rotation speeds
ringColors[i] = color(random(255), random(255), random(255)); // Random colors
ringPulseSpeeds[i] = random(0.01, 0.1); // Random pulsation speeds
}
ringRadii = new float[numRings];
ringBaseRadii = new float[numRings];
float spacing = 30; // Spacing between rings
float startRadius = 50; // Starting radius
for (int i = 0; i < numRings; i++) {
ringBaseRadii[i] = startRadius + i * spacing;
ringRadii[i] = ringBaseRadii[i];
}
strokeWeight(1.5); // Set the stroke weight for all rings
// Initialize circle positions
radius = height / 4.0;
velocity = 2.0;
for (int i = 0; i < numCircles; i++) {
circlePos[i] = new PVector(0, 0);
}
// Set solid background color
bgColor = color(5, 28, 52);
// Initialize polygon parameters
polyRadius = 100;
}
void draw() {
background(bgColor); // Set the background color
translate(width / 2, height / 2);
// Draw the rotating polygon
pushMatrix();
translate(0, 0);
rotate(polyRotationAngle);
stroke(10, 102, 198); // Polygon color
beginShape();
for (int i = 0; i < polySides; i++) {
float x = cos(radians(i * 360 / polySides)) * polyRadius;
float y = sin(radians(i * 360 / polySides)) * polyRadius;
vertex(x, y);
}
endShape(CLOSE);
popMatrix();
// Update polygon rotation angle
polyRotationAngle += polyRotationSpeed;
// Draw the concentric rings with pulsation
for (int i = 0; i < numRings; i++) {
float rotationAngle = radians(frameCount * ringSpeeds[i]);
pushMatrix();
rotate(rotationAngle);
stroke(ringColors[i]);
// Calculate the pulsating radius
ringRadii[i] = ringBaseRadii[i] + sin(frameCount * ringPulseSpeeds[i]) * 20.0; // Adjust pulsation factor as needed
float ringRadius = ringRadii[i];
ellipse(0, 0, ringRadius * 2, ringRadius * 2);
popMatrix();
}
// Update ring colors gradually
for (int i = 0; i < numRings; i++) {
ringColors[i] = lerpColor(ringColors[i], color(random(255), random(255), random(255)), 0.005);
}
// Draw the revolving circles
for (int i = 0; i < numCircles; i++) {
float curRadius = map(i, 0, numCircles - 1, width / 100.0, width / 4.0);
float curVel = velocity / numCircles * (i + 1);
PVector curPos = circlePos[i];
curPos.x = cos(radians(frameCount) * curVel) * radius;
curPos.y = sin(radians(frameCount) * curVel) * radius;
ellipse(curPos.x, curPos.y, curRadius * 2, curRadius * 2);
}
}
