Playing “about:dino”…With Your Brain

Using Brain-Computer Interfaces to Control Chrome’s “about:dino”

There’s probably been a time when you haven’t had access to the internet. It sucks I know, but that also means you’ve seen this:

Chrome’s “about:dino”

Yeah, the super cool dinosaur game that goes on forever, where you’re jumping over cacti and ducking from birds.

Fun fact: Want to procrastinate? Search up “about:dino” in Chrome, and you can play without going offline 😉.

This game is played by clicking your spacebar, but what if you could do it with your mind instead? Well, I was able to do this using something called Brain-Computer Interfaces (BCIs) 🧠.

How do BCIs Work?

A BCI is essentially a collaboration between the brain and a computer. BCIs use brainwaves to direct external activity in other devices.

For this project I was able to optimize my eye blink artifacts 👁. This means that an EEG picked up on the noise that was produced when I blinked, and then that caused the dinosaur to jump. This was all done using EEG technology, Web Bluetooth, and a bunch of extracted code.

How’d I do it…? 🤔

1. Hardware

For this project, I used a 2016 Muse Headband. This is a EEG-based Bluetooth headband that uses electrodes to pick up brain activity.

Muse 2016 Headband

2. Web Bluetooth

I paired the headband to something called Web Bluetooth, which enables communication between Bluetooth devices and browsers. Currently, the securest browser that uses Web Bluetooth is Google Chrome🔒.

3. The Code

I start by extracting the code of the game into a standalone HTML page.

Then, through a terminal, I initialize a new NPM software, install Muse-JS, and SystemJS. SystemJS (a module loader) is used to load muse-js library and rxjs.

npm init -y
npm install --save muse-js
npm install --save systemjs

This following code is then inputted into the index.html page.

   <script src="node_modules/systemjs/dist/system.js"></script>
<script>
   System.config({
      packages: {
         'muse-js': {
            defaultJSExtensions: true,
            main: 'muse.js',
         },
         'rxjs': {
           defaultJSExtensions: true,
         }
       },
       map: {
          'rxjs': 'node_modules/rxjs/',
          'muse-js': 'node_modules/muse-js/dist'
       }
   });
   SystemJS.import('brain.js');
   const { MuseClient, channelNames } = require('muse-js');

This code loads SystemJS and defines where to find the muse-js and rxjs modules (inside node_modules). The last part of the code loads a file called brain.js, which allows the game to be controlled by eye blink artifacts.

The following code implements the brain.js file.

const { MuseClient, channelNames } = require('muse-js'); 
require('rxjs/add/operator/filter');
require('rxjs/add/operator/map'); 
async function connectToMuse() {
    const client = new MuseClient();
    await client.connect();
    await client.start();
    const leftChannel = channelNames.indexOf('AF7'); // Left eye electrode           
    const blinks = client.eegReadings
        .filter(r => r.electrode === leftChannel)
        .map(r => Math.max(...r.samples.map(Math.abs)))
        .filter(max => max > 400);
     blinks.subscribe(() => {
        console.log('Blink!');
    });
} 
window.connectToMuse = connectToMuse;

This code initializes the muse client, and then filters through the blinks detected.

The code runs a specific noise threshold 🔊. When the noise caused by the blinks exceeds this threshold, the dinosaur jumps. Different values work in different environments, ex. loud environments usually work better with 400–500 thresholds.

Using the following code, I created a sensitivity range for the noise threshold to allow the min/max to be changed while controlling the game.

<p>
Sensitivity:
<input id="sensitivity" value="400" type="range" min="50" max="1000">
</p>

Next, I added a “connect” button to the index.html page.

<div>    
     <button onclick="connectToMuse()"> Connect </button>
</div>

Lastly, the game is based on using the spacebar to jump, so I simulated a DOM keydown event, which will cause the game to believe that the user hit the spacebar, but it’s eye blink artifacts. The following code is added after the brain.js file.

blinks.subscribe(() => {
    const jumpEvent = new Event('keydown');
    jumpEvent.keyCode = 32; // Space key
    document.dispatchEvent(jumpEvent);
});

Demo

I bet you want to see the game in action 🦖. In order for the game to run, a live-server is used to run the HTML page. Here’s a demo of what I created:

Demo: Using Your Brain to Control “about:dino”

Yeah, I was able to control a game using my brain and Web Bluetooth, but this is just the beginning. Think about everything else we can control. The possibilities are endless.

We’re looking at a life controlled by BCIs, whether it’s for disrupting healthcare by rehabilitating people with quadriplegia, revolutionizing the education system by merging man and machine, or for now, jumping over cacti 🌵. BCIs are the future.

Hey! If you liked the project leave some claps 👏, feel free to follow me on Medium, and connect with me on Linkedin!