In the basic introduction you can learn the programming syntax. However, to make interesting things with code one need to think in terms of combining the different programming components into basic structures. These structures are called patterns. They are similar to having a basic sewing pattern for a shirt, but the end result can be very different depending on how you use it. Programming patterns differ depending on what kind of programming one is doing. When working with interaction design there is a set of commonly known strategies for making interactive elements. The secret trick to mastering interactive programming is to recognize these patterns that makes up structures for common solutions to interactive problems. In the following we have collected the most common patterns that everry interaction design programmer needs to know to create interactions.
Long example: Programming PONG (as a pattern)
In this video I go through the core concepts of programming with P5.JS by programming a simple pong game.
The video is a bit fast paced, so do make sure to pause and scroll back and forth.
Correct bounce on all axis:
Many games are based on this pattern in some form.
Interactive pattern cheat sheet
We have tried to make the examples as generic as possible. Although there are only examples from one platform, it should be relatively simple to convert it to the other. Be aware that the main method in Processing is called draw(), where in Arduino it is called loop(). Simply change the words depending on the platform used.
Doing something while a button is pressed
To change something while a button is pressed. The code looks like this.
Calculating the distance to use for detecting the hover/collision of the mouse
By using the dist() function you can see whether a mouse is over a circle. This is the simplest way to make an interactive button or to detect a collision between the mouse (the player) and an object.
Detecting a push button event
The above example only works for doing something WHILE the button is pressed, and it is not the same as an event. An event is when something changes from one state to another; e.g. you want something to happen when the button is released => going from a pressed state to a not pressed state. This requires us to "remember" the old state an compare it to detect the change.
Make a toggle button
Toggling with a pushbutton is a common solution to turning things on an off. This is one way to do it.
Make an interval timer
To make something happen every x miliseconds. This pattern is a generic solution.
Timing an event
To time an event; e.g. you want something to happen two seconds after the button is pressed. To do so you need to register the time the button was pressed and look for when the two seconds has passed from then.
Detect a mouse click within a square
In Processing you sometimes need to design your own button interaction. To do this, we need to define the active area of the mouse pointer. Here is a simple pattern to solve this problem:
Fade in and fade out
To make something fade in and fade out you need to create a counter and add/subtract from it over time.
Make an object move
To make something move you need to created a counter and add/subtract from it over time.
Creating a state machine
As the complexity of your code grows you will need to have multiple states where different parts of code should happpen in certain situations. Using a this pattern allows you to compartamentalise which part of the program should in any given moment. Each state represent at certain situation in your porgram. It could be the intro screen in a game, the actual game, the highscore etc.
Detecting a long press
Check if a button has been pressed for a particular minimum time (in this example 3 seconds). This can provide safety (e.g. for a reset button, check that someone actually means it, not just touched the button by accident) and provides implicit debouncing of a glitchy signal.
Toggling with two different delays
Sometimes you want something to be turned on for one second and turned off for 10 seconds. This code does that.
Note: This code can be compressed - this example will toggle the background every one second (but hard to read):
Reading a line from the keyboard
This collects all the keypress characters until return has been pressed.
Generating multiple objects
This little example generates multiple objects. It uses an array of vectors. Vectors contain both and x and y coordinate.