Building LightWrite

Before writing a line, I read the existing sketch.js and index.html. Two problems I found immediately:

1. The canvas is square (500×500) but the image is 959×598 (ratio 1.604:1). The background is being horizontally compressed by about 18%. Every letter position is consequently mis-mapped. This is the distortion you flagged.
2. lightUp() calls translate() without push()/pop(). Each call adds to the current transform. When multiple letters need to glow simultaneously (required for two-way mode), the second letter is drawn at Position A + Offset B, not at Position B. The original works only because it lights one letter per frame via a key-held check.

Both are fixed in the 2026 rebuild. The naming will be LightWrite2026-06-15/ to match TNT’s date-stamped convention.

Good choice. The function-name test is a useful one: a name that works as both lightWrite.html and lightWrite(message, delayMs) stays consistent across the codebase and is self-documenting at every occurrence. Going with LightWrite throughout.

The aspect-ratio fix is two lines of arithmetic:

var IMG_W = 959;
var IMG_H = 598;

/* In setup(): */
_cw = Math.min(container.clientWidth, 700);
_ch = Math.floor(_cw * IMG_H / IMG_W);   /* = _cw × 0.6236 */

For a 700px container, the canvas becomes 700×436 instead of 500×500. The letter coordinates scale proportionally:

/* In _lightUp(): */
var px = x * _cw / IMG_W;
var py = y * _ch / IMG_H;

Every glow lands exactly on its bulb in the background image, at every viewport width.

The original lightUp():

function lightUp(x, y, clr){
    translate(x*width/959, y*height/598);   // ← no push() before this
    fill(255, 50, 30, 25);
    for(let i = 0; i < 40; i+=2){ circle(0, 0, i); }
    // ← no pop() here
}

In p5.js, translate() moves the coordinate origin relative to its current position. Without push() and pop(), each call to lightUp() moves the origin further in the direction of the last translation. If lightUp() is called twice in one frame (letters A and B both active), letter B is drawn at:

origin + A.offset + B.offset   /* wrong */

instead of:

origin + B.offset               /* correct */

The fix: wrap every lightUp() in push()/pop(), which saves and restores the transform matrix around each call.

function _lightUp(x, y, clr) {
    push();                              // ← save transform
    translate(x * _cw / IMG_W,
              y * _ch / IMG_H);
    /* draw glow rings... */
    pop();                               // ← restore transform
}

Claude mode uses async/await with a minimal sleep() utility:

function sleep(ms) {
    return new Promise(function(resolve) { setTimeout(resolve, ms); });
}

For each phrase, _claudeTypePhrase() loops through every character:

activeLetters.add(ch);      // light the bulb
await sleep(ms);            // hold it lit
activeLetters.delete(ch);   // extinguish it
await sleep(ms * 0.35);     // brief dark gap

The p5.js draw() loop runs at 30fps independently of this. It simply reads the activeLetters Set each frame and lights up whatever is in it. The async function and the draw loop share state through activeLetters — they run concurrently without interfering.

This is the producer/consumer pattern: the async function produces active letters; the draw loop consumes them visually. Neither knows about the other’s timing.

The “Loading…” div is p5.js’s built-in preload indicator. It shows while preload() is running and disappears only when every loadImage() call completes. When one fails silently (no error callback), p5.js hangs in preload indefinitely — setup() never runs, so no canvas is ever created.

The broken call was:

loadImage('images/livingRoomXmasLights.png')   // relative to LightWrite2026-06-15/

That folder has no images/ subfolder. The PNG lives in the legacy sThings folder. The correct path:

'../_LegacyTNT/ProcessingShowcase/sThings2022-11-11/images/livingRoomXmasLights.png'

Two additional changes were made alongside the path fix:

• Added a success callback that sets _imgLoaded = true, so draw() knows the image is ready.
• Added an error callback that logs a warning and lets the app continue — the canvas now renders with a dark fallback background if the image is ever missing, instead of hanging silently.

Where do the coordinates come from?

They come directly from the original sketch.js written by David M. in 2022. The original code has a series of if(keyIsDown(65)) lightUp(240, 157, "grn"); lines — one per letter, A through Z. Those numbers were measured by David by clicking on the actual livingRoomXmasLights.png image and recording the pixel position of each physical Christmas light bulb in the photograph, in the original 959×598 coordinate space.

In the 2026 rebuild, I moved those 26 hard-coded if statements into a single LETTER_DATA object so the coordinate and color for each letter can be looked up by key rather than checked in sequence. The data is identical; only the structure changed. This is the data-over-logic refactoring pattern: if you have 26 nearly-identical blocks of code that differ only in their values, replace them with a data structure and one loop or lookup.

/* Original: 26 separate if-blocks */
if(keyIsDown(65)) lightUp(240, 157, "grn");
if(keyIsDown(66)) lightUp(322, 161, "blu");
...

/* Refactored: one lookup */
var data = LETTER_DATA[ch];
if (data) { _lightUp(data.x, data.y, data.c); }

Why var instead of const?

That was an oversight — and a good catch. LETTER_DATA is never reassigned. It is defined once and only read thereafter. const is the correct declaration for any value that will not be reassigned. Using var here signals “this might change” to a reader, which is misleading. It has been corrected to const.

Note that const on an object does not make the object’s contents immutable — you could still add or change a property. It only prevents the variable from being rebound to a different value. That is sufficient here: no code in LightWrite ever tries to replace LETTER_DATA with a new object.

Removed from three files simultaneously:

• lightWrite.html — mode bar reduced to two buttons
• lightWriteSettings.html — mode radio group reduced to two options; description updated
• lightWriteScript.js — startClaude() now always sets humanMode = false; stopClaude() always sets humanMode = true; setMode() uses humanMode = (newMode === 'human')

The previous implementation had a subtle bug in “Both” mode where Claude’s extinguish logic tested activeLetters.has(ch) — which was always true because Claude had just added the letter. This caused every Claude-typed letter to stay permanently lit. That bug was separately fixed before Both was removed. Both the bug and the simplification are documented here because the bug is instructive: it is an example of a condition that is logically vacuous — always true by construction.

Added. The speed map is now:

var SPEED_MS = { xslow: 2000, slow: 400, medium: 180, fast: 85 };

“Extremely Slow” appears first in the settings radio group because it is the most useful for first-time users trying to read letters on the wall without the text display.

Agreed — self-contained is better than cross-folder dependency. Created LightWrite2026-06-15/images/ and copied both assets:

• livingRoomXmasLights.png — canvas background (used by lightWriteSketch.js)
• mindFlayerBG.jpg — hero and cover page background (used by lightWriteStyles.css)

Updated three path references: preload() in lightWriteSketch.js and both background declarations in lightWriteStyles.css. The legacy folder’s copies are untouched.