Enhance Central Human Body Visualization - Add Missing Organs, Spine, Muscles & Skeletal Layers with Transparency Support

[markmarvik]

Current State (v0.2.x)

The central visualization uses a canvas-based human body model (CanvasViewport.js + LayoutEngine.js) with:

• Base outlines: public/assets/body/base/body-male.png, body-female.png
• Organ PNGs in public/assets/body/organs/: brain, eyes, gut, heart, liver, lungs, mito (mitochondria), nerves, stomach, thyroid

These are positioned relative to the body, with nodes arranged in "organ rings". An optional unused SVG sidebar exists in OrganDiagram.js.

Stomach.png exists but is not wired/used in data or rings. Spine and any musculoskeletal imagery are completely absent.

---

Problems / Gaps

• Limited organ coverage for a longevity platform (many supplements, habits, and exercises target organs/systems not visualized).
• No spine (critical for posture, nervous system, back health).
• No muscles or bones → limbs (arms/legs) lack detail despite being primary targets for exercise and sarcopenia-related longevity work.
• No layered views or transparency controls (users can't easily compare or focus on muscles vs. bones vs. organs).
• Data (supplements.js, habits.js, etc.) doesn't fully map to all available organs/rings.
• Visualization feels incomplete for deep exploration of interventions on specific body systems.

---

Proposed Additions

1. New Organ/System Images (add to public/assets/body/organs/ or logical subfolders)

• spine.png (detailed vertebral column + spinal cord, posterior or lateral view)
• kidneys.png (paired left/right kidneys)
• pancreas.png
• adrenals.png (small glands on top of kidneys)
• Optional: skin.png (full-body or highlighted integumentary layer), simplified reproductive/hormonal visuals if relevant

2. Musculoskeletal Layer (high priority)

Create detailed, transparent-background PNG illustrations:

• Full-body or torso-focused:
  • skeleton_full.png or skeleton_torso.png + limb bones
  • muscles_anterior.png and muscles_posterior.png
• Dedicated limb details (as discussed):
  • arm_muscles.png + arm_bones.png (biceps, triceps, deltoids, forearm extensors/flexors, humerus/radius/ulna)
  • leg_muscles.png + leg_bones.png (quads, hamstrings, glutes, calves, femur/tibia/fibula/patella)

Strongly recommended approach for arms/legs:
One clean implementation is to support layered rendering with independent transparency (see Implementation section). Alternative: split-view images (one side muscles, other side bones) or dedicated zoomable insets.

3. Folder Structure Suggestion

public/assets/body/
├── base/
│   ├── body-male.png
│   └── body-female.png
├── organs/
│   ├── brain.png, heart.png, liver.png, lungs.png, stomach.png, gut.png, ...
│   ├── spine.png (new)
│   ├── kidneys.png (new)
│   └── pancreas.png, adrenals.png (new)
├── skeleton/
│   ├── skeleton_full.png
│   └── spine_detailed.png
└── muscles/
    ├── muscles_anterior.png
    ├── muscles_posterior.png
    ├── arm_muscles.png
    ├── arm_bones.png
    ├── leg_muscles.png
    └── leg_bones.png

---

Implementation Recommendations

Canvas Layer System (Core Change)

• Extend CanvasViewport.js (or create AnatomyRenderer.js) to support multiple drawable layers with per-layer globalAlpha / opacity.
• Layers could include:
  1. Body outline / silhouette (male/female switchable?)
  2. Skeleton layer (toggleable)
  3. Muscle layer (toggleable)
  4. Organ overlays (individual or grouped, with hover highlights)
  5. Optional: vascular, nervous, or skin overlays

UI & Interactivity

• Add view mode toggles / presets in the UI:
  • "Organs View" (default)
  • "Musculoskeletal View" (muscles + bones prominent, organs dimmed)
  • "Combined / All Layers"
  • "Skeletal Only", "Muscles Only", etc.
• Independent opacity sliders or quick-fade buttons for muscles, bones, and organs.
• Click/hover on limb regions → open detailed side panel or modal with zoomed arm/leg muscle + bone diagrams + related exercises/supplements.
• Improve keep-out zones in LayoutEngine.js to respect new musculoskeletal regions.
• Hovering any organ/muscle/bone image should highlight its ring and show inspector data.

Data & Ring Mapping

• Ensure all visual elements have corresponding rings/categories.
• Update src/data/supplements.js, habits.js, exercises.js, foods.js (and any mapping/config) so nodes are properly assigned to organs/systems (especially stomach, spine, kidneys, muscles, etc.).
• Add primaryOrgan or systems: [] field if not already present.
• mito.png may be better as a special cellular/energy layer rather than a main organ.

Performance & Polish

• All new images must have transparent backgrounds (PNG with alpha).
• HiDPI / crisp rendering already supported — maintain it.
• Consider lazy-loading or sprite-sheet optimization if many layers become heavy on mobile.
• Accessibility: ARIA labels or tooltips describing what each visual element represents.

---

Acceptance Criteria / Checklist

• New images added (spine, kidneys, pancreas/adrenals, full muscle + skeleton sets for limbs/torso)
• Folder structure organized under public/assets/body/
• Canvas supports layered drawing with independent opacity controls
• UI toggles/presets for view modes (Organs / Muscles / Bones / Combined)
• Limb click/hover shows detailed muscle/bone view + related content
• All existing + new organs/systems are populated by data nodes (no unused assets like current stomach)
• Layout/keep-out logic updated for new anatomy
• Documentation updated in README (anatomy assets + how to extend layers)
• Mobile/touch friendly (existing pan/zoom should continue working)

---

Why This Matters

AETHERIS is a longevity constellation platform. Users explore how supplements, habits, exercises, and foods affect specific body systems. A rich, interactive, layered anatomical visualization (with proper spine, kidneys, and musculoskeletal detail using transparency) will make the tool far more intuitive, educational, and engaging — directly supporting the goal of living 120+ years with evidence-based interventions.

This builds directly on the existing canvas + PNG approach (no SVG line art needed).

Related discussion: Arm/leg muscles vs. bones with transparency to hide/reveal layers as needed.

---

Labels suggestion: enhancement, visualization, anatomy, ui, canvas

Ready to implement in phases if preferred (e.g., Phase 1: spine + kidneys + basic layers; Phase 2: full musculoskeletal + limb details).