This tutorial will get you started building your first networked application with brainsatplay.js!
Before we begin, update your settings file to tag your applet with the
brainstorm category tag.
To make it easier for developers to create a fully-functional networked game, we've provided a helper function to automate the process of (1) presenting a welcome screen, (2) choosing a username, and (3) selecting an available game session:
After implementing the above code, you should be able to navigate through the default intro sequence on your applet:
Instead of checking your Data Atlas inside the
animate() function, you'll now iterate through the data from
this.session.getBrainstorm(). Let's also chane how we're updating the HTML to support more than one user's data.
Now, if you use two Chrome windows to connect synthetic streams from different usernames, you should see
userData passed between these clients on the coherence readout:
But, you may be asking yourself, where's the coherence data?!
In this cases, you'll want to automatically compute and stream data to the Brainstorm. To do this, add a custom streaming function using
Specifically, you'll want to pass the function that we used to compute frontal alpha coherence:
Now let's check out our applet again:
If everything has gone smoothly, you should now see coherence values passed between your simulated clients!
You can also add an app stream to send data/events (e.g button clicks, player health, etc.) over the Brainstorm.
The app will listen for changes to this object and send them through the Brainstorm to other users. But first, we have to register the object in our app:
Since we've added a new stream parameter to the app, you'll have to (1) create a new Game Session or (2) restart the server for this change to take effect.
After this, you can now change the
appEvents variable and it will be automatically updated in the app stream. Let's change the color of each user's text when they press the spacebar!
Press the spacebar to change the text color across different clients!
You should now have an applet that passes (1) frontal alpha coherence and (2) spacebar clicks to all users connected to your app session on the Brainstorm!
We challenge you to customize this default UI and create a game with the above mechanics. What will you create?