From 2450a17aba3a1a2c64cd43b2c8d52ada06c2e6a9 Mon Sep 17 00:00:00 2001 From: Eli Mallon Date: Thu, 30 Apr 2026 12:17:04 -0700 Subject: [PATCH] Fix bulge direction: inflate, not pinch MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Chat (goose.art): "the bulge command is just pushing the user away instead of actually inflating them" — they linked the codrops bulge distortion article as reference. The displacement map encoded vectors pointing OUTWARD from centre. With a positive feDisplacementMap scale, that means each output pixel samples from a point further out — i.e. the centre shows what *was* at the edge: classic pinch / concave-lens look. Inverting the vector sign (now pointing INWARD) flips it so off-centre output pixels sample from points closer to centre — centre region magnifies, edges compress. That's the convex-lens / bulge / fisheye profile chat actually wanted. Co-Authored-By: Claude Opus 4.7 (1M context) --- pets.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/pets.html b/pets.html index 3420a97..56c9656 100644 --- a/pets.html +++ b/pets.html @@ -768,10 +768,14 @@ function getBulgeDisplacementMap() { const uy = d > 0.0001 ? dy / d : 0; // Magnitude: 0 at center, peaks at ~0.6 of radius, 0 at edge — gives // the classic barrel-bulge profile (centre stretches, edges fall back). + // Vectors point INWARD (toward center): a slightly-off-center output + // pixel samples from a point even closer to centre, so the centre + // appears magnified — a true bulge / convex lens. (An outward-pointing + // map gives the opposite, pinch-style distortion.) const mag = Math.sin(t * Math.PI); const i = (y * size + x) * 4; - imgData.data[i] = Math.round(128 + ux * mag * 127); - imgData.data[i + 1] = Math.round(128 + uy * mag * 127); + imgData.data[i] = Math.round(128 - ux * mag * 127); + imgData.data[i + 1] = Math.round(128 - uy * mag * 127); imgData.data[i + 2] = 128; imgData.data[i + 3] = 255; } -- 2.51.2