RAPID-MIX in JavaScript

Our complete example is available on CodeCircle. In this example, we will hard-code some training data, but this could also be gathered from other inputs such as the LEAP Motion or Thalmic Myo.

We will be showing you how to set up both a classification and regression model. When working on your own projects, you may only need one.

Step 1 – Set up our document

Create an index.html file and copy the above code into it. This sets up the scaffold for our page and includes the RapidLib.js file from the RAPID-MIX server. We also create an instance of the RapidLib library which we can access by calling rapidLib.

Step 2 – Creating our training data set and our objects

Now we’ve created a demo training set. In HTML canvas, the top-left is coordinate [0, 0]. For each piece of data, we are giving both an input and the expected output, which we will later train our system with.

We’ve also created an object which will handle our regression training myRegression, and our classification training myClassification.

Step 3 – Train our model and setup function for processing input

This is where things start to get exciting. In order for our model to interpret our input, we need to train it with our demoTrainingSet.

We use myRegression.train(demoTrainingSet); to train the regression model, and myClassification.train(demoTrainingSet); to train the classification model.

We then create a process(mousePosition) function which will take a mouse input and evaluate it with our regression and classification models. Once complete, it stores the output in global variables so we can access them later. Note: this function is written, but has yet to be used.

Step 4 – Taking input from the mouse

This may look like a lot of code, but the first half of this step is just setup for an HTML Canvas. You may wish to use something like p5.js, which makes this step shorter.

In the getMouse() function, we grab the mousePosition and relate it to the size of the canvas. We then store this in mouseX and mouseY. We feed these values into the process() function we wrote in the last step, which runs our input against the trained model.

Step 5 – Displaying our output in the canvas

This step uses the HTML Canvas API to draw data to the screen. Here, you could use these data to make interesting sounds or visuals, or even affect the way hardware performs. All that it outputted is a set of numbers – what you do with them is up to you.

Next steps

Need ideas?