top of page
Featured Posts

PComp & ICM | Pinching Game

This week, I learned serial communication from PComp, so I decided to combine ICM & PComp homework together.

I wanted to know how I can make P5 receive 02 or more inputs from Arduino, since in class we only learned how to receive one stream of input using Serial.println from Arduino.

My idea was to cut up the string received from Arduino into different strings and save them into different variables in P5.

I wired my board with a pot and an FSR, and uploaded the following code:

void loop() {

int potVal = analogRead(potPin);

int forceVal = analogRead(forcePin);





Now P5 receives a longer string, and I used the function split() to parse the string received from Arduino.


//read values from Arduino

myString = split(fromSerial,","); //parse String into 2 values



I encountered several errors before getting the code right. I found out that the variable fromSerial needed to be initialised as string for the code to work properly (the template initialised the variable as integer).


Now that I have both inputs from Arduino assigned to different variables in P5, I could start conceptualising what I wanted to create.

I drew inspiration from arcade’s punch machine. But instead of punching the FSR, you have to pinch it (easier to implement hardware-wise). The pot will then used to tweak the difficulty of the game.


Initially, here was how I broke down the logic of the game:

  • receive and save the values from Arduino’s FSR

  • slowly draw pinch strength bar. maybe use for loop to “delay” the speed of drawing.

  • if the max value from FSR is below certain threshold, the strength indicator should slowly recede.

  • if the max value from FSR has hit the winning threshold, game has been won, do something to indicate this.

  • player has option to reset the game, or the game resets automatically.


I wanted to use some kind of asynchronous timer to divide the game into several “states" like, "listening to Arduino” state, “drawing” state, “win” state, etc.

But I could not figure out how to do asynchronous timer (for loop inside draw can’t act like a timer), so I ditched the idea and decided to wing it instead.


The implementation logic is as following:

  • a round starts when the code is run, or after the function reset() is called.

  • in a round, save the max value received from FSR

  • gradually draw the strength indicator bar

  • if the indicator bar has reached a threshold (a variable affected by potentiometer), call the function win()

  • the function win() changes the display of the sketch to indicate that player has won.

  • the function win() enables the “if” statement (via boolean variable) to start reset countdown.

  • If counter reaches, 0, call the function reset()

  • Or, whenever mouse is Pressed, call the function reset()

  • Reset() resets the variables used in the game.

Source code can be found here.

#PComp #ICM #PhysicalComputing #p5js

Related Posts

See All
Recent Posts
Search By Tags
No tags yet.
Related Posts
bottom of page