- commit
- 4540becfb6a132a4bf7e4ac7cbe2e43953541ffd
- parent
- d4a1ae8a8ef773be0572ee2395fdc76ce6100cb4
- author
- Dami <dami.etoile@gmail.com>
| M | website/ | 50 | +++++++++++++++++++----------- |
@@ -144,9 +144,9 @@
144144 The pointer dents the height field; the dent propagates as145145 rings that get dithered into the same ramps as the terrain. */146146 var waveA, waveB; // waveA = current heights, waveB = previous147- var WAVE_DAMP = 0.975;148- var WAVE_WARP = 14; // wave gradient displaces the noise-sampling coords (refraction)149- var WAVE_SHADE = 0.1; // faint crest/trough shading on top of the refraction147+ var WAVE_DAMP = 0.97;148+ var WAVE_WARP = 9; // wave gradient displaces the noise-sampling coords (refraction)149+ var WAVE_SHADE = 0.06; // faint crest/trough shading on top of the refraction150150 var lastCellX = -1, lastCellY = -1;151151 152152 // Soft 5x5 dent: a wider impulse makes longer-wavelength rings@@ -184,32 +184,46 @@
184184 ];185185 }186186 187- // Listen on the hero (not the canvas) so the trail continues188- // under the floating panel instead of dying at its edge.189- var hero = display.parentElement;190- hero.addEventListener("pointermove", function (e) {191- if (reduced.matches || !raf) return;192- var c = pointerCell(e);187+ function trailTo(cx, cy) {193188 if (lastCellX >= 0) {194- var dx = c[0] - lastCellX;195- var dy = c[1] - lastCellY;189+ var dx = cx - lastCellX;190+ var dy = cy - lastCellY;196191 var steps = Math.min(48, Math.ceil(Math.max(Math.abs(dx), Math.abs(dy))) || 1);197192 for (var s = 1; s <= steps; s++) {198- splash(lastCellX + (dx * s) / steps, lastCellY + (dy * s) / steps, 0.4);193+ splash(lastCellX + (dx * s) / steps, lastCellY + (dy * s) / steps, 0.22);199194 }200195 } else {201- splash(c[0], c[1], 0.4);196+ splash(cx, cy, 0.22);202197 }203- lastCellX = c[0];204- lastCellY = c[1];198+ lastCellX = cx;199+ lastCellY = cy;200+ }201+202+ // Listen on the hero (not the canvas) so the trail continues203+ // under the floating panel instead of dying at its edge.204+ var hero = display.parentElement;205+ var lastClientX = -1, lastClientY = -1;206+ hero.addEventListener("pointermove", function (e) {207+ if (reduced.matches || !raf) return;208+ lastClientX = e.clientX;209+ lastClientY = e.clientY;210+ var c = pointerCell(e);211+ trailTo(c[0], c[1]);205212 });213+ // Scrolling slides the field under a stationary cursor; lay the214+ // same trail along that relative motion so it acts like a move.215+ window.addEventListener("scroll", function () {216+ if (reduced.matches || !raf || lastClientX < 0) return;217+ var c = pointerCell({ clientX: lastClientX, clientY: lastClientY });218+ trailTo(c[0], c[1]);219+ }, { passive: true });206220 hero.addEventListener("pointerdown", function (e) {207221 if (reduced.matches || !raf) return;208222 var c = pointerCell(e);209- splash(c[0], c[1], 2);223+ splash(c[0], c[1], 1.2);210224 });211- hero.addEventListener("pointerleave", function () { lastCellX = -1; });212- hero.addEventListener("pointercancel", function () { lastCellX = -1; });225+ hero.addEventListener("pointerleave", function () { lastCellX = -1; lastClientX = -1; });226+ hero.addEventListener("pointercancel", function () { lastCellX = -1; lastClientX = -1; });213227 214228 // Per-load random seed: shifts sampling into a different region of215229 // the infinite noise field so the background doesn't start the same