Somatosensory Explorer

Demo Mode Active

Overview

The somatosensory cortex is a band of tissue in the brain responsible for processing sensory information from across the body, such as touch, temperature, and pain. However, this "map" of the body in the brain is not scaled to the actual physical size of your body parts.

Instead, it forms a distorted representation known as the Cortical Homunculus (Latin for "little man"). In this map, the amount of brain tissue dedicated to a body part is proportional to how sensitive that part is, not how large it is.

Because our hands, fingers, lips, and tongue are packed with sensory receptors to help us interact with the world intricately, they take up a massive amount of "real estate" in the brain. Conversely, large areas like the back or legs have fewer receptors per square inch and take up surprisingly little cortical space.

How to Use

Interact: Click or tap on the body parts listed in the selection panel. The visualization instantly updates to compare the actual physical size proportion of that body part to its representation size in the brain's cortex.

Sonification: Toggle the "Sound" button. When active, selecting a body part generates a synthesized tone. The frequency (pitch) of the tone corresponds directly to the cortical area size. Highly sensitive areas like hands produce a notably higher pitch.

Demo Mode & Reset: Click "Play Demo" to automatically cycle through the body parts. If you leave the page idle for 10 seconds, the demo will automatically start. Any direct touch, click, or keystroke will stop the demo. Use the "Reset" button to return all settings and visualizations back to their starting baseline.

Technical Details

This simulation is engineered entirely within a single HTML file utilizing vanilla JavaScript, CSS variables, and the HTML5 Canvas API for high-performance rendering without reliance on heavy external frameworks.

Rendering Optimization: Custom drawing routines scale to device pixel ratios dynamically. State transitions are processed through a non-blocking requestAnimationFrame loop, ensuring Interaction to Next Paint (INP) targets remain under 200ms for immediate touch responsiveness.
Web Audio API: Synthesizes tones via oscillator and gain nodes. Strict mobile browser compliance ensures audio contexts remain safely suspended until an explicit user gesture occurs.
Responsive Architecture: Implements CSS Flexbox to fluidly adapt the viewport layout across desktop and mobile devices, converting sidebars into horizontal scrollable rails while preserving touch-action zones to prevent unwanted page scrolling during interaction.

Future Directions

While this current iteration elegantly abstracts area mapping for foundational understanding, future educational modules may implement:

A manipulatable 3D brain model highlighting the specific topography of the postcentral gyrus.
Comparative toggle features visualizing the distinct differences between sensory input maps and motor output maps.
Interactive two-point discrimination mechanics demonstrating why back skin processes two physical points as one, while fingertips maintain millimeter precision.