Stage 1b is a direct refinement of Stage 1a, keeping all the same
functionality — color wells, alpha sliders, breathing, spinning, and hue
cycling — while reorganizing the UI for a cleaner layout.
What Changed from Stage 1a
-
Actions card removed — The separate ⚙️ Actions card
at the bottom of the right panel has been eliminated to reduce scrolling
and keep the panel tighter.
-
Clear & Save Image buttons moved under the canvas —
The two action buttons now appear directly beneath the canvas, keeping
them close to the content they affect and freeing up space in the right panel.
-
Show row, col label moved to Environment — The grid
cell label toggle now lives in the 🌐 Environment card alongside the other
display options, which is a more logical home for it.
-
"Show bug point" renamed to "Show bug" — Shortened
for conciseness; the behavior is unchanged.
Under the Hood
No logic changed from Stage 1a. The color picker delivers a CSS hex string
(e.g. #cc7014). Fill and stroke colors are converted via
SWColor.fromHex(hexStr, alpha, name), and the background uses the
sketch-local helper hexToP5ColorWithAlpha(hexStr, alpha).
The Cycle Hue animation still advances from whatever hue
the picker selects.
When to Use Each Version
-
Stage 1a — When you want to see the full Actions card layout
as a teaching example of organizing controls in cards.
-
Stage 1b — When you prefer the buttons close to the canvas
and a more compact right panel.