Two Ways to Build an Eyeball

The Core Difference

These two stages produce identical visual output on screen. The difference is entirely about where the knowledge lives.

Side-by-Side Metrics

What the Sketch Code Looks Like

The most striking way to see the difference is to compare equivalent passages side by side.

Creating the eyes — setup()

// 12 geometry calculations...
let glintTopRadius = eyeRadius * pupilFactor
                   * glintFactor;
let glintTopOffsetX = glintTopDistance
                   * cos(radians(glintAngleDeg));
// ...then 6 SWPoint + SWDisk calls per eye,
// repeated twice for left and right,
// then drag-state setup for each eye.

leftEye = new SWEyeball(
    new SWPoint(-2.5, 6), // center
    eyeRadius,             // sclera radius
    2,                     // border thickness
    [swWhite, swBlack],    // sclera colors
    pupilFactor,           // 0.4
    irisThickness,         // iris ring weight
    [swBlack, swBlue]      // pupil colors
);
rightEye = new SWEyeball(
    new SWPoint(2.5, 6), ...);

Drawing — draw()

leftEyeBase.drawOnGrid(grid);
leftPupil.drawOnGrid(grid);
leftTopGlint.drawOnGrid(grid);
leftBottomGlint.drawOnGrid(grid);
rightEyeBase.drawOnGrid(grid);
rightPupil.drawOnGrid(grid);
rightTopGlint.drawOnGrid(grid);
rightBottomGlint.drawOnGrid(grid);

leftEye.drawOnGrid(grid);
rightEye.drawOnGrid(grid);

Mouse interaction — mousePressed()

if (leftPupil.center.isDraggable &&
    leftPupil.center.containsPoint(...)) {
    draggedPoint = leftPupil.center;
    leftDragDependents.topGlint = leftTopGlint;
    leftDragDependents.bottomGlint = ...;
    leftDragDependents.topGlintCenter = ...;
    // ... repeated for right eye
}

if (leftEye.handleMousePressed(
        mouseX, mouseY, grid)) return;
if (rightEye.handleMousePressed(
        mouseX, mouseY, grid)) return;
showGrid = !showGrid;

Educational Perspective

Stage 6 is valuable as a learning stage, not a destination

Its virtues are real:

• Every internal decision is visible — nothing is hidden. When a student reads leftTopGlintCenter = new SWPoint(leftPupilCenter.x + glintTopOffsetX, ...) they see exactly how a glint gets positioned.
• The geometric relationships (offset math, angle calculations, distance factors) are spelled out explicitly.
• Students can trace the entire program without ever leaving the sketch file.

Stage 6’s liabilities become clear as complexity grows

• Variable naming burden. leftTopGlintCenter, rightBottomGlintCenter — by the time you have a ghost with multiple eyeballs, you need a systematic naming convention just to keep track of components. This cognitive load is the problem that OOP was invented to solve.
• Duplication is fragile. The left and right eyes are constructed by copy-paste. If you change glint behavior, you must change it in two places — and eventually someone forgets one.
• Drag state is tangled with drawing state. draggedPoint, leftDragDependents, and rightDragDependents are conceptually part of the eyeball, but they live at the sketch level. The sketch is responsible for data that belongs to the eye.

Stage 7 teaches the why of classes, not just the syntax

Students can see the before and after side by side and ask: what did the class actually do for us? The answer is concrete:

• It moved 14 variables and 3 drag objects inside the class where they belong.
• It turned “what the sketch knows about an eye” from a scattered collection of variables into a single named thing.
• The sketch now reads like a design description rather than an implementation manual.

Professional Perspective

Stage 6 is a prototype

In professional practice, Stage 6 is exactly the kind of code you write when you are figuring something out — exploratory, direct, fast to write. This is legitimate and has a name: spike code or proof of concept. The professional problem is treating prototype code as production code.

Stage 7 is the production pattern

Several properties make it professionally sound:

Reusability

SWEyeball can be dropped into any future sketch — a ghost, a monster, an animated face — with a single constructor call and no knowledge of its internals.

Maintainability

Changing glint geometry means changing code in exactly one place — _buildComponents() in swEyeball.js. In Stage 6, the same change touches both eyes and potentially the drag state too.

API Design: the handle* pattern

The handleMousePressed / handleMouseDragged / handleMouseReleased pattern is a well-established convention for delegating event handling to objects that own the relevant state. The sketch calls the method; the object decides whether to act. This is how UI component libraries like Bootstrap handle events internally.

Extensibility

The rebuild() / property-override pattern (glintFactor, glintAngleDeg, etc.) gives users a clean configuration API without exposing internal construction. A future SWGhost class can create two SWEyeball instances and customize them without touching swEyeball.js at all:

// Future SWGhost usage — not yet built, but now possible:
let ghost = new SWGhost(new SWPoint(0, 0));
ghost.leftEye.glintAngleDeg  = 120;  // tweak one eye's glint angle
ghost.leftEye.rebuild();             // recompute geometry

The Honest Trade-off

Stage 7 does have one cost: indirection. To understand what actually draws on screen, a reader must now follow the call chain:

leftEye.drawOnGrid(grid)
  → SWEyeball._buildComponents()  (called at construction)
  → eyeBase.drawOnGrid(grid)
  → pupil.drawOnGrid(grid)
  → topGlint.drawOnGrid(grid)
  → bottomGlint.drawOnGrid(grid)

In Stage 6, the entire drawing path is in plain sight. This is the fundamental trade-off of encapsulation everywhere in software:

The progression from Stage 6 to Stage 7 is therefore not just a coding exercise — it demonstrates the exact moment in a project’s growth when a class starts paying for itself.

SWEyeball Class Quick Reference

Constructor

new SWEyeball(
    eyeCenter,       // SWPoint   – position in user coordinates
    radius,          // number    – sclera (white) radius
    baseThickness,   // number    – sclera border stroke weight
    eyeColors,       // SWColor[2]  – [sclera fill, sclera border]
    pupilFactor,     // number    – pupil radius = radius × pupilFactor
    irisThickness,   // number    – iris ring stroke weight
    pupilColors      // SWColor[2]  – [pupil fill, iris stroke]
)

Key Methods

Customizable Glint Properties (set before rebuild())

Try It Yourself

Open both demos and drag the pupils around. The behavior is identical — the code behind it is not.