Overview
Electroencephalography (EEG) is a non-invasive neuroimaging methodology used to record the brain's spontaneous electrical activity over time. The electrical potentials recorded represent the postsynaptic currents of thousands of spatially aligned pyramidal neurons firing synchronously within the underlying cerebral cortex. To ensure consistency, reproducibility, and clinical validation across varying skull geometries and patient demographics, the international scientific community standardized electrode placement utilizing the 10-20 International Electrode Placement System, developed by Herbert Jasper in 1958. This anatomical reference framework maps electrodes based on relative proportions of the skull rather than absolute metrics, compensating for individual developmental variances.
The standard 10-20 system designates 19 active scalp channels mapped across key cortical divisions: prefrontal, frontal, central, parietal, temporal, and occipital lobes. The nomenclature consists of alphabetical letters representing regional cortex lobes (Fp: Prefrontal, F: Frontal, C: Central, T: Temporal, P: Parietal, O: Occipital) combined with numeric values. Even numbers (2, 4, 6, 8) designate locations in the right hemisphere, odd numbers (1, 3, 5, 7) represent the left hemisphere, and the letter "z" (Zero) denotes mid-sagittal midline electrodes. The "10" and "20" prefixes refer to the relative percentages (10% or 20%) used to divide the total front-to-back (Nasion to Inion) and left-to-right (preauricular points) cranial skull distances.
As neurotechnology and high-density EEG research progressed, the standard 10-20 system was modified to accommodate higher spatial resolution arrays. This led to the creation of the 10-10 Extended System (often referred to as the Modified Combinatorial Nomenclature). The 10-10 system increases density by subdividing the standard 20% intervals into finer 10% steps, supporting up to 81 scalp electrodes. This extended layout provides detailed diagnostic mapping essential for isolating localized epileptogenic zones, evaluating motor cortex dynamics in brain-computer interfaces (BCIs), and analyzing spectral power distributions in clinical research.
How to Use
This interactive laboratory simulates the top-down projection of standard cranial electrode arrays. Use the tools below to investigate the spatial dynamics of both standard layouts:
System Selection: Use the "Standard 10-20" or "Extended 10-10" toggle buttons in the Instrument Console to switch between the standard 19-channel clinical array and the high-density 81-channel research array. The visualizer instantly remaps the grid and scales the target coordinates dynamically.
Interactive Scalp Exploration: Hover your mouse cursor (or drag your finger on mobile viewports) across the interactive head graphic. The simulator will automatically detect the nearest electrode using distance threshold algorithms, highlight the node with a neon-glowing outline, draw electrical field lines, and provide coordinate telemetry inside the Active Node Readout.
Regional Filtering: Click the "Filter by Cortical Lobe" dropdown list to isolate specific cortical systems. Selecting a region (such as Occipital or Prefrontal) dims non-selected lobes so you can study the anatomical boundaries of localized recording montages.
Spatial Query Search: Use the "Electrode Query Search" input box to search for specific nodes. Typing a coordinate name (e.g. "Cz" or "O1") will automatically focus the visualizer's attention on that node, triggering a distinct highlight circle and focusing the readout.
Cranial Sonification Engine: Toggle the "Audio" button in the top-right of the control panel to enable the real-time sound synthesizer. As you explore the head layout, the simulator maps the spatial $(X, Y)$ coordinates of the focused node into synthetic audio frequencies, transforming visual coordinates into relative soundscapes.
Propagation Demo Mode: Press the "Start Propagation Demo" button to observe an automated anterior-to-posterior electrical sweep across the head. Any user click, touch, slider movement, or manual search input will instantly terminate the demo mode and restore the console to your exact baseline configuration.
Technical Details
To eliminate Cumulative Layout Shift (CLS) on mobile viewports, this single-page laboratory utilizes a strictly pre-allocated CSS aspect ratio (`aspect-ratio: 16/9` on desktop and `aspect-ratio: 1/1` on mobile) inside the parent visualizer container, reserving layout boxes before rendering logic begins. Explicit inline properties are defined on standard images, and ad containers are wrapped in minimum-height blocks (`min-height: 250px`) to prevent page shifting during Google Auto Ad injection cycles.
Cranial coordinates are mapped using standard Python-to-Javascript projection formulas. Scalp coordinates, modeled from standard EEG layouts with the origin $(0.0, 0.0)$ situated directly at the Central midline vertex (Cz), are mapped dynamically to the canvas canvas layout. The nose is oriented towards the top ($+Y$), and the left preauricular point maps towards $-X$. Coordinates are scaled proportionally relative to the current viewport dimensions using the formula:
x_{canvas} = x_{center} + (x_{eeg} \times r_{head} \times s_{factor})
y_{canvas} = y_{center} - (y_{eeg} \times r_{head} \times s_{factor})
Projection transformation from 2D relative coordinates to screen pixel coordinates
The auditory sonification uses the HTML5 Web Audio API, utilizing a standard `OscillatorNode` combined with a `GainNode` to synthesize clean sine waveforms. Frequencies are dynamically computed relative to spatial coordinate indices using a baseline logarithmic scale: $f(y) = f_{base} \cdot 2^{y \cdot s_{scale}}$. Boundary safeguards are checked on every update to guarantee stable execution. High-DPI screens are normalized by querying `window.devicePixelRatio` and scaling the backing canvas grid elements during resizing events, preserving high visual clarity on high-density screens.
Future Directions
Future development phases for this laboratory focus on integration and expanded dimensions:
- Dynamic 3D Mesh Mapping: Transitioning the 2D cranial visualizer into a responsive 3D head model leveraging WebGL and Three.js, supporting real-time rotation and standard 3D coordinate transformations.
- Impedance Testing Simulator: Adding interactive clinical simulation cases where users can check impedance metrics (target $< 5\text{ k}\Omega$) on various nodes, preparing student technicians for clinical competency tests.
- Live LSL/Bluetooth Streaming: Interfacing with portable consumer hardware systems (like OpenBCI or Muse) via Lab Streaming Layer (LSL) or Web Bluetooth APIs to stream and display active scalp signals.
- Interactive Artifact Rejecter: Integrating synthetic ocular blinks (EOG) and muscle clenching (EMG) artifacts to demonstrate the impact of physiologic interference on time-domain spectral bands.