// Shapes — ported from Processing.js by u144707 let l; function setup() { createCanvas(windowWidth, windowHeight); smooth(); l = new Logo(); } function draw() { background(0); l.update(); l.display(); } function mousePressed() { l.transform(); } function touchStarted() { l.transform(); return false; } function windowResized() { resizeCanvas(windowWidth, windowHeight); } // ─── Logo ──────────────────────────────────────────────────────────────────── class Logo { constructor() { this.shapes = []; this.shapes.push(new Stone(color(150, 145, 230))); this.shapes.push(new Square(color(15, 130, 100))); this.shapes.push(new Circle(color(19, 230, 146))); this.shapes.push(new Snail(color(250, 200, 63))); this.shapes.push(new Windmill(color(64, 223, 242))); this.shapes.push(new Star(color(255, 0, 0))); this.shapes.push(new Clover(color(104, 240, 143))); this.shapes.push(new Batman(color(255, 255, 0))); this.shapes.push(new Heart(color(253, 144, 255))); this.currentShape = new Shape(color(0)); this.nextIndex = 0; this.rate = 1; this.lineWeight = 1; } update() { this.transition(this.currentShape, this.shapes[this.nextIndex]); this.beat(); } display() { push(); translate(width / 2, height / 2); // Scale so the 600×600 original fits the mobile canvas let scaleFactor = min(width, height) / 600; scale(this.rate * scaleFactor); strokeWeight(this.lineWeight); stroke(this.currentShape.lineColor); noFill(); for (let p of this.currentShape.points) { point(p.x, p.y); } pop(); } transition(from, to) { while (from.points.length < to.points.length) from.points.push(createVector(0, 0)); while (from.points.length > to.points.length) from.points.splice(0, 1); for (let i = 0; i < from.points.length; i++) { let s1 = from.points[i]; let s2 = to.points[i]; s1.lerp(s2, 0.1); } from.lineColor = lerpColor(from.lineColor, to.lineColor, 0.1); } transform() { this.nextIndex++; this.nextIndex %= this.shapes.length; } beat() { let period = 3000; let intensity = 5; let t = atan(sin((millis() % period) / period * 2 * PI) * intensity) / PI + 0.5; this.lineWeight = sin(PI * t) * 30; this.rate = t + 1; } } // ─── Shape base class ──────────────────────────────────────────────────────── class Shape { constructor(_lineColor) { this.points = []; this.lineColor = _lineColor; } } // ─── Heart ─────────────────────────────────────────────────────────────────── class Heart extends Shape { constructor(_lineColor) { super(_lineColor); let r = 7; let startTheta = random(360); for (let i = 0, theta = startTheta; i < 360; i += 1, theta += 1) { let x = r * (16 * sin(radians(theta)) * sin(radians(theta)) * sin(radians(theta))); let y = r * (13 * cos(radians(theta)) - 5 * cos(radians(2 * theta)) - 2 * cos(radians(3 * theta)) - cos(radians(4 * theta))); this.points.push(createVector(x, -y)); } } } // ─── Batman ────────────────────────────────────────────────────────────────── class Batman extends Shape { constructor(_lineColor) { super(_lineColor); let sz = 20; for (let x = 0; x <= 7; x += 0.01) { let y1 = 0, y2 = -1000; if (x < 0.5) { y1 = this.f1(); y2 = this.f6(x); } else if (x < 0.75) { y1 = this.f2(x); y2 = this.f6(x); } else if (x < 1) { y1 = this.f3(x); y2 = this.f6(x); } else if (x < 3) { y1 = this.f4(x); y2 = this.f6(x); } else if (x < 4) { y1 = this.f5(x); y2 = this.f6(x); } else { y1 = this.f5(x); y2 = -y1; } this.points.push(createVector(x * sz, -y1 * sz)); this.points.push(createVector(-x * sz, -y1 * sz)); this.points.push(createVector(x * sz, -y2 * sz)); this.points.push(createVector(-x * sz, -y2 * sz)); } } f1() { return 2.25; } f2(x) { return 3 * x + 0.75; } f3(x) { return 9 - 8 * x; } f4(x) { let n1 = 6 * sqrt(10) / 7; let n2 = 1.5 - 0.5 * x; let n3 = sqrt(4 - pow(x - 1, 2)); return n1 + n2 - n1 / 2 * n3; } f5(x) { return sqrt(1 - x * x / 49) * 3; } f6(x) { let n1 = (3 * sqrt(33) - 7) / 112; let n2 = sqrt(1 - pow(Math.abs(x - 2) - 1, 2)); return x / 2 - n1 * x * x - 3 + n2; } } // ─── Circle ────────────────────────────────────────────────────────────────── class Circle extends Shape { constructor(_lineColor) { super(_lineColor); let r = 100; for (let i = 0, theta = 0; i < 360; i += 1, theta += 1) { let x = r * cos(radians(theta)); let y = r * sin(radians(theta)); this.points.push(createVector(x, y)); } } } // ─── Square ────────────────────────────────────────────────────────────────── class Square extends Shape { constructor(_lineColor) { super(_lineColor); let r = 100; let startTheta = random(360); for (let i = 0, theta = startTheta; i < 360; i += 1, theta += 1) { let cx = cos(radians(theta)); let cy = sin(radians(theta)); let x = this.sign(cx) * pow(Math.abs(cx), 2) * r; let y = this.sign(cy) * pow(Math.abs(cy), 2) * r; this.points.push(createVector(x, y)); } } sign(x) { return x >= 0 ? 1 : -1; } } // ─── Stone ─────────────────────────────────────────────────────────────────── class Stone extends Shape { constructor(_lineColor) { super(_lineColor); let a = 60, b = 100; let startTheta = random(360); for (let i = 0, theta = startTheta; i < 360; i += 1, theta += 1) { let x = a * cos(radians(theta)); let y = b * sin(radians(theta)); this.points.push(createVector(x, y)); } } } // ─── Star ──────────────────────────────────────────────────────────────────── class Star extends Shape { constructor(_lineColor) { super(_lineColor); let r = 100; let startTheta = random(360); for (let i = 0, theta = startTheta; i < 360; i += 1, theta += 1) { let cx = cos(radians(theta)); let cy = sin(radians(theta)); let x = r * cx * cx * cx; let y = r * cy * cy * cy; this.points.push(createVector(x, y)); } } } // ─── Clover ────────────────────────────────────────────────────────────────── class Clover extends Shape { constructor(_lineColor) { super(_lineColor); let r = 100; let startTheta = random(360); for (let i = 0, theta = startTheta; i < 360; i += 1, theta += 1) { let rad = (r - pow(r, sin(radians(theta * 4)))); let x = rad * cos(radians(theta)); let y = rad * sin(radians(theta)); this.points.push(createVector(x, y)); } } } // ─── Windmill ──────────────────────────────────────────────────────────────── class Windmill extends Shape { constructor(_lineColor) { super(_lineColor); let r = 100; let startTheta = random(360); for (let i = 0, theta = startTheta; i < 360; i += 1, theta += 1) { let x = r * cos(radians(3 * theta)) * cos(radians(theta)); let y = r * cos(radians(3 * theta)) * sin(radians(theta)); this.points.push(createVector(x, y)); } } } // ─── Snail ─────────────────────────────────────────────────────────────────── class Snail extends Shape { constructor(_lineColor) { super(_lineColor); let a = 0.25; for (let i = 0, theta = 0; i < 360 * 3.2; i += 1, theta += 1) { let r = exp(a * radians(theta)); let x = r * cos(radians(theta)); let y = r * sin(radians(theta)); this.points.push(createVector(x, y)); } } }