// ── Easing functions ───────────────────────────────────────────────────────── function easeInSine(x) { return 1 - Math.cos((x * Math.PI) / 2); } function easeOutSine(x) { return Math.sin((x * Math.PI) / 2); } function easeInQuad(x) { return x * x; } function easeOutQuad(x) { return 1 - (1 - x) * (1 - x); } function easeInCubic(x) { return x * x * x; } function easeOutCubic(x) { return 1 - Math.pow(1 - x, 3); } function easeInQuart(x) { return x * x * x * x; } function easeOutQuart(x) { return 1 - Math.pow(1 - x, 4); } function easeInQuint(x) { return x * x * x * x * x; } function easeOutQuint(x) { return 1 - Math.pow(1 - x, 5); } function easeInExpo(x) { return x === 0 ? 0 : Math.pow(2, 10 * x - 10); } function easeOutExpo(x) { return x === 1 ? 1 : 1 - Math.pow(2, -10 * x); } function easeInCirc(x) { return 1 - Math.sqrt(1 - Math.pow(x, 2)); } function easeOutCirc(x) { return Math.sqrt(1 - Math.pow(x - 1, 2)); } function easeInBack(x) { const c1 = 1.70158, c3 = c1 + 1; return c3 * x * x * x - c1 * x * x; } function easeOutBack(x) { const c1 = 1.70158, c3 = c1 + 1; return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2); } function easeOutBounce(x) { const n1 = 7.5625, d1 = 2.75; if (x < 1 / d1) return n1 * x * x; else if (x < 2 / d1) return n1 * (x -= 1.5 / d1) * x + 0.75; else if (x < 2.5 / d1) return n1 * (x -= 2.25 / d1) * x + 0.9375; else return n1 * (x -= 2.625 / d1) * x + 0.984375; } function easeInBounce(x) { return 1 - easeOutBounce(1 - x); } function easeOutElastic(x) { const c4 = (2 * Math.PI) / 3; return x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1; } function easeInElastic(x) { const c4 = (2 * Math.PI) / 3; return x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4); } var curveSets = [ { inCurve: easeInSine, outCurve: easeOutSine }, { inCurve: easeInQuad, outCurve: easeOutQuad }, { inCurve: easeInCubic, outCurve: easeOutCubic }, { inCurve: easeInQuart, outCurve: easeOutQuart }, { inCurve: easeInQuint, outCurve: easeOutQuint }, { inCurve: easeInExpo, outCurve: easeOutExpo }, { inCurve: easeInCirc, outCurve: easeOutCirc }, { inCurve: easeInBack, outCurve: easeOutBack }, { inCurve: easeInBounce, outCurve: easeOutBounce }, { inCurve: easeInElastic, outCurve: easeOutElastic }, ]; // ── Helpers ─────────────────────────────────────────────────────────────────── function processHue(_hue) { return (_hue % 360 + 360) % 360; } function NYLerpHue(_hueA, _hueB, _t) { var hueA = _hueA, hueB = _hueB; var hueDiff = Math.abs(hueB - hueA); if (Math.abs((hueB - 360) - hueA) < hueDiff) hueB -= 360; else if (Math.abs((hueB + 360) - hueA) < hueDiff) hueB += 360; else return _hueA + (_hueB - _hueA) * _t; var resultHue = hueA + (hueB - hueA) * _t; if (resultHue < 0) resultHue += 360; if (resultHue > 360) resultHue -= 360; return resultHue; } function NYLerpColor(_colorA, _colorB, _t) { return new NYColor( NYLerpHue(_colorA.h, _colorB.h, _t), _colorA.s + (_colorB.s - _colorA.s) * _t, _colorA.b + (_colorB.b - _colorA.b) * _t, _colorA.a + (_colorB.a - _colorA.a) * _t ); } function getAngle(_x1, _y1, _x2, _y2) { return Math.atan2(_y2 - _y1, _x2 - _x1) * 180 / Math.PI + 90; } function inverseLerp(_a, _b, _v) { return (_v - _a) / (_b - _a); } // ── NYColor ─────────────────────────────────────────────────────────────────── function NYColor(_h, _s, _b, _a) { this.h = _h; this.s = _s; this.b = _b; this.a = (_a === undefined) ? 1.0 : _a; } // ── NYNoiseSet ──────────────────────────────────────────────────────────────── function NYNoiseSet(_scaleX, _scaleY, _scaleZ) { this.startX = random(-100000, 100000); this.startY = random(-100000, 100000); this.startZ = random(-100000, 100000); this.scaleX = _scaleX || 0.01; this.scaleY = _scaleY || 0.01; this.scaleZ = _scaleZ || 0.01; } NYNoiseSet.prototype.noise = function(_x, _y, _z) { _x = _x || 0; _y = _y || 0; _z = _z || 0; return noise(this.scaleX * _x + this.startX, this.scaleY * _y + this.startY, this.scaleZ * _z + this.startZ); }; // ── NYFlowPoint ─────────────────────────────────────────────────────────────── function NYFlowPoint(_x, _y, _width, _dir) { this.x = _x; this.y = _y; this.width = _width; this.dir = _dir; var lx = _x + sin(radians(_dir - 90)) * _width * 0.5; var ly = _y + -cos(radians(_dir - 90)) * _width * 0.5; var rx = _x + sin(radians(_dir + 90)) * _width * 0.5; var ry = _y + -cos(radians(_dir + 90)) * _width * 0.5; this.leftPoint = { x: lx, y: ly }; this.rightPoint = { x: rx, y: ry }; } // ── Ribbon ──────────────────────────────────────────────────────────────────── function Ribbon(_startX, _startY, _startWidth, _startDir, _startSpeed) { this.points = []; this.points.push(new NYFlowPoint(_startX, _startY, _startWidth, _startDir)); this.x = _startX; this.y = _startY; this.nowDir = _startDir; this.startLife = random(2.0, 4.0); this.life = this.startLife; this.startIndex = 0; this.endIndex = 0; if (isBlack) { var briA = random(0, 80), briB = random(0, 80); if (random() < 0.4) briA = 0; if (random() < 0.4) briB = 0; this.colorA = new NYColor(0, 0, briA); this.colorB = new NYColor(0, 0, briB); } else { var newHueA = processHue(mainHue + random(-hueRange, hueRange)); var newHueB = processHue(mainHue + random(-hueRange, hueRange)); var colorRandom = random(0, 1); if (colorRandom < 0.1) { newHueA = processHue(newHueA + 180); newHueB = processHue(newHueB + 180); } else if (colorRandom < 0.3) { newHueA = processHue(newHueA + 40); newHueB = processHue(newHueB + 40); } this.colorA = new NYColor(newHueA, random(40, 80), random(60, 100)); this.colorB = new NYColor(newHueB, random(40, 80), random(60, 100)); } this.startWidth = _startWidth; this.maxWidthRatio = random(2, 8); this.nowWidth = _startWidth; this.speed = _startSpeed; this.hornWidthRatio = random(0.2, 0.45); this.hornHeightRatio = random(0.1, 1.2); this.eyePaddingRatio = random(0.2, 0.8); this.eyeSizeX = random(0.05, 0.3); this.eyeSizeY = random(0.05, 0.3); this.eyeDistRatio = random(0.1, 0.6); var targetCurveSet = curveSets[int(random(0, curveSets.length))]; this.curveIn = targetCurveSet.inCurve; this.curveOut = targetCurveSet.outCurve; this.mouthWidthRatio = random(0.3, 0.43); this.mouthHeightRatioA = random(0.0, 0.12); this.mouthHeightRatioB = random(0.2, 0.4); this.mouthPaddingY = random(0.1, 0.3); this.mouthType = int(random(0, 2)); this.curvePointCount = 6; this.teethDist = random(0.05, 0.2); this.teethWidth = random(0.05, 0.2); this.teethHeight = random(0.1, 0.3); } Ribbon.prototype.update = function() { this.life -= 0.03; var t = this.life / this.startLife; if (this.life > 0) { var nowSpeed = sin(radians(t * t * 180)) * this.speed; this.nowWidth = (this.maxWidthRatio * widthNoise.noise(this.x, this.y, frameCount) + 1) * this.startWidth; // ── mouse repulsion ────────────────────────────────────────────────────── // Push the ribbon's direction AWAY from the mouse when it's nearby. // Influence radius = 80% of canvas width. // Strength falls off linearly with distance (max at centre, zero at edge). var dx = this.x - nowMouseX; // vector FROM mouse TO ribbon var dy = this.y - nowMouseY; var dist = Math.sqrt(dx * dx + dy * dy); var mouseInfluenceRadius = width * 0.8; if (dist < mouseInfluenceRadius && dist > 0.1) { // linear falloff: 1 at dist=0, 0 at dist=mouseInfluenceRadius var strength = (1.0 - dist / mouseInfluenceRadius) * 0.25; // angle pointing AWAY from the mouse (in p5 degrees, 0 = up) var angleAwayFromMouse = Math.atan2(dx, -dy) * 180 / Math.PI; // shortest-path lerp of current direction toward the away-angle var angleDiff = angleAwayFromMouse - this.nowDir; while (angleDiff > 180) angleDiff -= 360; while (angleDiff < -180) angleDiff += 360; this.nowDir += angleDiff * strength; } // ── noise-driven direction ─────────────────────────────────────────────── var dirNoiseValue = dirNoise.noise(this.x, this.y, frameCount); var dirRange = 360; var newDir = lerp(-dirRange, dirRange, dirNoiseValue); this.nowDir = lerp(this.nowDir, newDir, 0.06 * t); this.x += sin(radians(this.nowDir)) * nowSpeed; this.y += -cos(radians(this.nowDir)) * nowSpeed; this.points.push(new NYFlowPoint(this.x, this.y, this.nowWidth, this.nowDir)); this.endIndex++; } if (t < 0.6) this.startIndex++; if (this.startIndex >= this.endIndex) { var idx = ribbons.indexOf(this); if (idx >= 0) ribbons.splice(idx, 1); } }; Ribbon.prototype.draw = function() { if (this.life <= 0) return; var nowColor = NYLerpColor(this.colorB, this.colorA, this.life / this.startLife); var nowAlpha = min((this.startLife - this.life), 1.0); fill(nowColor.h, nowColor.s, nowColor.b, nowAlpha); beginShape(); for (var i = this.startIndex; i <= this.endIndex; i++) vertex(this.points[i].leftPoint.x, this.points[i].leftPoint.y); for (var i = this.endIndex; i >= this.startIndex; i--) vertex(this.points[i].rightPoint.x, this.points[i].rightPoint.y); endShape(); // face parts var nw = this.nowWidth; var nowHornWidth = nw * this.hornWidthRatio; var nowHornPadding = nw / 2 - nowHornWidth; var nowHornHeight = nw * this.hornHeightRatio; var nowEyeSizeX = nw * this.eyeSizeX; var nowEyeSizeY = nw * this.eyeSizeY; var nowEyePosY = nw * this.eyePaddingRatio + nowEyeSizeY / 2; var nowEyesDist = (nw / 2 - nowEyeSizeX) * this.eyeDistRatio + nowEyeSizeX / 2; var nowMouthWidth = nw * this.mouthWidthRatio; var nowMouthHeightA = nw * this.mouthHeightRatioA; var nowMouthHeightB = nw * this.mouthHeightRatioB; var nowMouthPaddingY = nw * this.mouthPaddingY + nowEyePosY; var nowTeethDist = nw * this.teethDist; var nowTeethWidth = nw * this.teethWidth; var nowTeethHeight = nw * this.teethHeight; push(); translate(this.x, this.y); rotate(radians(this.nowDir)); fill(nowColor.h, nowColor.s, nowColor.b, nowAlpha); // cat ears (horns) triangle(-nowHornPadding, -nowHornHeight, -nowHornPadding, 0, -nw / 2, 0); triangle( nowHornPadding, -nowHornHeight, nowHornPadding, 0, nw / 2, 0); // eyes fill('white'); ellipse(-nowEyesDist, nowEyePosY, nowEyeSizeX, nowEyeSizeY); ellipse( nowEyesDist, nowEyePosY, nowEyeSizeX, nowEyeSizeY); // mouth fill(nowColor.h, nowColor.s - 30, nowColor.b + 30, nowAlpha); var ci = this.curveIn, co = this.curveOut, mt = this.mouthType, cpc = this.curvePointCount; beginShape(); for (var i = 0; i < cpc; i++) { var t = i / cpc; var cx = lerp(-nowMouthWidth, 0, t); var cy = (mt == 1) ? lerp(nowMouthHeightB, 0, co(t)) + nowMouthPaddingY : lerp(0, nowMouthHeightA, co(t)) + nowMouthPaddingY; vertex(cx, cy); } for (var i = 0; i < cpc; i++) { var t = i / cpc; var cx = lerp(0, nowMouthWidth, t); var cy = (mt == 1) ? lerp(0, nowMouthHeightB, ci(t)) + nowMouthPaddingY : lerp(nowMouthHeightA, 0, ci(t)) + nowMouthPaddingY; vertex(cx, cy); } for (var i = 0; i < cpc; i++) { var t = i / cpc; var cx = lerp(nowMouthWidth, 0, t); var cy = (mt == 1) ? lerp(nowMouthHeightB, nowMouthHeightB - nowMouthHeightA, co(t)) + nowMouthPaddingY : lerp(0, nowMouthHeightB, co(t)) + nowMouthPaddingY; vertex(cx, cy); } for (var i = 0; i < cpc; i++) { var t = i / cpc; var cx = lerp(0, -nowMouthWidth, t); var cy = (mt == 1) ? lerp(nowMouthHeightB - nowMouthHeightA, nowMouthHeightB, ci(t)) + nowMouthPaddingY : lerp(nowMouthHeightB, 0, ci(t)) + nowMouthPaddingY; vertex(cx, cy); } endShape(); // teeth fill(nowColor.h, nowColor.s, nowColor.b, nowAlpha); var lx = -0.5 * nowTeethDist, rx = 0.5 * nowTeethDist; triangle(lx, nowMouthPaddingY, lx, nowMouthPaddingY + nowTeethHeight, lx - nowTeethWidth, nowMouthPaddingY); triangle(rx, nowMouthPaddingY, rx, nowMouthPaddingY + nowTeethHeight, rx + nowTeethWidth, nowMouthPaddingY); pop(); }; // ── Globals ─────────────────────────────────────────────────────────────────── var ribbons = []; // Smoothed mouse position (shared by real + auto-pilot) var nowMouseX = 0, nowMouseY = 0; // Auto-pilot (figure-8) — used only when no real mouse/touch is active var fakeMouseX = 0, fakeMouseY = 0; var nowMouseDegree = 0; var usingRealMouse = false; // true while pointer is over the canvas var spawnType = 0; var hasStroke = false; var isBlack = false; var mainHue = 0, hueRange = 0; var bgColor; var dirNoise, widthNoise; // ── p5 sketch ───────────────────────────────────────────────────────────────── function setup() { createCanvas(405, 720); colorMode(HSB); dirNoise = new NYNoiseSet(0.016, 0.024, 0.02); widthNoise = new NYNoiseSet(random(0.001, 0.006), random(0.001, 0.006), random(0.001, 0.006)); nowMouseX = width / 2; nowMouseY = height / 2; fakeMouseX = nowMouseX; fakeMouseY = nowMouseY; spawnType = int(random(0, 5)); hasStroke = random() < 0.2; isBlack = random() < 0.1; mainHue = random(0, 360); hueRange = random(10, 30); bgColor = new NYColor(mainHue, random(20, 60), random(10, 20), 1.0); if (hasStroke) { strokeWeight(random(1, 2)); stroke(0, 0, 100); } else { noStroke(); } background(bgColor.h, bgColor.s, bgColor.b, 1.0); frameRate(60); } function draw() { // ── Update target mouse position ───────────────────────────────────────── if (usingRealMouse) { // Follow the actual pointer nowMouseX = lerp(nowMouseX, mouseX, 0.12); nowMouseY = lerp(nowMouseY, mouseY, 0.12); // Keep auto-pilot in sync so it doesn't jump when pointer leaves nowMouseDegree += noise(frameCount * 0.01); fakeMouseX = width / 2 + sin(radians(nowMouseDegree)) * 0.38 * width; fakeMouseY = height / 2 + -cos(radians(nowMouseDegree * 2.3)) * 0.38 * height; } else { // Auto-pilot figure-8 nowMouseDegree += noise(frameCount * 0.01); fakeMouseX = width / 2 + sin(radians(nowMouseDegree)) * 0.38 * width; fakeMouseY = height / 2 + -cos(radians(nowMouseDegree * 2.3)) * 0.38 * height; nowMouseX = lerp(nowMouseX, fakeMouseX, 0.06); nowMouseY = lerp(nowMouseY, fakeMouseY, 0.06); } // ── Spawn one ribbon per frame ──────────────────────────────────────────── var spawnX = 0, spawnY = 0, spawnDir = 0; var spawnDist = random(0.0, 0.2) * min(width, height); if (spawnType == 0) { spawnX = random(0, width); spawnY = height; spawnDir = random(-30, 30); } else if (spawnType == 1) { spawnX = nowMouseX + sin(radians(spawnDir)) * spawnDist; spawnY = nowMouseY + -cos(radians(spawnDir)) * spawnDist; spawnDir = random(-360, 360); } else if (spawnType == 2) { if (random() < 0.3) { spawnX = width; spawnY = random(0.3, 1.0) * height; spawnDir = random(-180, -90); } else { spawnX = random(0.3, 1.0) * width; spawnY = height; spawnDir = random(-110, 0); } } else if (spawnType == 3) { if (random() < 0.3) { spawnX = 0; spawnY = random(0.3, 1.0) * height; spawnDir = random(180, 90); } else { spawnX = random(0.0, 0.7) * width; spawnY = height; spawnDir = random(110, 0); } } else { spawnDir = random(-720, 720); spawnX = width / 2 + sin(radians(spawnDir)) * spawnDist; spawnY = height / 2 + -cos(radians(spawnDir)) * spawnDist; } ribbons.push(new Ribbon(spawnX, spawnY, random(1, 24), spawnDir, random(6, 24))); // Semi-transparent background for trail effect background(bgColor.h, bgColor.s, bgColor.b, 0.06); for (var i = 0; i < ribbons.length; i++) { ribbons[i].draw(); ribbons[i].update(); } } // ── Mouse / touch events ────────────────────────────────────────────────────── function mouseMoved() { usingRealMouse = true; } function mouseDragged() { usingRealMouse = true; } function mouseOut() { usingRealMouse = false; } function touchStarted() { if (touches.length > 0) { usingRealMouse = true; } return false; } function touchMoved() { if (touches.length > 0) { usingRealMouse = true; } return false; } function touchEnded() { usingRealMouse = false; return false; } // Tap / click → regenerate function mousePressed() { ribbons = []; setup(); background(bgColor.h, bgColor.s, bgColor.b, 1.0); } function windowResized() { // fixed 405×720 — no resize needed }

黃新（Newyellow）

Catlloween Parade

Catlloween Parade