Tangible Interaction Project 1: Generative Animation

Project Brief/Introduction

We were tasked with a coding project in our Tangible Interaction class during a workshop session that was unique and challenging.

This was the design 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)

You will showcase your work at the end of the workshop and submit your Processing sketch and the URL to the documentation the week after. The documentation should be focused on the creative and problem-solving process, so take pictures and videos as you work, and include code snippets for illustration.

Ideation

I started thinking about how to think of a new concept of time. This was really challenging because it requires me to think outside of my comfort zone, and challenged the way I think of time. I started with sketches and how that might work, because I like to sketch ideas and then see how that would work.

There was a couple of sketches and I ended up presenting my idea to the class, which was a bucket filled with a magic fluid that goes in one direction. This idea got scrapped because it doesn't make sense and so I went back to the drawing board.

I took a break from the class and went to my car to grab water and rest there with quiet alone time. I thought of concepts that my professor told me to think about which was: 1.Weak 2. Strong 3. Electromagnetic 4.Gravity.

I had no idea what Weak and Strong forces and running out of time, so I went to think about electromagnetic and how that can translate to time. I was looking at a light bulb and thought of batteries. I looked at my phone and thought: wait, this could work! I tried thinking of how to measure time with that. I thought of the time it takes to charge the phone and time it takes to deplete the battery. I presented this idea back to my professor and got approved.

Designing and Sketching

Once the idea was approved, I started thinking of ways to visualize it. I started sketching on my notebook and wanted to have a rectangular battery for the clock, and I wanted to rectangle to expand up when its charging, and slowly contracting back to a line when its losing its energy.

Implementation Process

After solidifying the battery concept, the next step was to translate the idea into a visual form using code. This required me to start with a basic understanding of how time could be visualized through the battery concept.

I wanted to create an animation where the battery would charge from 0% to 100% and then discharge back to 0%, creating a seamless cycle. The idea was to show the passage of time through the filling and depleting of the battery in a continuous loop. In the sketching process, I decided on a rectangular battery that grows upwards as it charges and shrinks back down when it discharges.

Code for single battery bar

let charge = 0; // Tracks the current charge level

function setup() {
createCanvas(400, 400); // Canvas size 400x400
}

function draw() {
background(0); // Black background

// Battery height determined by charge level, from 0 to 100
let batteryHeight = map(sin(charge), -1, 1, 0, 100); // Map the charge to the height of the battery

noStroke();
fill(255); // White fill for the battery

// Draw the battery at the center of the canvas, with the bottom fixed at y = 300
rect(width / 2 - 10, 300 - batteryHeight, 20, batteryHeight); // The bottom stays at y=300, only the top grows

// Update the charge level continuously, simulating charging and discharging
charge += 0.02;
}

Moving to Multiple Battery Bars

Once I had the single battery bar functioning as expected, I realized that it wasn't just enough to display a single charging and discharging cycle. I wanted to represent the concept of a cyclical alien clock using multiple batteries that would rotate like the hands of a clock. Each battery would charge and discharge in sync, while the entire system would rotate as a group, creating a visual rhythm that signified the passage of time in this alien world.

The next step was to take the single battery bar and replicate it six times in a circular pattern, much like the numbers on a traditional clock. Instead of placing these batteries statically, I wanted them to rotate around the center of the canvas as they filled and emptied. This would simulate the clockwork-like movement, where each battery represents a "unit" of time in this alien clock system.

Code for six batteries

let charge = 0; // Tracks the current charge level
let angle = 0; // Tracks the rotation angle

function setup() {
createCanvas(400, 400); // Canvas size 400x400
}

function draw() {
background(0); // Black background

translate(width / 2, height / 2); // Move origin to center

for (let i = 0; i < 6; i++) {
push(); // Save the current state of the canvas

rotate(angle + i * PI / 3); // Rotate the entire shape (60 degrees between each battery)

let batteryHeight = map(sin(charge), -1, 1, 20, 100); // Map charge to battery height

fill(255); // White fill for the battery
rect(-10, -batteryHeight / 2 - 50, 20, batteryHeight); // Draw battery centered on the screen

pop(); // Restore the canvas state
}

// Only rotate when the battery is fully charged (sin(charge) is close to 1)
if (sin(charge) > 0.99) {
angle += 0.1; // Rotate more when fully charged
}

charge += 0.02; // Charge moves smoothly up and down
}

Initial Sketch

I liked the visual effect of all the battery bars moving up and down in unison, which provided a sense of unison. However, there were a few aspects I didn't like.

There was an unwanted stroke around the battery bars, which I removed later by using noStroke().

The bottom part of the battery was also moving, which wasn't what I wanted. I only wanted the top of the bars to move while the bottom remained static, much like the charging bar on smartphones.

In the next iteration, I made these adjustments to fix these issues and improve the overall design.

Final Implementation

In the final version of my alien clock, I adjusted the design to create a series of battery bars that rotate around the center of the canvas. Each bar fills and empties in a continuous cycle, mimicking the charging and depleting of a battery. I also ensured that the bottom of each bar remained static, with the top part dynamically growing and shrinking, representing the passage of "alien time."

Final Code

let charges = [];
let angle = 0;

function setup() {
createCanvas(400, 400);
for (let i = 0; i < 6; i++) {
charges[i] = 0; // Beginning charge for each battery
}
}

function draw() {
background(0);
translate(width / 2, height / 2); // Move the origin to the center of the canvas

for (let i = 0; i < 6; i++) {
push();
rotate(angle + i * PI / 3); // Rotate each battery around the center

let batteryHeight = map(sin(charges[i]), -1, 1, 0, 100); // Map the charge to the height of the battery

noStroke();
fill(255);

// Draw the battery with the bottom fixed at 0, filling upwards
rect(-10, 20, 20, batteryHeight); // The bottom is fixed at y = 50, only the top grows

pop();

charges[i] += 0.0095; // Update charge for each battery
}

// Rotate the batteries only when the first battery is fully charged
if (sin(charges[0]) > 0.99) {
angle += 0.04;
}
}

Reflection

This project pushed me to think creatively about time beyond conventional units like seconds or minutes. By using the concept of a battery that charges and depletes in cycles, I was able to represent time in a way that felt alien but intuitive. Initially, I faced challenges visualizing the concept, but I gradually developed a system of rotating battery bars that fill and empty over time. Using arrays, loops, and trigonometric functions helped me manage the dynamic elements and create a smooth animation. Through this process, I gained confidence in breaking down complex tasks and translating abstract ideas into code, which made me feel more capable as a programmer.

You may also like