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:
- The first row of keys are the numbers, from 1-0. There are 10 keys in this row.
- The second row of keys are the letters qwertyuiop. There are 10 keys in this row.
- The third row of keys are the letters asdfghjkl. There are 9 keys in this row.
- 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.