Serial Input to P5.js

This weekend, I tried serial input to p5.js. Given my background in fabrication, programming is an abstract concept and language for me. For the past month, I had this nagging discomfort in the back of my mind every time I’ve had to open up p5. A few weeks ago, I finally figured out what it is: functions looping infinitely frame by frame gives me the same anxiety and impulse to shut a running faucet. This is why when Schiffman introduced serial to us in class last week, I actually breathed a sigh of relief. At least with my Arduino, I can physically unplug to stop all the madness.┬áMy homework’s not due until Wednesday, but I was excited to get started.

I watched the Serial Output from Arduino video from Tom and Jeff and used Schiffman’s simplified serial example code to get it working. At first, it didn’t seem to work and I kept getting “NaN” in my canvas. I noticed that in the same lab for Physical Computing, the code for including p5.serialport.js in the index is slightly longer than Schiffman’s simplified code and wondered if that was the problem.

After I replaced

<script src=”p5.serialport.js”></script>


<script language="javascript" type="text/javascript" src="p5.serialport.js"></script>

The sketch worked fine with each turn of my potentiometer and I was finally in control of the size or position of the ellipse on 
my screen. 

I later tried running the simplified code and it worked as well, so I'm not certain if there is any correlation or if there was just a lag 
when I tried it the first few times.

Leave a Reply

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