SWCharacter Saga

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.