Take Two
Haiku + Code
with a second take
dance with the first – tethered mass
orbiting encores
let take1, take2; //each action
let colorOfAction, gesso; //contrasted with color from canvas
let m;
function setup() {
//placed on the easle of you
createCanvas((m = 0.95 * min(windowWidth, windowHeight)), m);
noStroke();
startBodies(); //everything begins - an intitial state of now
}
function draw() {
//a center is found
let centerX = (take1.x + take2.x) / 2;
let centerY = (take1.y + take2.y) / 2;
//and your focus is placed
translate(width / 2 - centerX, height / 2 - centerY);
//and then painted over time
for (let i = 0; i < 500; i++) {
let x = random(-width / 2, width / 2) + centerX;
let y = random(-height / 2, height / 2) + centerY;
let d1 = dist(x, y, take1.x, take1.y);
let d2 = dist(x, y, take2.x, take2.y);
if (d1 <= take1.m && d2 <= take2.m) {
fill(gesso);
} else if (d1 <= take1.m || d2 <= take2.m) {
fill(colorOfAction);
} else {
fill(gesso);
}
circle(x, y, random(1, 8));
}
//and the state of you changes with each moment in time
updateBodies();
}
function updateBodies() {
let dx = take2.x - take1.x;
let dy = take2.y - take1.y;
let distance = dist(take2.x, take2.y, take1.x, take1.y);
if (distance < 1) return;
let force = (10 * (take1.m * take2.m)) / (distance * distance);
let ux = dx / distance;
let uy = dy / distance;
take1.vx += (force * ux) / take1.m;
take1.vy += (force * uy) / take1.m;
take2.vx -= (force * ux) / take2.m;
take2.vy -= (force * uy) / take2.m;
take1.x += take1.vx;
take1.y += take1.vy;
take2.x += take2.vx;
take2.y += take2.vy;
}
function startBodies() {
colorOfAction = color(
random(140, 205),
random(160, 245),
random(200, 255),
120
);
gesso = color(255, 255, 255, 120);
take1 = { x: -m / 5, y: 0, vx: 0, vy: 0, m: random(20, 80) };
take2 = { x: m / 5, y: 0, vx: 0, vy: 0, m: random(20, 80) };
let r = (2 * m) / 5;
let totalMass = take1.m + take2.m;
let v1 = sqrt((10 * take2.m * take2.m) / (totalMass * r));
let v2 = sqrt((10 * take1.m * take1.m) / (totalMass * r));
let ellipticalFactor = random(0.85, 1.15);
take1.vy = v1 * ellipticalFactor;
take2.vy = -v2 * ellipticalFactor;
let horizontalPerturbation = random(-0.1, 0.1);
take1.vx = horizontalPerturbation;
take2.vx = -horizontalPerturbation;
}
function mousePressed() {
startBodies();
}
This post is a submission to the Indie Web Camp Carnival - "Take Two" for June 2025.
Member discussion