herd / commit

Replace fear tint with wide-eyed look on sheep

2b484d78e462580a11798bba0fab835337ded638 · Pavel Safronov · 2026-05-17 20:46:03 -0700 · parents c4a1cdd14bdf

Replace fear tint with wide-eyed look on sheep

Wool stays white at all fear levels. Instead, the eye sclera grows
outward as fearLevel rises, showing the whites of the eyes. The dark
pupil stays fixed, so at fearLevel=0 the eye looks identical to before.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

 src/entities/Sheep.ts | 38 +++++++++++++++++++++++---------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/entities/Sheep.ts b/src/entities/Sheep.ts
index be4a852..6417350 100644
--- a/src/entities/Sheep.ts
+++ b/src/entities/Sheep.ts
@@ -4,13 +4,13 @@ import { Vec2 } from '../math/Vec2.ts'
 // [dx, dy, radius] — all drawn in the same wool colour so the lumpy
 // silhouette reads as fluffiness rather than dark spots.
 const WOOL_BLOBS: [number, number, number][] = [
-  [ 0,   0,  6.5],  // centre
-  [-5,  -4,  5.5],  // upper-left
-  [ 5,  -4,  5.5],  // upper-right
-  [-6,   2,  5.0],  // left
-  [ 6,   2,  5.0],  // right
-  [ 0,  -7,  4.5],  // top
-  [ 0,   5,  4.5],  // bottom
+  [0, 0, 6.5],  // centre
+  [-5, -4, 5.5],  // upper-left
+  [5, -4, 5.5],  // upper-right
+  [-6, 2, 5.0],  // left
+  [6, 2, 5.0],  // right
+  [0, -7, 4.5],  // top
+  [0, 5, 4.5],  // bottom
 ]
 
 export interface SheepProps {
@@ -42,18 +42,13 @@ export class Sheep {
   draw(ctx: CanvasRenderingContext2D, scale = 1) {
     const { x, y } = this.pos
 
-    // fear tint: white → orange-red
-    const g = Math.round(255 - this.fearLevel * 160)
-    const b = Math.round(255 - this.fearLevel * 255)
-    const bodyColor = `rgb(255,${g},${b})`
-
     // Draw wool + head in local space so the whole body rotates together.
     ctx.save()
     ctx.translate(x, y)
     ctx.rotate(this.facing)
 
     // Fluffy wool body — puffs in local space, facing = +x direction
-    ctx.fillStyle = bodyColor
+    ctx.fillStyle = '#fff'
     for (const [dx, dy, r] of WOOL_BLOBS) {
       ctx.beginPath()
       ctx.arc(dx * scale, dy * scale, r * scale, 0, Math.PI * 2)
@@ -66,11 +61,24 @@ export class Sheep {
     ctx.arc(9 * scale, 0, 4.5 * scale, 0, Math.PI * 2)
     ctx.fill()
 
-    // Eyes on either side of the head centre
+    // Eyes: white sclera grows with fear, dark pupil stays fixed.
+    // At fearLevel=0 the sclera equals the pupil and is fully covered — plain dot.
+    // As fear rises a white ring appears, giving a wide-eyed look.
+    const eyeX = 9 * scale
+    const eyeY = 2.5 * scale
+    const pupilR = 1.2 * scale
+    const scleraR = pupilR + this.fearLevel * 1.5 * scale
+
+    ctx.fillStyle = '#fff'
+    for (const side of [-1, 1]) {
+      ctx.beginPath()
+      ctx.arc(eyeX, side * eyeY, scleraR, 0, Math.PI * 2)
+      ctx.fill()
+    }
     ctx.fillStyle = '#1a1a1a'
     for (const side of [-1, 1]) {
       ctx.beginPath()
-      ctx.arc(9 * scale, side * 2.5 * scale, 1.2 * scale, 0, Math.PI * 2)
+      ctx.arc(eyeX, side * eyeY, pupilR, 0, Math.PI * 2)
       ctx.fill()
     }