SWCharacter Saga

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.