...loading...
Canvas size:
Grid:
Adding Iris/Pupil - Stage
...loading...
Canvas size:
Grid:
Eye 3 is where the sclera stops being a lone disk and becomes an eye.
A second SWDisk is layered on top of each sclera to form the iris and pupil —
using the exact same class, just with different parameters.
Big Idea 1 — One Class, Two Roles
Both the sclera and the pupil are SWDisk instances. The difference is entirely
in the constructor arguments: a large radius and thin stroke for the sclera; a smaller radius
and thick stroke for the pupil/iris disk. No new class needed — just reuse what you have.
Big Idea 2 — Thick Stroke Creates the Iris Ring
The iris ring is not a separate shape. It emerges from the stroke weight of the
pupil disk (irisThickness = 8). A stroke that thick bleeds outward from the disk
edge, forming a wide colored band — the iris — while the dark fill inside becomes
the pupil. One disk does both jobs.
Big Idea 3 — pupilFactor Scales the Pupil Proportionally
Rather than hardcoding the pupil radius, it is computed as a fraction of the eye radius:
let pupilFactor = 0.4;
let pupilRadius = eyeRadius * pupilFactor;
This means the whole eye — sclera and pupil together — scales up or down
by changing a single variable: eyeRadius.
Big Idea 4 — Shared SWPoint Center
Both the sclera disk and the pupil disk receive the same SWPoint as
their center. The pupil is automatically centered on the sclera because they share the
same anchor — no manual alignment needed. This shared-reference pattern will matter
later when the pupil needs to move independently.
What to Notice
irisThickness — try imagining
what happens if it were set to 2 vs. 20.eyeRadius, pupilFactor,
irisThickness) — one change propagates to both.The Road Ahead
The pupils are currently locked to the sclera center. Coming stages will introduce glint
highlights, then decouple the pupil's SWPoint from the eye center so it can
move — eventually responding to the mouse.