Stage 1d is a refinement of Stage 1c that takes the accordion
concept one level higher. Instead of three always-visible Bootstrap cards,
the entire right panel is a single panel accordion where each
section header is always visible but the body can be expanded or collapsed on demand.
What Changed from Stage 1c
-
Three cards replaced by one panel accordion —
The 🅰 Character, ✨ Animations, and 🌐 Environment sections
are now accordion items inside
#panelAccordion. Their headers
are always visible as a quick index of what's available.
-
Character panel starts open — Matches the old default
where the Character card was at the top and immediately usable.
-
Animations panel starts collapsed and disabled —
The header cannot be clicked until a character is placed on the canvas.
Once a character exists the header enables and the panel can be expanded.
-
Environment panel starts collapsed — Grid and
background controls are available but tucked away on first load since they
are secondary to placing and styling a character.
-
Inner accordions from Stage 1c are preserved —
The 🎨 Fill / ✏️ Stroke / 📍 Placement accordion inside the
Character panel and the 💓 Breathe / 🔄 Spin / 🌈 Cycle Hue
accordion inside the Animations panel are unchanged.
-
All panels can be open simultaneously — There is no
mutual-exclusion lock on the outer accordion, so you can expand all three
if you want a full view.
Under the Hood
One new DOM ref — animPanelBtn — is resolved in
wireControls() and passed to syncOverlayControls().
When a character is placed, syncOverlayControls(true) enables the
Animations panel button and all inner animation controls. When the canvas is
cleared, syncOverlayControls(false) disables and collapses the
Animations panel along with its inner accordion items.
Breathe Animation Math
The breathing size is computed each frame using a sine wave centred on
baseSize:
size(t) = Amount × sin(Speed × 2π × t) + baseSize
- Amount is the amplitude — the maximum number of
user units the size swings above and below
baseSize.
At Amount = 5 the character grows from baseSize−5 (exhale)
to baseSize+5 (inhale) each cycle.
- Speed is the frequency in cycles per second.
Speed = 1 = one full inhale–exhale per second;
Speed = 0.5 = one breath every two seconds.
- The formula is evaluated live by
SWCharacter.draw(); no
animation frames are pre-computed.
Design Trade-offs vs Stage 1c
-
Pro — On first load, only the three panel headers are
visible, giving the panel a very compact footprint. A user can see the
full menu of available sections in one glance without scrolling.
-
Pro — Collapsing a section you're done with (e.g.,
Character) is a single click, immediately revealing the sections below.
-
Con — Two levels of accordion nesting (panel → section)
can feel layered. Users who want to adjust fill color and animations
simultaneously must keep both panels expanded, which produces roughly
the same scroll depth as Stage 1c.
-
Stage 1c — Best when you want all three card headings
visible and the individual control groups to be the things that collapse.
Stage 1d — Best when the initial panel footprint matters
most, or as a teaching example of progressive disclosure at two levels.