The Wearable Brain Monitor: Engineering a Consumer-Ready Device

Brainwave Visualization Using Ocean Waves and the Sky
By: Grace Shin
For this project, I decided to use real-time brain wave data to create a visualization. I wanted to create an
artistic expression that shows different states of the mind, whether that would be calm or alert. To do this,
I designed a visualization that shows the waves of an ocean, as well as a gradient sky that both respond in
real time to EEG signals from either the simulation data or real-time data.
The concept of the ocean visualization is to depict sea waves that exist under a shifting sky. I took
inspiration from the alpha waves visualization, where brain wave activity such as alpha and beta
frequencies affect how the waves move. When a user is more relaxed with higher alpha waves, the ocean
waves are coded to become smoother and slower, while the sky and ocean colours turn warm and bright.
When the user is alert or focused with higher beta waves, the ocean becomes choppier to represent the
mental state, while the sky turns cooler. This essentially depicts the state of the mind using a visualization
of nature.
For the technical implementation, I used the BrainImation platform with P5.js to build the visualization.
By using the simulation data provided by the website, I was able to test my code as if it was using brain
waves in real-time, and see how the scenery changed with the changes in alpha and beta frequencies. By
using values such as eegData.alpha, eegData,beta, eegData.theta, and eegData.meditation, I was able to
create different visualizations based on the parameters. For example, the alpha waves control the
smoothness, beta controls turbulence, theta shifts the colour, and meditation changes the brightness. The
ocean uses layered sine waves to create the wave-like motion, and the colours used are supposed to create
a calming, aesthetic scenery.
A challenge I had was finding a form of visualization of the waves that would ensure a smooth animation
while being aesthetically pleasing. At first I felt that the waves by themselves looked too simple, and
decided to incorporate the gradient colour changing sky in order to create a better imagery. As well, to
smooth out the fluctuations in wave frequencies, I used smooth mapping to create better transitions.
Though having no headset or real-time data was a bit challenging, I felt that the simulation data provided
by BrainImation was useful in letting me test and visualize how my code worked when values fluctuated.
Overall, I learned a lot from this project, such as how coding and neuroscience don’t always have to be
something non-creative or non-artistic. I saw how one could incorporate artistic expression into
neuroscience and technology through this assignment. By creating code that visualizes the mental state of
a user using real-time brainwaves from EEG data, I was able to merge the two worlds of art and science
together in a way where it was more tangible to understand concepts that seemed a bit more intimidating
before. By mirroring the user’s mind in a natural setting through the calm and aesthetic visualization of
ocean waves and a gradient sunrise sky, I was able to achieve this.

Code pasted here as google forms would not let me upload the .js file:
// inspired by alpha wave visualization
// creates different wave speed and smoothness based on the user's brain
state
// by: Grace Shin
let t = 0 ;
function setup () {
colorMode (HSB , 360 , 100 , 100 , 1 ) ; // set to hsb to easily control
noStroke () ;
}
function draw () {
// sky (gradient) - changes from teal to pink depending on theta
activity, where low theta makes sky cooler (bluish) and high theta makes
it look warmer (pinkish) to represent meditative state
let skyHue = map (eegData . theta , 0 , 1 , 200 , 320 ) ; // teal to pink tones
let skyBright = map (eegData . meditation , 0 , 1 , 25 , 85 ) ; // brightness
also increases with meditation level
for ( let y = 0 ; y < height * 0.7 ; y ++ ) {
let inter = map (y , 0 , height * 0.7 , 0 , 1 ) ;
let hue = lerp (skyHue , skyHue + 40 , inter) ;
let bright = lerp (skyBright , 25 , inter) ;
stroke (hue , 40 , bright) ;
line ( 0 , y , width , y) ;
}
// ocean waves
fill (skyHue - 20 , 60 , 70 , 1 ) ; // base colour
beginShape () ;
for ( let x = 0 ; x <= width ; x += 10 ) {
let nx = x * 0.01 ;
let waveBase = height * 0.65 ;
// shape of the waves differ based on brain waves
let calmFactor = map (eegData . alpha , 0 , 1 , 1.2 , 0.5 ) ; // changes how
smooth or wavy the waves look, higher alpha = smoother waves

let turbulence = map (eegData . beta , 0 , 1 , 0.4 , 1.4 ) ; // adds random
motion based on beta activity (stress/alertness)
let y = waveBase +
sin (nx * 3 + t) * 40 * calmFactor * turbulence + // combine
sine waves to create natural wave pattern
sin (nx * 1.3 + t * 0.6 ) * 25 * calmFactor ;
vertex (x , y) ;
}
vertex (width , height) ;
vertex ( 0 , height) ;
endShape (CLOSE) ;
// speed gets slower with calmness
// waves slow down with calmness (higher alpha)
let calmness = (eegData . alpha + eegData . meditation ) / 2 ;
let baseSpeed = 0.02 ;
let calmSpeed = map (calmness , 0 , 1 , 1.2 , 0.3 ) ; // 1.2x when stressed to
0.3x when calm
t += baseSpeed * calmSpeed ;
// for simulation / realtime data
if ( ! eegData . connected ) {
fill ( 0 , 0 , 100 , 0.9 ) ;
textAlign (CENTER , CENTER) ;
textSize ( 20 ) ;
text ( " Connect your Muse headset or use 'Simulate Data' ", width / 2 ,
height / 2 - 10 ) ;
textSize ( 16 ) ;
fill ( 0 , 0 , 70 , 0.7 ) ;
text ( " and observe how the waves slow when you relax ", width / 2 ,
height / 2 + 20 ) ;
}
}

Part 1
The novel BCI concept I implemented was target brain state training (neurofeedback). This
implementation was built based on my previous wave visualization, but introduces an adaptive
neurofeedback element that aids users in training their calmness in real time. Rather than simply showing
brain activity visually, this project uses a feedback loop where sustained calmness is represented by a
progress bar.
The program works by reading real-time EEG data and using alpha and meditation levels as indicators of
relaxation, while beta and theta levels affect color and motion. Since the user is able to see these values
translated into visual changes in the form of ocean waves, it is easier for them to track and regulate their
calmness level. As there is also the addition of a calmness bar to indicate their level of calmness, this
program creates a feedback loop where the user can learn to associate mental calmness with stable,
tranquil visuals and simultaneously track their levels numerically too.
What differentiates it from a basic parameter control system is that the user is able to self-regulate rather
than something direct. The user is not consciously controlling something, but rather using their
physiological state to drive the experience. As the visuals of the program respond to fluctuations in brain
activity in real-time, this allows the user to focus and practice self-regulation rather than control.
I learned, through implementing this project, how small EEG changes can be visually represented through
real-time feedback, and how smoothing and timing are important for the user experience to be coherent.
As well, I was able to gain insight into how neurofeedback interfaces can promote mindfulness and
self-regulation through allowing users to see their mental state change in real-time. Though it was harder
to see changes and test the program due to using simulation data, it was overall a very interesting learning
experience where I could create something that allowed humans to self-regulate through their own
mindful control.

Part 2
For this experiment, I chose to measure the P300 (P3) component, which is one of the most well-studied
event-related potentials in cognitive neuroscience. The P300 is a positive wave that appears around 300 to
600 milliseconds after a person detects something unexpected or important. It’s linked to how the brain
allocates attention and updates working memory when something stands out from what it expects. The
component was first discovered by Sutton and colleagues in 1965, and it’s often studied using what’s
called an “oddball” paradigm, where rare or target stimuli are mixed in with frequent standard ones.
In my experiment, I used a simple visual oddball setup with two stimulus types: a blue circle representing
the frequent (standard) condition and a red circle representing the rare (target) condition. The rare
stimulus appears on about 20% of trials, while the frequent one appears 80% of the time. Each trial starts
with a short baseline period, followed by a brief stimulus display and then a rest phase. The idea is that
the rare stimuli are unexpected and grab more attention, which should produce a larger P300 response
compared to the frequent ones. The timing is controlled so that each trial lasts 1.5 seconds, with an epoch
window of -200 to +800 milliseconds around the stimulus.
The system collects EEG epochs separately for each stimulus type and averages them over multiple trials.
Averaging reduces random noise and highlights the consistent response patterns related to the stimuli. The
code displays both averaged ERP traces on the same graph, with the rare and frequent conditions in
different colors, so it’s easy to compare them. The display also includes labeled time markers, a zero line
at stimulus onset, and counters showing how many trials have been collected for each category. Over
time, as more trials are added, the ERP plots become smoother and more distinct.
If this were tested with real EEG data, I would expect to see a clear positive bump (the P300) between
about 300 and 600 milliseconds after the rare stimulus, while the frequent stimulus would show a smaller
or flatter response in that same window. This difference reflects the brain’s stronger orienting response
and attention allocation to the rare, task-relevant stimuli.