Interactive Sketch in p5js

November 18, 2018

As assigned I created an interactive p5js sketch.

https://editor.p5js.org/kimagosto/sketches/r1Ql-zyCm

I used specific shape building techniques to create a shape using multiple bezier curves. I created a few shapes that overlapped each other, as shown in the image above.

In order to make it interactive, I assigned x2 and y2 values to be equal to that of mouseX and mouseY, so that coordinates of the shape pertained to where the cursor was positioned on the screen. I managed to place these variables at points that allowed for the shape to repel the cursor.

I also incorporated a mouspressed function that would change the rgb values of both my shape and the background. The rgb variables were defined to pick a random value from 0-255, and I made my background rgb values -50 darker in order to incorporate some aspects of harmonic colors, or aesthetically pleasing color variation.

If the mouse is pressed anywhere within the dimensions of the canvas, a random value is picked for each rgb variable.