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.
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.