p5.disableFriendlyErrors = true; function getAssetUrl(name) { if (typeof fil !== 'undefined' && typeof fil.url === 'function') { return fil.url(name); } return 'assets/' + name; } let capture; let cnv; let overlay; let retroFont; let bodyPixModel; let segmentation; let characters = []; let characterIndex = 0; let bgColor = [71, 102, 98]; let cycleCount = 0; let options = { runtime: "mediapipe", maskType: "parts", mobileNetMultiplier: 0.25, outputStride: 16 }; function preload() { try { bodyPixModel = ml5.bodySegmentation("BodyPix", options); } catch (e) { console.warn("ml5 bodySegmentation init warning:", e); } retroFont = loadFont(getAssetUrl("PressStart2P-Regular.ttf")); overlay = loadImage(getAssetUrl("old_tv.jpg")); } function setup() { cnv = createCanvas(windowWidth, windowHeight); if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { try { capture = createCapture(VIDEO, () => { if (capture) capture.hide(); }); if (capture && bodyPixModel) { bodyPixModel.detectStart(capture, (result) => { segmentation = result; }); } } catch (err) { console.log("Webcam not available, using interactive synthetic posture", err); } } characters = [new Ghost(), new Wave(), new Cacoon()]; frameRate(30); } function windowResized() { resizeCanvas(windowWidth, windowHeight); } function mousePressed() { // Cycle between the 3 modes (Ghost, Wave, Cacoon) characterIndex = (characterIndex + 1) % 3; } function touchStarted() { mousePressed(); return false; } function getSyntheticSegmentation() { const w = 120; const h = 150; const arr = new Array(w * h).fill(24); const t = millis() * 0.002; const mX = (mouseX > 0 && mouseX < width) ? map(mouseX, 0, width, 30, 90) : 60 + Math.sin(t) * 20; const mY = (mouseY > 0 && mouseY < height) ? map(mouseY, 0, height, 30, 120) : 75 + Math.cos(t * 1.3) * 15; const headCX = mX; const headCY = Math.max(22, mY - 38); const headR = 18; const bodyCX = mX; const bodyCY = mY + 15; const bodyRx = 28 + Math.sin(t * 2) * 4; const bodyRy = 42; for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { const idx = y * w + x; const headDist = Math.hypot(x - headCX, y - headCY); if (headDist < headR) { arr[idx] = 0; // head continue; } const dx = (x - bodyCX) / bodyRx; const dy = (y - bodyCY) / bodyRy; if (dx * dx + dy * dy <= 1) { arr[idx] = 12; // body part } } } return { data: arr, width: w, height: h }; } function draw() { if (frameCount % 2 === 0) { cycleCount = Math.floor(frameCount / 2); const activeSeg = (segmentation && segmentation.data && segmentation.data.length > 0) ? { data: segmentation.data, width: capture.width || 640, height: capture.height || 480 } : getSyntheticSegmentation(); blendMode(BLEND); let bgState = noise(cycleCount / 10); if (bgState > 0.3) { background(...bgColor, 150); } else if (bgState < 0.05) { background(255); } bgColor = [71, 102, 98]; // Responsive grid background push(); stroke(10, 10, 10); strokeWeight(1); const gridStep = 40; for (let i = 0; i <= height; i += gridStep) { line(0, i, width, i); } for (let i = 0; i <= width; i += gridStep) { line(i, 0, i, height); } pop(); const character = characters[characterIndex % characters.length]; if (activeSeg) { push(); translate(width, 0); scale(-1, 1); character.display(activeSeg); pop(); push(); if (retroFont) textFont(retroFont); textSize(10); fill(255); textAlign(CENTER); text("TAP TO SWITCH MODES (" + (characterIndex + 1) + "/3)", width / 2, height - 25); pop(); } // CRT Overlay if (overlay) { blendMode(OVERLAY); imageMode(CENTER); image(overlay, width / 2, height / 2, width + 20, height + 20); } if (noise(cycleCount / 5) < 0.08) { filter(INVERT); } } } function getCoordinates(segmentationArray, segWidth, segHeight) { let edgeCoordinates = []; let bodyCoordinates = []; let headXCoordinates = []; let headYCoordinates = []; for (let i = 1; i < segmentationArray.length; i++) { let currentValue = segmentationArray[i]; let prevValue = segmentationArray[i - 1]; let rawX = i % segWidth; let rawY = Math.floor(i / segWidth); let x = map(rawX, 0, segWidth, 0, width); let y = map(rawY, 0, segHeight, 0, height); if (currentValue !== 24) { bodyCoordinates.push(createVector(x, y)); } if ((currentValue !== 24 && prevValue === 24) || (currentValue === 24 && prevValue !== 24)) { edgeCoordinates.push(createVector(x, y)); } if (currentValue === 0 || currentValue === 1) { headXCoordinates.push(x); headYCoordinates.push(y); } } if (headXCoordinates.length === 0) { headXCoordinates = [width * 0.4, width * 0.6]; headYCoordinates = [height * 0.2, height * 0.35]; } return { body: bodyCoordinates, edge: edgeCoordinates, headX: headXCoordinates, headY: headYCoordinates }; } function sampleCirclePoints(centerX, centerY, radius, n) { let points = []; let angleStep = TWO_PI / n; for (let i = 0; i < n; i++) { let angle = i * angleStep; let x = centerX + radius * cos(angle); let y = centerY + radius * sin(angle); points.push([x, y]); } return points; } function drawEyes(coordinates, colorArray) { fill(...colorArray, 240); noStroke(); let minX = Math.min(...coordinates.headX); let maxX = Math.max(...coordinates.headX); let minY = Math.min(...coordinates.headY); let maxY = Math.max(...coordinates.headY); let eyeLeftX = lerp(minX, maxX, 0.3); let eyeRightX = lerp(minX, maxX, 0.7); let eyeY = lerp(minY, maxY, 0.35); let eyeSize = max(16, (maxX - minX) * 0.35); let eyeLeftCords = sampleCirclePoints(eyeLeftX, eyeY, eyeSize / 2, 40); let eyeRightCords = sampleCirclePoints(eyeRightX, eyeY, eyeSize / 2, 40); for (let eye of [eyeLeftCords, eyeRightCords]) { beginShape(); for (let p of eye) { let blinkY = (p[1] < eyeY) ? lerp(p[1], eyeY + (eyeY - p[1]), max(0, sin(cycleCount / 5) * 4 - 3)) : p[1]; curveVertex(p[0], blinkY); } endShape(CLOSE); } } class Ghost { constructor() { this.foregroundColor = 0; this.backgroundColor = 220; } isPointConnected(point, lastPoint, bodySize) { const baseProximity = 140; const scaledProximity = baseProximity * (bodySize / 100); const dx = point.x - lastPoint.x; const dy = point.y - lastPoint.y; return (dx * dx + dy * dy) < (scaledProximity * scaledProximity); } display(seg) { let coordinates = getCoordinates(seg.data, seg.width, seg.height); let bodySize = Math.max(...coordinates.headX) - Math.min(...coordinates.headX); let density = Math.min(0.85, map(bodySize, 0, width, 0.45, 0.85)); noFill(); stroke(this.foregroundColor); // Multi-pass dense sketch lines const passes = 3; for (let pass = 0; pass < passes; pass++) { strokeWeight(random(0.4, 2.5)); let lastVertex = null; beginShape(); const step = max(1, Math.floor(coordinates.edge.length / 220)); for (let i = pass; i < coordinates.edge.length; i += step) { if (Math.random() < density) { let edgePoint = coordinates.edge[i]; let offX = edgePoint.x + random(-2.5, 2.5); let offY = edgePoint.y + random(-2.5, 2.5); let pt = createVector(offX, offY); if (lastVertex === null || this.isPointConnected(pt, lastVertex, bodySize)) { curveVertex(pt.x, pt.y); lastVertex = pt; } } if (Math.random() < density * 0.7 && coordinates.body.length > 0) { let pixelIndex = round(random(0, coordinates.body.length - 1)); let bodyPoint = coordinates.body[pixelIndex]; let offPt = createVector(bodyPoint.x + random(-3, 3), bodyPoint.y + random(-3, 3)); if (lastVertex === null || this.isPointConnected(offPt, lastVertex, bodySize)) { curveVertex(offPt.x, offPt.y); lastVertex = offPt; } } } endShape(); } drawEyes(coordinates, bgColor); } } class Wave { constructor() { this.backgroundColor = 220; this.foregroundColor = 0; } display(seg) { let coordinates = getCoordinates(seg.data, seg.width, seg.height); let minX = Math.min(...coordinates.headX); let maxX = Math.max(...coordinates.headX); let threshold = lerp(minX, maxX, 0.5); let LeftPoints = coordinates.edge.filter((vector) => vector.x < threshold); let RightPoints = coordinates.edge.filter((vector) => vector.x >= threshold); noFill(); for (let pointGroup of [LeftPoints, RightPoints]) { if (pointGroup.length === 0) continue; const step = max(2, Math.floor(pointGroup.length / 55)); for (let scaler = 0.1; scaler <= 2.1; scaler += 0.15) { beginShape(); for (let i = 0; i < pointGroup.length; i += step) { let x = pointGroup[i].x + 10 * sin((i + cycleCount) / 3); x = lerp(threshold, x, scaler); stroke(0, 0, 0, (255 / 2) * (2.1 - scaler)); strokeWeight(max(0.5, (2.1 - scaler) * 1.8)); curveVertex(x + random(-3, 3), pointGroup[i].y + random(-1, 1)); } endShape(); } } drawEyes(coordinates, bgColor); } } class Cacoon { constructor() { this.backgroundColor = 220; this.foregroundColor = 0; } display(seg) { let coordinates = getCoordinates(seg.data, seg.width, seg.height); let minX = Math.min(...coordinates.headX); let maxX = Math.max(...coordinates.headX); let minY = Math.min(...coordinates.headY); let maxY = Math.max(...coordinates.headY); let coreX = lerp(minX, maxX, 0.5); let coreY = lerp(minY, maxY, 0.5); let coreSize = max(30, (maxX - minX) * 0.7); fill(0, 0, 0, 85); noStroke(); ellipse(coreX, coreY, coreSize, coreSize); noFill(); stroke(0); let coorDict = {}; for (let p of coordinates.edge) { let roundedY = Math.round(p.y / 4) * 4; if (!coorDict[roundedY]) coorDict[roundedY] = []; coorDict[roundedY].push(p.x); } let yKeys = Object.keys(coorDict).sort((a, b) => Number(a) - Number(b)); // Multi-pass dense cocoon lines for (let pass = 0; pass < 3; pass++) { strokeWeight(random(1, 3)); let t = pass * (PI / 6); beginShape(); for (let i = 0; i < yKeys.length; i += 1) { let xs = coorDict[yKeys[i]]; let a = (xs.length > 1) ? (Math.max(...xs) - Math.min(...xs)) / 1.4 : 20; let randomWidth = a * random(0.65, 1.35); let yVal = Number(yKeys[i]); curveVertex(coreX + randomWidth * cos(t), yVal + random(-2, 2)); t += PI / 6; } endShape(); } drawEyes(coordinates, bgColor); } }