Splatter: invert the chevron fade — solid at the racket, thinning up the lane

Reads as something leaving your hand and receding rather than as a label on the
zombie, which is what the perspective shrink was already saying. The arrowhead
stays fully opaque, so the target is still unmistakably marked.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
wuwiandClaude Opus 5 committed 2026-07-26 16:42:25 +03:00
1 parent f3dcf0b16f
commit c8990fe900
2 files changed
+6 -5

No files matched your search

+1 -1
View File
@@ -52,6 +52,6 @@
<p class="start">TAP TO START</p>
</div>
</div>
<script type="module" src="main.js?v=19"></script>
<script type="module" src="main.js?v=20"></script>
</body>
</html>
+5 -4
View File
@@ -428,15 +428,16 @@ export function render() {
ctx.fill();
};
// Chevrons stepped along the lane in WORLD space, each sized by its own projection scale,
// so they shrink into the distance like everything else on the court. They also fade IN
// toward the target: faint at your racket, solid on the body, which walks the eye up the
// lane instead of leaving a uniform stripe. More of them, and fatter, the harder you draw.
// so they shrink into the distance like everything else on the court. They also fade OUT
// toward the target: solid at your racket, thinning up the lane, so the trail reads as
// something leaving your hand rather than as a label on the zombie. More of them, and
// fatter, the harder you draw.
const n = Math.round(3 + ft.f * 5);
ctx.fillStyle = col;
for (let i = 1; i <= n; i++) {
const u = i / (n + 1);
const c = proj(P.x + (tx - P.x) * u, 1.4 + (0.35 - 1.4) * u, P.z + (tz - P.z) * u);
chevron(c, Math.max(1.5, c.s * (0.07 + ft.f * 0.09)), 0.3 + 0.7 * u);
chevron(c, Math.max(1.5, c.s * (0.07 + ft.f * 0.09)), 1 - 0.7 * u);
}
chevron(b, Math.max(2.5, b.s * (0.10 + ft.f * 0.11)), 1); // the arrowhead lands ON the target
ctx.globalAlpha = 1;