Forem: Neurosity

🎸 + 🧠 = Mind-Controlled Guitar Effects

Alex Castillo — Tue, 29 Dec 2020 19:31:31 +0000

Traditionally, guitar players have used foot pedals to control their guitar sound. Pedals allow you to change volume, apply effects, modulate sound, and all sorts of awesome sound combinations without using your hands, so you can focus on playing.

Today, we'll be using a Brain-Computer Interface and our thoughts to control the sound of an electric guitar.

// Detect dark theme var iframe = document.getElementById('tweet-1331285114941104128-310'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1331285114941104128&theme=dark" }

Let's do this.

Communication

For this experiment, we won't be using a traditional guitar amplifier, but instead a software-only guitar plugin. So we'll be plugging in the electric guitar to a USB Audio Interface like this one.

The communication from the Node.js app will happen via MIDI which stands for Musical Instrument Digital Interface. For that, we'll use the easymidi library.

npm install easymidi

This awesome package will allow us to send commands to the guitar plugin app via Node.js.

Now, let's create a virtual MIDI output.

import { Output as Midi } from "easymidi";

const midi = new Midi("Notion", true);

If we run this code, our new MIDI output is ready to be detected by the guitar plugin.

node index.js

Guitar Plugin

I've traditionally used hardware units like the AXE-FX for designing my guitar tone, but lately, I've been playing around with the Neural DSP guitar plugins, and so far I'm loving it.

We'll be using their Archetype: Cory Wong plugin which comes with a neat MIDI utility that we can use map MIDI commands to different sound settings like Presets Changes, Amp Types, Gain, Effects, etc.

You can download a free trial here.

Let's open the standalone plugin and go to Settings (gear icon) located at the bottom left corner of the plugin. Next, let's check the the Notion input under "MIDI Inputs Devices".

💡 The input will show as long as the Node.js app is running.

That's the MIDI device we created in Node with 2 lines of code!

Next, let's go to Midi Mappings by clicking on the icon next to Settings.

I've added 1 MIDI setting and configured it control the strength of the Wah-ng Wah effect based on the value we send from Node.js.

Mind Control

Now let's put everything together.

First, let's install the Notion API.

npm install @neurosity/notion

🤯 The Notion API enables full communication between the headset and your apps, in our case Node.js. We'll use it to get real-time feedback based on our cognitive state. For this app, we'll work specifically with the Focus and Kinesis metrics.

Check out the docs

import { Notion } from "@neurosity/notion";
import { Output as Midi } from "easymidi";
import { tween } from "./utils/tween";
import { email, password } from "./options";

const midi = new Midi("Notion", true);
const notion = new Notion();
await notion.login({ email, password });

notion
  .predictions("rightFoot")
  .pipe(tween({ from: [0, 1], to: [0, 254] }))
  .subscribe((value) => {
    midi.send("cc", { value });
  });

Let's break this code down:

We create a new Notion and call login using a Neurosity account credentials
Subscribe to motor imagery predictions metrics
Then, we use the tween utility function to map focus scores from 0 to 1 to their corresponding MIDI value (0-254) AND interpolate all values in between to smooth out the knob change
Lastly, we send a CC MIDI command to the Neural DSP plugin
View full code

At this point, the guitar plugin modulates the Wah-ng Wah effect when you think of moving your right foot.

But, what we wanted to change the guitar preset similar to how we would do it with a pedalboard?

For that, we can use Notion's Kinesis API to train our command leftFoot and activate Preset Next via MIDI command by just thinking about your left foot pushing down.

notion
  .kinesis("leftFoot")
  .subscribe(() => {
    midi.send("program", { channel: 0 });
  });

Conclusion

We, humans, spend most of our lives translating our thoughts into hand movements in order to interact with the world around us.

Would you believe me if I told you the average person presses, taps, and clicks around 3.5 million times a year?

To learn more about the brain, the electrical activity produced by our neurons, and how we can empower the mind, check out my TEDx Talk.

Using 🧠 BrainFlow with the Neurosity headset

Alex Castillo — Wed, 23 Sep 2020 20:21:31 +0000

The Neurosity OS features a full JavaScript SDK for web apps. But what if you want to use other awesome programming languages to get brainwaves?

Enter BrainFlow.

BrainFlow is multi-purpose biosensor library that provides a uniform data acquisition API for many devices.

You can use BrainFlow in Python, Java, C#, C++, R, Matlab, and Julia.

BrainFlow is ideal for:

Research
Unity Integration
Unreal Engine Integration
Neuroscience Experiments

Enabling BrainFlow

1) Open Neurosity's Developer Console
2) Go to Settings by clicking the ⚙️ gear icon next to your device's name
3) Enable Open Sound Control (OSC)

The OS running on your Neurosity device is now streaming data to BrainFlow via OSC.

We recommend disabling OSC if you are not using BrainFlow as it will consume extra battery life.

Installing BrainFlow

In this example we'll use Python 3 to work with BrainFlow.

Install the latest release from PYPI with the following command in terminal:

python -m pip install brainflow

📖 For installation instruction for other languages, please visit the BrainFlow docs.

Getting real-time brainwaves

Next, create a new file called brainflow-test.py and add the following snippet to it:

import brainflow

from brainflow import BoardIds
from brainflow.board_shim import BoardShim, BrainFlowInputParams
from brainflow.data_filter import DataFilter, FilterTypes, AggOperations

def main ():
    board_id = BoardIds.CROWN_BOARD.value # or BoardIds.NOTION_2_BOARD.value or BoardIds.NOTION_1_BOARD.value
    params = BrainFlowInputParams ()
    params.board_id = board_id
    BoardShim.enable_dev_board_logger ()
    board = BoardShim (board_id, params)
    board.prepare_session ()
    board.start_stream ()
    data = board.get_board_data ()
    board.stop_stream ()
    board.release_session ()

    print (data)

if __name__ == "__main__":
    main ()

Run the code via terminal.

python3 brainflow-test.py

And finally, you should see the data in the terminal.

...
 [-2.27709781e+05 -2.27785156e+05 -2.27140344e+05 -2.26998656e+05
  -2.27617781e+05 -2.27845906e+05 -2.27248578e+05 -2.26956891e+05
  -2.27517125e+05 -2.27874938e+05 -2.27355188e+05 -2.26924359e+05
  -2.27395156e+05 -2.27880234e+05 -2.27474953e+05 -2.26928188e+05
  -2.27283438e+05 -2.27850938e+05 -2.27579297e+05 -2.26961781e+05
  -2.27188766e+05 -2.27806875e+05 -2.27681078e+05 -2.27022875e+05
  -2.27094812e+05]
 [-3.49463312e+05 -3.49478594e+05 -3.49025500e+05 -3.48958906e+05
  -3.49402500e+05 -3.49527812e+05 -3.49097719e+05 -3.48925125e+05
  -3.49332969e+05 -3.49551812e+05 -3.49167250e+05 -3.48893688e+05
  -3.49243031e+05 -3.49560875e+05 -3.49251094e+05 -3.48890188e+05
  -3.49161750e+05 -3.49542906e+05 -3.49322031e+05 -3.48906938e+05
  -3.49094312e+05 -3.49517031e+05 -3.49395438e+05 -3.48944156e+05
  -3.49023562e+05]

📖 For other Python code examples like writing to a file, data transforms, and signal filtering, check out these examples.

Gotchas

Some Windows 10 users reported the following error.

brainflow.board_shim.BrainFlowError: BOARD_NOT_READY_ERROR:7 unable to start streaming session

If this is the case for you, try disabling your firewall, and try again.

EEG Notebooks

The amazing EEG Notebooks project by the NeuroTechX community now supports the Neurosity Crown device via BrainFlow.

EEG-Notebooks is a collection of classic EEG experiments, implemented in Python 3 and Jupyter notebooks. The goal is to make cognitive neuroscience and neurotechnology more accessible, affordable, and scalable.

With EEG Notebooks you can explore BCI methods such as Visual N170, P300, SSVEP, and more.

Give it a try!

NeuroTechX / EEG-ExPy

EEG Experiments in Python

Using Your Mind to Print Hello World to the Terminal with Node

AJ — Tue, 11 Feb 2020 16:09:36 +0000

I've been writing brain powered apps for years. I've written brain applications in electron mainly, which uses NodeJS. If you've got a Notion from Neurosity or want to get one, you'll find this article interesting because I'm going to show:

How to set up a NodeJS project
How to install dependencies from NPM
How to load sensitive environment variables into your NodeJS application
How to authenticate with a Notion
How to print Hello World via calm meditation
How to print Hello World via a mental Kinesis command

To begin, you'll need to set up an account one time with Neurosity via console.neurosity.co. If you don't have a Notion, join the waitlist to get one on the next batch! Learn how to create an account with Neurosity Developer Console.

Prerequisites

To download the necessary tools, clone the repository, and install dependencies via npm, you need network access.

NPM

You'll need the following tools:

Git
Node.JS
NPM, use a package manager to install.

Install and build all of the dependencies using NPM

VSCode

We'll be using VSCode to program this tutorial. For a little added fun, we recommend adding the Neurosity VSCode extension to track your flow state while programming. Check out our guide to installing and getting started with VSCode and the Notion extension.

Tutorial Repository

Want to see the complete project before reading anymore? You can view all the code from this project in it's repository on Github.

Setup your Project

Hello World Folder

Create a new folder called hello-world

mkdir hello-world

Enter into the directory and initialize the npm project.

cd hello-world
npm init

You'll need to run through the initial questions:

package name: (hello-world)
version: (1.0.0)
description: My first application using Notion
entry point: (index.js)
test command:
git repository:
keywords: notion
author: Hans Berger
license: (ISC) MIT

Next, you'll want to launch a VSCode window for the newly created project.

code .

Working in VSCode

You'll need to launch a terminal window inside VS Code, you may toggle the terminal with CTRL+~.

To create a new file, you may select the new file button.

Go ahead and make a new file called index.js, we'll use it soon as the base of our new project.

Adding Notion to a Node Project

Add `.gitignore` file

The first thing we want to do is add a file called .gitignore to tell git to ignore certain files. Add another file to the root directory called .gitignore, then add the following:

node_modules

On macOS, we'll go ahead and add another commonly ignored file:

.DS_Store

Adding node_modules will help VS Code run a little bit better because we're telling it that we don't need to track anything in that folder.

Install Dependencies

The first dependency we need to install is from Neurosity, it's called Notion. We'll end up using some environment variables from a .env file, so go ahead and install another dependency for that as well. From the command line, enter:

npm install @neurosity/notion dotenv

Add Dependencies to `index.js`

Importing libraries in Node is quite simple, all you have to do is add the following to the top of your index.js file:

const { Notion } = require("@neurosity/notion");
require("dotenv").config();

Add start script to package.json

Now head over to the file called package.json. The package.json is at the core of every Node package. Ignore the file called package-lock.json, it's automatically generated.

Find the section called "scripts" and add a property called "start" that will start the node process:

"start": "node index.js"

Your package.json will look like below once added:

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "My first application using Notion",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["notion"],
  "author": "Hans Berger",
  "license": "MIT",
  "dependencies": {
    "@neurosity/notion": "^3.8.0",
    "dotenv": "^8.2.0"
  }
}

Run the project from the CLI

Navigate back to the terminal and run npm start to make sure the project runs without any errors.

npm start

You should see the program run and exit successfully.

Add Authentication

At this point you will need to have created an account with console.neurosity.co and claimed your Notion.

Get variables from `.env` file

We'll first attempt to get our environment variables to show what happens when they are not there at runtime. Add the following code to pull the deviceId, email and password from the enviroment variables:

const deviceId = process.env.DEVICE_ID || "";
const email = process.env.EMAIL || "";
const password = process.env.PASSWORD || "";

To verify that the variables are not blank, we could add a function to check for that and quit the program if so. Add the following function to your program next:

const verifyEnvs = (email, password, deviceId) => {
  const invalidEnv = env => {
    return env === "" || env === 0;
  };
  if (
    invalidEnv(email) ||
    invalidEnv(password) ||
    invalidEnv(deviceId)
  ) {
    console.error(
      "Please verify deviceId, email and password are in .env file, quitting..."
    );
    process.exit(0);
  }
};
verifyEnvs(email, password, deviceId);

console.log(`${email} attempting to authenticate to ${deviceId}`);

Now, if we run our program, we should see an error print out! Run with npm start from the CLI.

Add `.env` file

Next, we'll add a .env to store our deviceId, login, and password. Add a new file called .env and add your deviceId, email, and password. Learn how to find your device ID.

DEVICE_ID=442333d1bcea35533daba9b51234abcd
EMAIL=hans.berger@neurosity.co
PASSWORD=Password#1!

Now, if we run our program, we should see a success message print out, informing us that our variables have been extracted successfully.

Instantiate a Notion Session

We can then use the deviceId to instantiate a new Notion session by adding the following line to our file.

const notion = new Notion({
  deviceId
});

Add async login

We need to use an async/await paradigm for authenticating to the device. Go ahead and create an async function called main to the index.js file.

const main = async () => {
  await notion
    .login({
      email,
      password
    })
    .catch(error => {
      console.log(error);
      throw new Error(error);
    });
  console.log("Logged in");
};

main();

Then run the program with npm start in the CLI. If all worked, then you should see:

Add Subscriptions

Calm Subscription

Now that you are authenticated, print out hello world when you're calm increases past 0.3, a significant number.

Add the following code to your main() function after login.

notion.calm().subscribe(calm => {
  if (calm.probability > 0.3) {
    console.log("Hello World!");
  }
});

Your index.js file is now ready to print Hello World!

Kinesis Training

Head over to the Developer Console and train Left Hand Pinch. Learn how to train an imagined movement thought. Do at least 15 trials.

When we write code to interact with Notion, we use camel case, so Left Hand Pinch in code is leftHandPinch.

Now that the leftHandPinch thought is trained, you'll be able to use load it into your Notion for use.

Kinesis Subscription

In the index.js file we can remove the calm subscription from above and replace it with the code below.

Check out the Kinesis guide or Kinesis API docs.

notion.kinesis("leftHandPinch").subscribe(intent => {
  console.log("Hello World!");
});

Your index.js file should look like:

Conclusion

Developing with Neurosity Notion can be a lot of fun! Join the waitlist to get one on the next batch. There are two main types of thought processes that Notion detects, intent and background. The foreground we consider to be the kinesis() where you're intending to do something and the background is calm() or focus() that occurs in the background of the mind.

Dive into development

We're looking for talented developers to help us improve the kinesis training. So, head over to the training guide and learn how to build your a training module.

If you're looking for exact API references, check out the API section of these docs!

🤯 Building your first Neuro App with React

Alex Castillo — Fri, 31 Jan 2020 13:52:06 +0000

Most apps today change state based on user intent. To be more specific, hand movements that translate into clicks, taps, presses, etc. Yet, every single intent starts in our brains.

Today, we are going to build a different type of app. We'll build an app that changes state based on your cognitive state.

Hear me out.

What if our app changed the motion of a WebGL ocean based on your calm level? A "visual meditation" experience driven by the way you are feeling.

View App

The first step would be to measure and access such data. And for that, we'll use a Notion headset.

Tweet Introducing Notion

Getting Started

Let's start by bootstrapping our app with Create React App (CRA). We open the project in VS Code and run the app locally.

npx create-react-app mind-controlled-ocean
code mind-controlled-ocean
npm start

If all goes well, you should see something like this:

Create React App Default View

🔑 Authentication

We believe in privacy. That's why Notion is the first brain computer to feature authentication. Adding auth to the app is pretty straightforward. For this, we'll need a login form and 3 side effects to sync the authentication state.

All you need to connect to your Notion brain computer is a Neurosity account and a Device ID. So, let's start by creating a new component for the login form that will collect this information.

// src/components/LoginForm.js
import React, { useState } from "react";

export function LoginForm({ onLogin, loading, error }) {
  const [deviceId, setDeviceId] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  function onSubmit(event) {
    event.preventDefault();
    onLogin({ deviceId, email, password });
  }

  return (
    <form className="card login-form" onSubmit={onSubmit}>
      <h3 className="card-heading">Login</h3>
      {!!error ? <h4 className="card-error">{error}</h4> : null}
      <div className="row">
        <label>Notion Device ID</label>
        <input
          type="text"
          value={deviceId}
          disabled={loading}
          onChange={e => setDeviceId(e.target.value)}
        />
      </div>
      <div className="row">
        <label>Email</label>
        <input
          type="email"
          value={email}
          disabled={loading}
          onChange={e => setEmail(e.target.value)}
        />
      </div>
      <div className="row">
        <label>Password</label>
        <input
          type="password"
          value={password}
          disabled={loading}
          onChange={e => setPassword(e.target.value)}
        />
      </div>
      <div className="row">
        <button type="submit" className="card-btn" disabled={loading}>
          {loading ? "Logging in..." : "Login"}
        </button>
      </div>
    </form>
  );
}

🖍 Add styles the form - here's the CSS I used.

This component will hold the state of the deviceId, email and password. Additionally, our form component will accept an onLogin prop that will execute when the user clicks on the "Login" button. We'll also accept a loading prop for when the form submission is in progress, and an error message prop to be displayed when an error occurs.

Now that we've created our login component, let's add a login page that will make use of our new component.

// src/pages/Login.js
import React, { useState, useEffect } from "react";
import { LoginForm } from "../components/LoginForm";

export function Login({ notion, user, setUser, setDeviceId }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [isLoggingIn, setIsLoggingIn] = useState(false);

  function onLogin({ email, password, deviceId }) {
    if (email && password && deviceId) {
      setError("");
      setEmail(email);
      setPassword(password);
      setDeviceId(deviceId);
    } else {
      setError("Please fill the form");
    }
  }

  return (
    <LoginForm
      onLogin={onLogin}
      loading={isLoggingIn}
      error={error}
    />
  );
}

The goal of this page is to display the login form, add basic form validation via the setError function, and execute a login function. For the latter, let's add a side effect that will sync with email, password and the props received the page.

useEffect(() => {
  if (!user && notion && email && password) {
    login();
  }

  async function login() {
    setIsLoggingIn(true);
    const auth = await notion
      .login({ email, password })
      .catch(error => {
        setError(error.message);
      });

    if (auth) {
      setUser(auth.user);
    }

    setIsLoggingIn(false);
  }
}, [email, password, notion, user, setUser, setError]);

You can think of user as the object that holds the auth user session set by the Notion API. So we are only calling our login() function if there is no auth session, we have a Notion instance in the state, and the user has submitted an email and password.

Very soon you'll find out how we'll receive the props: notion, user, setUser, setDeviceId. But before we do that, let's go back to our App.js and start putting it all together.

⚙️ App State

To keep this app simple, we'll just be using React's useState hook, the Reach Router, and a local storage hook brought to you by react-use 👍. This means our general application state strategy will consist of keeping the global state at the App component level and passing down the necessary props to its child components.

npm install @reach/router react-use

We'll start with a single route, but we'll add 2 more routes as we continue to build the app.

// src/App.js
import React, { useState, useEffect } from "react";
import { Router, navigate } from "@reach/router";
import useLocalStorage from "react-use/lib/useLocalStorage";
import { Login } from "./pages/Login";

export function App() {
  const [notion, setNotion] = useState(null);
  const [user, setUser] = useState(null);
  const [deviceId, setDeviceId] = useLocalStorage("deviceId");
  const [loading, setLoading] = useState(true);

  return (
    <Router>
      <Login
        path="/"
        notion={notion}
        user={user}
        setUser={setUser}
        setDeviceId={setDeviceId}
      />
    </Router>
  );
}

🏆 I found the Reach Router by Ryan Florence (and friends) to be the perfect balance between simplicity and predictability. Their documentation is extremely clear and allowed me to implement basic routing within minutes.

If you were wondering why have we decided to keep the deviceId in the local storage, it is because we'll need to access it before and after the user has logged in. It also makes a nicer user experience not to have to enter it multiple times.

🧠 Notion

Now that we have basic state management in place, let's integrate our app with Notion by installing the API and importing it in App.js.

npm install @neurosity/notion

🤯 The Notion API enables full communication between the device and the app. We'll use it to get real-time feedback based on the user's cognitive state. For this app, we'll work specifically with the calm API.

import { Notion } from "@neurosity/notion";

Connecting to a Notion device is simple. We instantiate a new Notion and pass the Device ID. We can add a side effect that sets the instance to the App component state by syncing with deviceId.

📖 You can find the full Notion documentation at docs.neurosity.co.

useEffect(() => {
  if (deviceId) {
    const notion = new Notion({ deviceId }); // 😲
    setNotion(notion);
  } else {
    setLoading(false);
  }
}, [deviceId]);

Another state we want to sync is the user state.

In the following example, we'll add a side effect that syncs with the value of the notion instance. If notion hasn't been set yet, then we'll skip subscribing to calm events until the notion instance is created.

useEffect(() => {
  if (!notion) {
    return;
  }

  const subscription = notion.onAuthStateChanged().subscribe(user => {
    if (user) {
      setUser(user);
    } else {
      navigate("/");
    }
    setLoading(false);
  });

  return () => {
    subscription.unsubscribe();
  };
}, [notion]);

If the app has an active user session persisted by the Notion authentication, we'll want to get the current logged in user, and set it to the state in our App component.

The onAuthStateChanged method returns an observable of user auth events. It is important to note that when using the Notion API in the browser, the session will persist via local storage. So, if you close the app, or reload the page, the session will persist and onAuthStateChanged will return the user session instead of null. This is exactly what we want.

If no session is detected we can navigate to the login page. Otherwise, set user in the component's state.

We can complete full authentication by adding a Logout page.

// src/pages/Logout.js
import { useEffect } from "react";
import { navigate } from "@reach/router";

export function Logout({ notion, resetState }) {
  useEffect(() => {
    if (notion) {
      notion.logout().then(() => {
        resetState();
        navigate("/");
      });
    }
  }, [notion, resetState]);

  return null;
}

The logout page is simply a React component with no DOM elements. The only logic we need is a side effect that will call the notion.logout() method if the notion instance is present. Lastly, it redirects the user to the initial route after logging out.

This component can now be added as a route in App.js.

// src/App.js
// ...
import { Logout } from "./pages/Logout";
// ...

return (
  <Router>
    {/* ... */}
    <Logout path="/logout" notion={notion} resetState={() => {
      setNotion(null);
      setUser(null);
      setDeviceId("");
    }} />
  </Router>
);

Now that authentication is completed, let's add App logic based on our cognitive state!

🌊 WebGL Ocean

The moment I saw David's WebGL ocean, I fell in love with it. So using Notion to influence the weather driving the ocean waves felt like a fun experiment.

💡 Fun fact: This ocean wave simulation was created in 2013 by David Li with JavaScript and WebGL. It has been featured as part of Google Experiments. I was happy to see it was open-sourced under the MIT license.

For this next part, the idea is to create a new component that will use the WebGL ocean. So let's create a directory called Ocean (./src/components/Ocean) and add the following files to it.

// src/components/Ocean/Ocean.js
import React, { useState, useEffect, useRef } from "react";
import useRafState from "react-use/lib/useRafState";

import { Simulator, Camera } from "./simulation.js"; // by David Li
import { mapCalmToWeather } from "./weather.js";

const camera = new Camera();

export function Ocean({ calm }) {
  const ref = useRef();
  const [simulator, setSimulator] = useState();
  const [lastTime, setLastTime] = useRafState(Date.now());

  useEffect(() => {
    const { innerWidth, innerHeight } = window;
    const simulator = new Simulator(ref.current, innerWidth, innerHeight);
    setSimulator(simulator);
  }, [ref, setSimulator]);

  useEffect(() => {
    if (simulator) {
      const currentTime = Date.now();
      const deltaTime = (currentTime - lastTime) / 1000 || 0.0;
      setLastTime(currentTime);
      simulator.render(deltaTime, camera);
    }
  }, [simulator, lastTime, setLastTime]);

  return <canvas className="simulation" ref={ref}></canvas>;
}

And if all goes well, we should see this.

Ocean Wave Simulation

Let me break down what's happening here.

1️⃣ The React component returns a canvas element for the WebGL 3D scene
2️⃣ We use React's useRef to access the canvas HTML element
3️⃣ We instantiate a new Simulator when the reference changes. The Simulator class is responsible for controlling rendering, and the weather properties such as wind, choppiness, and size.
4️⃣ We use the useRaf (requestAnimationFrame) hook to create a loop where the callback executes on every animation frame.

At this point, our ocean waves move based on static weather values: choppiness, wind, and size. So, how do we map these weather settings based on the calm score?

For that, I've created a utility function in weather.js for mapping the calm score to its corresponding weather settings: choppiness, wind, and size. And then, we can create a side effect that syncs every time the calm score changes.

useEffect(() => {
  if (simulator) {
    setWeatherBasedOnCalm(animatedCalm, 0, 0);
  }

  function setWeatherBasedOnCalm(calm) {
    const { choppiness, wind, size } = mapCalmToWeather(calm);
    simulator.setChoppiness(choppiness);
    simulator.setWind(wind, wind);
    simulator.setSize(size);
  }
}, [calm, simulator]);

Cognitive State

This is the fun part. This is where we get to access brain data and map it to the app state.

By subscribing to notion.calm(), we get a new calm score approximately every second. So, let's add the <Ocean calm={calm} /> component, add calm as a prop and create a side effect that syncs with the instance of notion and with user. If these two states are present, then we can safely subscribe to calm.

🧘🏿‍♀️ The calm score is derived from your passive cognitive state. This metric based on the alpha wave. The calm score ranges from 0.0 to 1.0. The higher the score, the higher the probability a calm feeling is detected. Getting a calm score over 0.3 is significant. Things that can help increase the calm score include closing your eyes, keeping still, breathing deeply, or meditating.

// src/pages/Calm.js
import React, { useState, useEffect } from "react";
import { Ocean } from "../components/Ocean/Ocean";

export function Calm({ user, notion }) {
  const [calm, setCalm] = useState(0);

  useEffect(() => {
    if (!user || !notion) {
      return;
    }

    const subscription = notion.calm().subscribe(calm => {
      const calmScore = Number(calm.probability.toFixed(2));
      setCalm(calmScore);
    });

    return () => {
      subscription.unsubscribe();
    };
  }, [user, notion]);

  return (
    <Ocean calm={calm} />
  );
}

💡 All notion metrics, including notion.calm() return an RxJS subscription that we can use to safely unsubscribe when the component unmounts.

And finally, we add our Calm page to App.js.

// src/App.js
// ...
import { Calm } from "./pages/Calm";
// ...

// If already authenticated, redirect user to the Calm page
useEffect(() => {
  if (user) {
    navigate("/calm");
  }
}, [user]);

return (
  <Router>
    {/* ... */}
    <Calm path="/calm" notion={notion} user={user} />
  </Router>
);

And with that, our Neuro React App is now complete.

View full code

neurosity / notion-ocean

🌊 Use a brain computer to control the motion of a WebGL ocean

I'm excited about app experiences that are influenced by who we are as a person. Every brain is different, yet we keep building apps that present the same experience to every user. What if apps were tailored to you?.

What if apps could help you relax when you are stressed?

What if you could authenticate an app with your brainwaves?

What if video games could change their narrative based on your feelings?

What if...

Forem: Neurosity

🎸 + 🧠 = Mind-Controlled Guitar Effects

Communication

Guitar Plugin

Mind Control

Conclusion

Using 🧠 BrainFlow with the Neurosity headset

Enabling BrainFlow

Installing BrainFlow

Getting real-time brainwaves

Gotchas

EEG Notebooks

NeuroTechX / EEG-ExPy

EEG Experiments in Python

Using Your Mind to Print Hello World to the Terminal with Node

Prerequisites

NPM

VSCode

Tutorial Repository

Setup your Project

Hello World Folder

Working in VSCode

Adding Notion to a Node Project

Add .gitignore file

Install Dependencies

Add Dependencies to index.js

Add start script to package.json

Run the project from the CLI

Add Authentication

Get variables from .env file

Add .env file

Instantiate a Notion Session

Add async login

Add Subscriptions

Calm Subscription

Kinesis Training

Kinesis Subscription

Conclusion

Dive into development

🤯 Building your first Neuro App with React

Getting Started

🔑 Authentication

⚙️ App State

🧠 Notion

🌊 WebGL Ocean

Cognitive State

neurosity / notion-ocean

🌊 Use a brain computer to control the motion of a WebGL ocean

Add `.gitignore` file

Add Dependencies to `index.js`

Get variables from `.env` file

Add `.env` file