Category: Reactickles 3

After checking in with Wendy on the project, I started porting the first Reactickle to the web. I’ve christened this Reactickle KeyboardSnake. It’s a very simple interaction on the surface – pressing any of the keyboard makes a multi-coloured snake-like circle form seek that position on the screen – with each of the keys of the keyboard corresponding to a different relative position on the screen canvas.

To start development I wanted to make the mapping between screen and keyboard easy to see, so I created an intermediate piece of code called KeyboardToScreen.

I need to map the positions of the four rows of keys from their positions on the keyboard to their relative positions on screen:

1. The first row of keys are the numbers, from 1-0. There are 10 keys in this row.
2. The second row of keys are the letters qwertyuiop. There are 10 keys in this row.
3. The third row of keys are the letters asdfghjkl. There are 9 keys in this row.
4. The third row of keys are the letters zxcvbnm. There are 7 keys in this row.

I needed to make a new function that would take any keyboard press and return a vector comprising two floats – the first being the relative x position of the key pressed to canvas space, and the second being the relative y. The p5.js wiki page on JavaScript basics was very helpful on how to make new functions and return values, with the handy p5.vector class perfect to store the key’s canvas position.

The key variable stores the most recently pressed keyboard character, so that was perfect to use to call my custom function. I needed to make extensive use of the switch statement in order to deal with all the keyboard presses I might have to deal with – not forgetting their uppercase variants in the case of characters.

Try the demo of KeyboardToScreen. Source code is also available.

In my previous post, I completed the following tutorials from the p5.js website:

1. Hello p5.js
2. Get Started
3. p5.js overview

First, I fixed smart quotes in said previous post, then got on with the next tutorial, p5.js and Processing aka Processing transition.

Several parts of the tutorial were particularly interesting or relevant to the Reactickles 3 project:

1. The ability of p5.js to take multitouch input, rather than just from a single mouse or trackpad. To test this out, I created a multitouch demo, “TouchDemonstration“. Unfortunately, it didn’t work on my laptop, so to test it I wanted to put it on the web proper. I knew GitHub had a hosted pages capability, so I followed the tutorial and created pages for this project. I had to make the circles sufficiently large to be seen under my fingers, and scaled my canvas to the full size of the window, but even then they didn’t seem to be picked up as multi touches rather than single ones. I posted on the forum and am awaiting some tips. I noted that the developer of p5.js seems to be changing the things are working with multitouch in the next release.
2. The difference between Global and Instance mode, and via that page:
3. The concept of Closures, and why they are so powerful:
   

   A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created.

In order to stop the duplication of code from one folder from the other, something that is sure to create bugs, I moved all my source code into my GitHub pages (or docs) folder on the GitHub for the project, with one unified libraries folder for p5.js and other JavaScript libraries.

I’ve used Processing for many years, but never the more recent Javascript version created by Lauren McCarthy, p5.js.

The tutorials seem like a logical place to start, so lets begin with “Hello p5.js”.

The video is super fun! Lauren and Dan make a great team. Most exciting of all is that the video is interactive – allowing you to click and interact with the tutorial as it is playing. Starting with shape drawing and quickly moving onto flocking behaviours as well as connecting to web services (such as the wind direction in New York) to control those said flocking circles the tutorial gives you a great quick overview of the platform – including a great sound generation via mouse demo.

Being open, the source code for the interactive video is even available here.

The next on the was “Get Started”. The tutorial starts with an instruction to download p5.js complete. After doing that I added the files to my Git repository for the project in a folder called “p5_js_GetStarted” and pushed them to GitHub using the following commands:

git pull
git add .
git commit -m "Adding p5.js Get Started tutorial"
git push

After some circle drawing code, I added the following code to add interaction:

function setup() {
 createCanvas(640, 480);
}

function draw() {
 if (mouseIsPressed) {
 fill(0);
 } else {
 fill(255);
 }
 ellipse(mouseX, mouseY, 80, 80);
}

Using Sublime Text‘s Reindent function kept everything tidy. Below is a screen grab of the result, or you can try it for yourself.

The third tutorial in the list was “p5.js overview“.

This tutorial was hosted on GitHub and deals with a basic “Hello World” program, creating a canvas to draw upon, drawing into different HTML containers, working with native HTML5 canvas functionality, mouse and touch interaction, asynchronous calls and file loading – where my code started to break. After doing some digging I realised that I needed to run a local server in order to load my lovely “cat.jpg” file.

As I knew I’d be using it for another project, I decided to try Node.js. After some more digging, I realised that it would be best to install it via Homebrew, which I already had on my computer. As I’ve just updated to OS 10.12 aka “macOS Sierra” I had to do some updating of Homebrew, and found a nasty issue. After following the proscribed fix (which won’t happen if you just do a new install of Homebrew), I was ready to install node.js, by typing:

brew install node

In my terminal. I could then run the following two commands to verify that everything had installed correctly:

node -v
npm -v

The versions that I had installed were 6.7.0 and 3.10.7 respectively. NPM stands for the Node Package Manager – NPM helps you with installing other Node.js code to your local filesystem, or wherever you happen to have Node.js installed.

After installing Node http-server, I ran it in my HelloWorld folder, pointed my web browser to http://localhost:8080/ and saw:

Hurrah! I uploaded it to my GitHub Pages account, so you can try it for yourself.

After trying making a Loading Screen and Instantiation / namespace experiments, I’m ready to move on to the next tutorial, “p5.js and Processing“.

I’ve started work on Reactickles 3 with Wendy Keay-Bright. Here is a film of a previous version:

Reactickles 1 and 2 were interactive applications written in Director that were combined with a kit of paper based activities and used around the world. I’m going to convert the old software to the web using p5.js and as yet unselected backend. I’ve created a Github for the project here.

Our aim is to use the web to make the software easier to share with others and also easier for people to share their experiences with it with others.