Stage 1a is a direct refinement of Stage 1, keeping all the same
functionality — click to place a character, live control panel updates,
breathing, spinning, and hue cycling — while changing how colors are
selected in the UI.
What Changed from Stage 1
-
Color wells — Each of the three color targets
(background, fill, stroke) now uses a native browser
<input type="color"> picker, sometimes called a
color well. Click the swatch to open the OS-level color chooser.
This replaces the three separate Hue / Saturation / Brightness sliders
from Stage 1, trading precise HSB control for broader accessibility and
a more familiar color-picking experience.
-
Alpha slider — A single Opacity range slider
(0–100) accompanies each color well, independently controlling the
transparency of the background, fill, and stroke colors.
-
Light gray default background — The canvas opens with
a neutral
#e8e8e8 gray background instead of the blue from
Stage 1, making the character's fill color stand out immediately.
Environment Panel Additions
-
Show bug point — A checkbox (off by default) in the
Environment card overlays a small crosshair marker at the
SWBug anchor position of the placed character. Useful for
seeing how the logical grid cell center relates to where the glyph
is actually rendered.
-
Show row, col label — Also off by default. When
enabled, the grid row and column of the current character are printed
just below its cell.
Under the Hood
The color picker delivers a CSS hex string (e.g. #cc7014).
Fill and stroke colors are converted via the static method
SWColor.fromHex(hexStr, alpha, name), which extracts HSB
components using p5.js's hue(), saturation(), and
brightness() functions and returns a fully initialized
SWColor instance. This means the Cycle Hue
animation still works correctly — it advances from whatever hue the
picker selects, just as in Stage 1.
The background uses the sketch-local helper
hexToP5ColorWithAlpha(hexStr, alpha), which rebuilds the color
in p5's HSB mode with the slider's opacity applied and passes it directly to
background(). Because this returns a raw p5.Color
rather than a SWColor, it remains a local function rather than
a method on the class.
When to Use Each Version
-
Stage 1 — When precise HSB control matters (e.g., setting
exact saturation or brightness, or demonstrating the HSB color model to students).
-
Stage 1a — When you want to pick colors intuitively and
control transparency independently for each layer.