Creative Coding Week 11: Connecting Arduino to P5

Finally, this is the week when everything comes together and forms a big fat mess of codes! This week, we are using p5.serialcontrol to connect our Arduino boards to p5.js sketches.

I am going to be fully honest, after watching the videos for this week, which are all super detailed, I still did not know how I can make everything work. So I decided to go a bit easy on myself and just make an adaptation of one of the examples presented in the videos.

First, I set up a simple circuit with one potentiometer on my board, and then I uploaded the Arduino codes to the board. However, it didn’t work the first time around because I didn’t connect my potentiometer to power, so I wasn’t getting any data from the board. I fixed my setup with some help from Scott and data started showing up in the serial monitor. The rest was pretty easy, I hooked my board up with the p5 sketch I created for week 1, and then modified the code so that the shapes would rotate according to the value of the potentiometer.

The code is here: https://editor.p5js.org/blurrycory/present/BRBo0uHu3

Here’s a video of me controlling it with my Arduino: https://vimeo.com/483622104

Some extra notes:

I tried to make things more complex by bringing in another potentiometer so that I can use two controls to rotate different shapes. I was able to get the board working on Arduino, but I didn’t know how to parse the two values on p5, so I eventually went with only one potentiometer.

I will definitely come back to this assignment in the future and potentially make it with two controls and make the control/data less sensitive/noisy so that the shapes aren’t jittering when I’m turning the knob.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store