David and I decided that for our midterm project we’d hook up a series of potentiometers and sensors to a p5.js sketch, which will display various looping visual elements. These elements’ properties will react to the various changes in the input and hopefully, some sort of beautiful abstract dance of shapes will emerge. Here is a work we both thought was beautiful:



For this serial input lab, we hooked up a potentiometer to a p5.js sketch via the Arduino. The Arduino sends in a number from 0 to 255, which is then named as a variable, which is then used to control various visual elements within the sketch.

Working on David’s mac, it took us a while to succeed in getting the input through to p5. We kept getting a rather cryptic message about some undefined problem with the port – despite the fact that it seemed everything was hooked up right, and the Arduino was showing proper input via its serial monitor.

Eventually, we moved to a newer computer – and voila, the sketch was showing an input. But, the numbers were random, (flickering quickly on the range between 20 and 50 or thereabouts) and did not correspond at all to the positioning and movement of the knob.

Problem turned out to be that the Arduino code included ‘serial.println’ instead of ‘serial.write’ – hence sending out ASCII instead of binary? OR something like that? It’s time to go back to the readings and understand why switching that solved the problem.

Anyway, technical hurdles behind us, we proceeded to the drawing area and began messing around with shapes, using the ‘inData’ variable to govern some of their proportions and movements.

For example, here is the code for the ‘last’ two elements, the white expanding ellipse and the green ellipse, that only kick in when the input is high (variables el and el2 are both defined as 3 before setup). The bits that are in bold were put in to make sure that when the knob was turned down, and then up again, the process of ellipses growing would start anew rather than kicking back in where it had been earlier, i. e. ellipses that cover the screen.

if (inData > 200){ellipse (0,0,el,el)}
if (inData > 201){el = el + 10} else {el =3}
if (el>200)
{fill (255,255,255);
ellipse (0,0,el2,el2)}
if (el>220)
{el2 = el2+13} else {el2=3}
if (el2>1000){rotate (0)
fill (44,209,112)
ellipse (0,0,inData/5,inData/5)}}
Post navigation

The following video demonstrat how one sensor (potanciometer) controls visual elements in the sketch:


As the next step towards our midterm project, we added more sensors so each sensor will effect on different element in the sketch:


The new Arduino code:

void setup() {
Serial.begin(9600); // initialize serial communications

void loop() {
int fsr = analogRead(A0);

int pot = analogRead(A1); // read the input pin
Serial.print(pot); // print it out the serial port

int flex = analogRead(A2);
Serial.println(” “);

delay(1); // slight delay to stabilize the ADC

Categories: Physical Computing

Leave a Reply

Your email address will not be published. Required fields are marked *