In this lab, we will create an interactive application in P5.JS and use serial communication to send values between the Arduino and our application

To start, I had to get my grounding in p5.js

Luckily, this felt very similar to using the draw function in Python as well as some other coding experience I have, so it didn’t take long to get a few things figured out.

Part 1

The first step would be to create a static scene in the p5 web editor. I started by adding a few circles, playing with the position, color, and transparency, so that when overlapped, there would be a noticeable change.

I then added a lot more, and changed the color and position of each. I liked the organic and unexpected nature of where the circles ended up. I was going to variate the sizes, but I actually liked keeping it just one size.

I then decided I was happy with my static sketch, which can be viewed below. The link to the code in the web editor can be found here.

Next, I would make this sketch interactive. I knew I wanted to use the mouse to change what happens in the scene, so I used the idea from our example sketch with the map() function to map the location of the mouse as x and y values and then add that to the x and y values of each of the circles.

Now, when moused over the sketch, the cluster would move with the mouse, albeit slighter movements so as to keep them on the screen.

I then added an if() function with mouseIsPressed, so that, as could be assumed, something would change if the mouse is being pressed. I then changed the size the circles, so they get bigger when clicking the mouse. I left the mouse movement as well, so it will always move, big or small.

The sketch can be viewed below, and the link to the web editor for this can be found here.