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. 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. In the following we will walk you through the different common strategies.
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.
Also, it may be helpful to start with some of the more simple videos below.
SIMPLE INTERACTIVE EXEAMPLES
We are creating a repository of examples for you to play with. Please have a look at them to start off with, they can be found here. We will extend it during the course as we find out what is interesting for you to play with.
Correct bounce on all axis:
Class and object syntax
Interactive pattern cheat sheet
The secret trick to mastering programming is to recognize the patterns that makes up structures for common solutions to problems. In the following we have collected the most common patterns that everry interaction design programmer needs to know to create basic interactions.
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.
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 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 lines of code should happpen:
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.
Reading a line from the keyboard
This collects all the characters until return has been pressed.