NeuroBand: A Practical EEG-fNIRS Headband for Everyday Brain-State Tracking

Figure 1. Raw and filtered EEG signals from the first 10 seconds of recording.
Top: Raw EEG signals from eight electrode channels, showing a large amount of background
activity that masks the underlying alpha wave rhythms. Bottom: Alpha-band filtered EEG (8-12
Hz) from the same eight channels, after noise removal.
Figure 2. Power spectra of raw and filtered EEG signals.

Left: Power spectrum of raw EEG data across 8 channels, showing broad activity. Right: Power
spectrum of alpha-filtered EEG (8-12 Hz), displaying a peak in the alpha range after noise
removal.

Code:
// 🧠 BrainImation: High-Contrast Brain Particles (final, no presets)
// Big changes over 30–60s: widened density, stronger color drift, boosted calm vs.
focus contrast.
let pts = [];
let t = 0 ;
// smoothed EEG (EMA)
const S = { att: 0 , alp: 0 , the: 0 , bet: 0 , med: 0 , connected: false };
const EMA = 0.15 ; // smoothing for signals
let targetSmooth = 120 ; // eased particle count
function setup(){
colorMode( HSB , 360 , 100 , 100 , 1 );
noStroke();
for ( let i= 0 ;i< 120 ;i++) pts.push(makeP());
}
function draw(){
// --- safe EEG read + normalize ---
const e = ( typeof eegData!== 'undefined' ) ? eegData : {};
S .att = lerp( S .att, clamp01(norm(e.attention)), EMA );
S .alp = lerp( S .alp, clamp01(norm(e.alpha)), EMA );
S .the = lerp( S .the, clamp01(norm(e.theta)), EMA );
S .bet = lerp( S .bet, clamp01(norm(e.beta)), EMA );
S .med = lerp( S .med, clamp01(norm(e.meditation)), EMA );
S .connected = !!e.connected;
// --- contrast boost (stronger than before) ---
const A = expand( S .att, 2.2 ); // attention (focus)
const AL = expand( S .alp, 2.5 ); // alpha (calm)
const TH = expand( S .the, 1.6 );
const B = expand( S .bet, 1.6 );
const M = expand( S .med, 1.8 );
// --- particle count: MUCH wider range ---
const target = map( A , 0 , 1 , 50 , 500 );
targetSmooth = lerp(targetSmooth, target, 0.06 );
const need = Math .round(targetSmooth);

if (pts.length < need) while (pts.length < need) pts.push(makeP()); else pts.length =
need ;
// --- background trails: calmer -> heavier smear ---
const calm = clamp01( 0.6 * AL + 0.4 * M );
const trail = lerp( 0.08 , 0.30 , calm);
background( 220 , 30 , 10 , trail);
// --- stronger color/time drift so frames differ more ---
t += 0.006 + 0.035 *( 0.6 * B + 0.4 * A );
const hueDrift = t * 140 ;
// --- particles ---
for ( const p of pts){
// calm ↓ jitter, focus ↑ energy
const shake = 0.008 + 0.030 *( 0.7 *( 1 - AL ) + 0.3 * A );
p.vx = (p.vx + random(-shake, shake)) * 0.993 ;
p.vy = (p.vy + random(-shake, shake)) * 0.993 ;
p.x = (p.x + p.vx + width ) % width;
p.y = (p.y + p.vy + height) % height;
const hue = (p.h + hueDrift + A * 55 ) % 360 ;
const bri = lerp( 36 , 96 , B );
const size = 3 + TH * 22 + AL * 2.5 ; // calm -> slightly larger
fill(hue, 70 , bri, 0.92 );
ellipse(p.x, p.y, size, size);
}
// --- links: longer range with focus; stronger opacity when calm ---
const maxD = lerp( 85 , 150 , A );
const maxD2 = maxD*maxD;
strokeWeight( 1.6 );
for ( let i= 0 ;ilet links = 0 ;
const p = pts[i];
for ( let j=i+ 3 ; jconst q = pts[j];
const dx=p.x-q.x, dy=p.y-q.y, d2=dx*dx+dy*dy;
if (d2 < maxD2){
const d = sqrt(d2);
const a = map(d, 0 , maxD, 0.65 , 0 ) * lerp( 0.35 , 1.0 , AL );

stroke((p.h + hueDrift)% 360 , 50 , 78 , a);
line(p.x, p.y, q.x, q.y);
links++;
}
}
}
noStroke();
if (! S .connected){
fill( 0 , 0 , 100 , 0.9 ); textAlign( CENTER , CENTER ); textSize( 12 );
text( "Simulation active — connect headset for live EEG" , width/ 2 , height- 14 );
}
}
/* ================= Helpers ================= */
function makeP(){
return { x:random(width), y:random(height), vx:random(-. 6 ,. 6 ), vy:random(-. 6 ,. 6 ),
h :random( 360 ) };
}
function norm(v){ return ( typeof v=== 'number' ) ? (v> 1 ? v/ 100 : v) : 0 ; }
function clamp01(x){ return x< 0 ? 0 :x> 1 ? 1 :x; }
// Contrast around 0.5: y = clamp(0.5 + (x-0.5)*gain)
function expand(x, gain){ return clamp01( 0.5 + (x - 0.5 )*gain); }

I chose to attempt Option 1: Brain Art/Visualization. Using the BrainImation platform and the
“Brain Particles Template,” I created a particle network that reflects EEG states such as alpha,
beta, theta, attention, and relaxation. The goal was to make calm vs. focused states clearly
visible over time. Each signal influences how the system behaves and changes. When attention
levels rise, the number of particles increases, the network becomes denser, and the overall
energy of the visualization grows. When alpha and meditation levels are higher, indicating a
calmer state, the motion slows, trails become thicker, and the layout appears more spread out
and fluid. The result is an ongoing visual shift between states of focus and relaxation, displaying
the changing rhythms of the brain over time.
The code was written in p5.js and runs directly on BrainImation’s live EEG interface. The system
is built from a particle simulation where each node has its own position, velocity, and color that
update continuously inside the draw loop. To ensure smooth transitions, the EEG data is
normalized and averaged over time so that minor fluctuations don’t cause abrupt jumps. I also
applied a contrast function that amplifies differences between low and high signal values,
making even small EEG changes visible. Each brainwave frequency controls a specific aspect
of the animation: attention affects how dense and fast the particle field becomes, alpha reduces
jitter and increases particle size, beta controls brightness and energy, theta influences
movement and flow, and meditation adjusts the transparency of the background. The color of
each particle gradually shifts, and nearby particles link to one another with thin glowing lines,
forming network-like clusters that constantly rearrange as the EEG data changes.
The biggest challenge was that some displays reacted too fast, creating chaotic movement that
didn’t clearly represent mental states. Slowing things down helped, but the visuals then became
too static. It took repeated fine-tuning of smoothing, opacity, and color range before the
differences between focused and calm states became obvious. Adjusting the transparency of
the background was another issue. If the trails were too faint, the network disappeared quickly,
but if they were too opaque, the screen became crowded and difficult to read. Getting this
balance right made the motion feel continuous while still showing contrast between brain states.
I also had to experiment with the range of particle density to make sure the visualization showed
clear shifts within a 30–60 second period.

Working on this project taught me a lot about how to turn raw EEG data into something visual
and understandable. I learned that small adjustments to data smoothing, scaling, and visual
mapping can completely change how a viewer perceives the output. It gave me hands-on
experience using real-time rendering in p5.js and helped me understand how dynamic data can
be represented in a way that communicates changes in an intuitive and engaging way. More
broadly, it showed me how both technical and creative decisions contribute to effective data
visualization. The project ultimately strengthened my ability to work with real-time biological data
and helped me see how programming, signal processing, and design come together to
represent complex information clearly and meaningfully.

Part 1: BCI Innovation: Beyond Basic Control
For Part 1, I built a brain–computer interface that detects four cognitive states, calm, focused,
stressed, and drowsy, and automatically adjusts a “Flow Game” in real time based on those
states. The goal was to create a closed feedback loop between the user’s brain activity and the
game’s difficulty, keeping performance in an optimal flow zone.
The system continuously reads attention and meditation values from BrainImation’s EEG stream
and smooths them to reduce noise and erratic fluctuations. In BrainImation, the attention and
meditation values are derived from underlying EEG rhythms, primarily reflecting the balance
between beta activity (linked to alertness and focus) and alpha activity (linked to relaxation).
Higher beta relative to alpha typically indicates focused or stressed states, whereas increased
alpha activity reflects calmness or drowsiness. Using defined thresholds, it classifies the current
mental state. Each state generates a distinct visual theme: calm shows soft circles and cool
colors, focused displays bright connecting lines, stress produces sharp red triangles, and drowsy
uses slow, dim squares. At the same time, the game’s target moves faster or slower depending on
the EEG input. High attention or stress slows it down (making it easier), while low attention or
relaxation speeds it up (making it harder). When the game worked as intended, the target became
easier to hit during stress and harder when relaxed, showing the brain’s responsiveness.
This setup goes beyond a simple BCI that just maps brainwave strength to movement or color. It
uses multi-state detection and adaptive control, similar to commercial neurofeedback systems
that automatically balance difficulty to maintain engagement.
Through this project, I learned how sensitive real-time EEG data can be, and how critical
smoothing and thresholding are to prevent constant state switching. I also noticed how adaptive
difficulty makes the interaction feel more natural; easier when relaxed and more demanding
when focus drifts. Overall, it shows how a BCI can combine cognitive neuroscience and
interactive design to create a responsive experience.
Part 1 Youtube Link (this is also attached as a separate file):

Part 2: P300 Oddball ERP
This experiment measured the P300 event-related potential (ERP) using a visual oddball
paradigm implemented in BrainImation. The P300 was chosen because it is a well-established
ERP component associated with attention, working memory, and stimulus evaluation. It typically
appears as a positive voltage deflection about 300 ms after a rare or unexpected event, with its
amplitude reflecting the attentional resources devoted to categorizing that stimulus.

Two types of stimuli were presented: frequent standard trials (blue circles, 80% probability) and
rare oddball trials (red circles, 20% probability). Each trial lasted one second, spanning an epoch
window from −200 ms to +800 ms relative to stimulus onset. The pre-stimulus interval (−200 to
0 ms) served as a baseline for correction to center the averaged waveform near zero. EEG data
were streamed at 256 Hz from BrainImation’s simulated Muse interface and recorded from four
electrodes (TP9, AF7, AF8, TP10).
Following each stimulus, the most recent EEG segment was captured, baseline-corrected, and
sorted by condition (standard or rare). The last twenty epochs per condition were averaged to
reduce noise and reveal stable ERP patterns. The ERP panel displays blue (standard) and red
(rare) traces aligned to stimulus onset, with 100 ms tick marks to visualize the temporal course of
neural responses. A separate display panel shows the current stimulus for intuitive feedback.
Brain-state detection was also integrated using attention and meditation metrics to classify each
trial as calm, focused, drowsy, or stressed. This enabled analysis of how cognitive state
influenced ERP. Based on prior findings, larger and earlier P300 peaks were expected during
focused states, while smaller or delayed peaks were anticipated during drowsiness or stress.
Overall, this setup effectively reproduces a classic P300 oddball paradigm while extending it to
examine how cognitive states affect attention-related brain activity.
Part 2 Youtube Link (this is also attached as a separate file):