Coding Workshop: p5.JS Processing Sketch

Within a 1-hour coding workshop, I was tasked to think about how aliens would use a clock without any real metrics of time. (like minutes or hours) From getting confused to creating a story this is my documentation throughout this project.

Visual Inspiration

I found my visual inspiration from Cosmos.so. I liked this image's colors and blocky repetitive style therefore, I incorporated it within my code. I also used resources like Chat GPT and p5.JS reference page to help me code this quickly while making sure everything worked the way I envisioned.

p5.JS Processing Sketch Final

My concept is that in this alien world, there is no sense of time, day or night, they tell time off their bodies. These aliens look similar to reptiles, meaning their skin sheds, which to them represents a day has passed. In this p5.JS Sketch see how I interpreted an alien clock in these circumstances.

Code:

let loadingBarWidth = 400; // Canvas width

let loadingBarHeight = 50; // Loading bar height

let blockCount = 20; // Number of blocks for the loading bar

let progress = 0; // Progress percentage (from 0 to 1)

let speed = 0.01; // Speed of loading progress

function setup() {

createCanvas(loadingBarWidth, loadingBarHeight);

noStroke();

}

function draw() {

background(240);

// Update progress

progress += speed;

// Reset progress when the bar is full

if (progress > 1) {

progress = 0;

}

// Draw the loading bar with progress

drawLoadingBar(0, 0, progress);

// Draw the blocky vertical line in the middle

drawBlockyLine(width / 2, 0, loadingBarHeight);

}

function drawLoadingBar(x, y, progress) {

// Loop through blocks to fill the loading bar progressively

for (let i = 0; i < blockCount; i++) {

let blockWidth = loadingBarWidth / blockCount; // Width of each block

let blockHeight = random(30, loadingBarHeight); // Random height for blocky effect

let blockX = x + i * blockWidth;

// Only draw blocks up to the current progress

if (blockX < progress * loadingBarWidth) {

// Gradient color effect for each block

let blockColor = lerpColor(color(0, 0, 255), color(200, 100, 255), i / blockCount);

fill(blockColor);

// Draw the blocky segments within the loading bar

rect(blockX, y + (loadingBarHeight - blockHeight) / 2, blockWidth, blockHeight);

}

function drawBlockyLine(x, y, totalHeight) {

let numBlocks = 6; // Number of blocks in the vertical line

let blockWidth = 10; // Thickness of the vertical blocks

let blockHeight = totalHeight / numBlocks; // Height of each block

for (let i = 0; i < numBlocks; i++) {

let randomHeight = random(blockHeight * 0.5, blockHeight * 1.5); // Randomize block height

fill(random(50, 150), random(100, 255), random(150, 255)); // Random block color

rect(x - blockWidth / 2, y + i * blockHeight, blockWidth, randomHeight);

}

p5.JS Processing Sketch

In this alien world with no sense of time, day or night, they tell time off their bodies. These aliens look similar to reptiles, meaning their skin sheds, which to them represents a day has passed. In this p5.JS Sketch see how I interpreted an alien clock in these circumstances.