First, a link to my full sketch on p5.js Web Editor:
I created an interactive drawing that allows users to create abstract designs and drawings with triangle shapes. I wanted the design to be bright, colorful, and playful; hence, I chose to use the following color palette against a pale blue background. The drawing is titled “Paper Airplanes” because the movement of the triangles reminded me of paper airplanes, and the changing opacity gives the sense of depth and that they are flying over and under, behind and in front of each other.
https://www.color-hex.com/color-palette/113420
The color of the triangles changes when pressing certain keys, and the opacity changes according to mouse speed. Full instructions are shown below in the following code:
Here is a demo of how the user might use this interactive drawing :
There are a few things to highlight about this drawing. Firstly, these are the variables I declared at the beginning of my code, which then changed throughout the program to create the interactivity:
Secondly, once the user presses the mouse, the dimensions, orientation, and spacing of the triangles drawn is somewhat random. Although I’m not sure exactly the method to get the shape to behave like this, I achieved this by experimenting with the vertexes of the triangle using the built-in variables pmouseX and pmouseY. Below is a screenshot of the code:
Third, I used a total of 5 if blocks to allow the color of the triangles to changed based off the key pressed.
Finally, to allow the opacity of the shapes to increase with speed, I used the dist() function to assign to the variable called speed. At first, I simply used this variable as my alpha variable, however I felt that the scale wasn’t quite right. The colors were too transparent regardless of the speed of the mouse. Below shows the code.
This is the type of result it gave when run:
The difference between this photo and the final product is subtle, however I personally felt that keeping the code this way did not provide a lot of depth and variation to the drawing. My solution was to use the map() function and scale the speed variable to the scale of rgb – 0 to 255. To determine the scale of the speed variable I played around with different numbers until I reached drawings I was happy with. Such adjustments are shown in the following code:
Reflections:
– As aforementioned, I used variables to control the color values of the shapes, the mouse positions as controlled by the user, and the speed of the mouse.
– the mouseIsPressed is a Boolean value that is either True or False. When the user presses the mouse, mouseIsPressed() becomes True, and the code that follows the function will run. mousePressed() on the other hand is a function that requires the user to press once on the mouse for the code that follows to run; each press of the mouse causes the function to execute.
– I used the Boolean value keyIsPressed and the environmental variable key to write each of my conditional statements. The format I used was if the key pressed was 1, 2, 3, 4, or 5, the r, g, and b values would be assigned and reassigned accordingly.