Wired Magazine Periodical Logo

// P5.JS CODE

const MAX_SAG = 20; // Max sag in pixels
const STROKE_DURATION = 4.0; // "days" for one stroke to go 0 → full sag
const STROKE_OFFSET = 0.7; // Delay between strokes
const ANIM_DURATION = 20; // Seconds for a full loop
let startTime;

function sagForStroke(i, globalDay) {
const startDay = i * STROKE_OFFSET;
const local = (globalDay - startDay) / STROKE_DURATION;
return constrain(local, 0, 1);
}

function drawSagStroke(x1, y1, x2, y2, index, col, globalDay, scaleFactor) {
// Use sinusoidal looping motion
const loopT = (sin((TWO_PI * globalDay) / 60 - HALF_PI) + 1) / 2;
const tSag = sagForStroke(index, loopT * 60);

const anchors = [];
const N = 5;
for (let k = 0; k < N; k++) {
const t = k / (N - 1);
let x = lerp(x1, x2, t);
let y = lerp(y1, y2, t);
anchors.push({ x, y });
}

const sag = MAX_SAG * tSag;
anchors[2].y += sag;
anchors[1].y += sag * 0.4;
anchors[3].y += sag * 0.4;

stroke(col);
strokeWeight(3 * scaleFactor);
noFill();
beginShape();
for (const p of anchors) vertex(p.x * scaleFactor, p.y * scaleFactor);
endShape();
}

function setup() {
createCanvas(windowWidth, windowHeight);
strokeCap(PROJECT);
strokeJoin(MITER);
startTime = millis();
}

function draw() {
background(255); // White background
const elapsedSec = (millis() - startTime) / 1000.0;
const loopTime = elapsedSec % ANIM_DURATION;
const globalDay = map(loopTime, 0, ANIM_DURATION, 0, 60);

const scaleFactor = 1.5; // 50% larger
const centerX = width / 2;
const centerY = height / 2;

push();
translate(centerX - (420 * scaleFactor) / 2, centerY - (80 * scaleFactor) / 2);

let i = 0;


const orange = "#e98400";
drawSagStroke(138, 1.59375, 125, 1.59375, i++, orange, globalDay, scaleFactor);
drawSagStroke(138, 7.5625, 125, 7.5625, i++, orange, globalDay, scaleFactor);
drawSagStroke(138, 47.5938, 125, 47.5938, i++, orange, globalDay, scaleFactor);
drawSagStroke(138, 40.5938, 125, 40.5938, i++, orange, globalDay, scaleFactor);
drawSagStroke(138, 28.5938, 125, 28.5938, i++, orange, globalDay, scaleFactor);
drawSagStroke(138, 35.5938, 125, 35.5938, i++, orange, globalDay, scaleFactor);
drawSagStroke(138, 22.5938, 125, 22.5938, i++, orange, globalDay, scaleFactor);
drawSagStroke(138, 53.5938, 125, 53.5938, i++, orange, globalDay, scaleFactor);
drawSagStroke(301, 1.59375, 252, 1.59375, i++, orange, globalDay, scaleFactor);
drawSagStroke(301, 53.5938, 252, 53.5938, i++, orange, globalDay, scaleFactor);
drawSagStroke(301, 47.625, 252, 47.625, i++, orange, globalDay, scaleFactor);
drawSagStroke(273, 36.5938, 252, 36.5938, i++, orange, globalDay, scaleFactor);
drawSagStroke(273, 41.5938, 252, 41.5938, i++, orange, globalDay, scaleFactor);
drawSagStroke(273, 13.5938, 252, 13.5938, i++, orange, globalDay, scaleFactor);
drawSagStroke(273, 18.5938, 252, 18.5938, i++, orange, globalDay, scaleFactor);
drawSagStroke(294, 24.5938, 252, 24.5938, i++, orange, globalDay, scaleFactor);
drawSagStroke(294, 30.5938, 252, 30.5938, i++, orange, globalDay, scaleFactor);
drawSagStroke(301, 7.625, 252, 7.625, i++, orange, globalDay, scaleFactor);

const black = "#000000";
drawSagStroke(374, 44.625, 331, 44.625, i++, black, globalDay, scaleFactor);
drawSagStroke(367, 53.625, 331, 53.625, i++, black, globalDay, scaleFactor);
drawSagStroke(367, 1.625, 331, 1.625, i++, black, globalDay, scaleFactor);
drawSagStroke(379, 36.625, 331, 36.625, i++, black, globalDay, scaleFactor);
drawSagStroke(374, 10.625, 331, 10.625, i++, black, globalDay, scaleFactor);
drawSagStroke(379, 18.625, 331, 18.625, i++, black, globalDay, scaleFactor);
drawSagStroke(382, 27.625, 331, 27.625, i++, black, globalDay, scaleFactor);
drawSagStroke(214, 1.625, 168, 1.625, i++, black, globalDay, scaleFactor);
drawSagStroke(219, 22.625, 168, 22.625, i++, black, globalDay, scaleFactor);
drawSagStroke(214, 29.625, 168, 29.625, i++, black, globalDay, scaleFactor);
drawSagStroke(222, 15.625, 168, 15.625, i++, black, globalDay, scaleFactor);
drawSagStroke(219, 8.625, 168, 8.625, i++, black, globalDay, scaleFactor);
drawSagStroke(219, 53.625, 206, 53.625, i++, black, globalDay, scaleFactor);
drawSagStroke(214, 45.6917, 201, 45.6917, i++, black, globalDay, scaleFactor);
drawSagStroke(209, 36.625, 196, 36.625, i++, black, globalDay, scaleFactor);
drawSagStroke(181, 45.6917, 168, 45.6917, i++, black, globalDay, scaleFactor);
drawSagStroke(181, 36.625, 168, 36.625, i++, black, globalDay, scaleFactor);
drawSagStroke(181, 53.625, 168, 53.625, i++, black, globalDay, scaleFactor);
drawSagStroke(0, 1.5, 22, 1.5, i++, black, globalDay, scaleFactor);
drawSagStroke(95, 1.5, 73, 1.5, i++, black, globalDay, scaleFactor);
drawSagStroke(37, 1.5, 58, 1.5, i++, black, globalDay, scaleFactor);
drawSagStroke(2, 14.5, 25, 14.5, i++, black, globalDay, scaleFactor);
drawSagStroke(93, 14.5, 70, 14.5, i++, black, globalDay, scaleFactor);
drawSagStroke(5, 27.5, 27, 27.5, i++, black, globalDay, scaleFactor);
drawSagStroke(90, 27.5, 68, 27.5, i++, black, globalDay, scaleFactor);
drawSagStroke(34, 14.5, 46, 14.5, i++, black, globalDay, scaleFactor);
drawSagStroke(32, 27.5, 42, 27.5, i++, black, globalDay, scaleFactor);
drawSagStroke(61, 14.5, 49, 14.5, i++, black, globalDay, scaleFactor);
drawSagStroke(63, 27.5, 53, 27.5, i++, black, globalDay, scaleFactor);
drawSagStroke(8, 40.5, 39, 40.5, i++, black, globalDay, scaleFactor);
drawSagStroke(87, 40.5, 56, 40.5, i++, black, globalDay, scaleFactor);
drawSagStroke(12, 53.5, 35, 53.5, i++, black, globalDay, scaleFactor);
drawSagStroke(83, 53.5, 60, 53.5, i++, black, globalDay, scaleFactor);

pop();
}

function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}