JavaScript Programs
The Computational Practices Minor necessitated I understand how to meld coding and technology to my design practice. The programs shown below are made in p5.js.
Digital Coloring Page: Mouse Press
Digital Coloring Page: Mouse Press; p5.js
About
This JavaScript program allows users to color in a cute monster sketch through choosing a color and then pressing a body part. It is intended for a younger audience, possibly kids aged 4-8.
To create this program, I used the curveVertex() method to form the different body parts of the monster that the user could fill in underneath the draw() function. This was probably the most tedious part as I had to manually position a large number of vertices to form all of the shapes.
I then created color palette of 12 colors defined all their colors and values through RGB codes and created variables for them and the individual body parts, as well as increased the stroke for all of the shapes to give it more presence. Once I had finished all the main visual elements, the next step was to create the bounding boxes and program logic.
Inside the mousePressed() function, I used 'if' statements and booleans to tell the program to recognize a specific color code when clicking within each of the circles in the palette and distribute it to a shape within a certain set of bounding boxes. Additionally, I made a small circle with the color the user selected follow the (mouseX, mouseY) coordinates to indicate which color is currently in use.
The final steps were to add audio clips as an added layer of interactivity and feedback. I used an AI text-to-speech to record the names of the colors and played them on click. When you deposit the color to a shape, a splat sound plays.
Illustration Outlines; p5.js
Working Digital Coloring Page; p5.js
Tools:
p5.js
Skills:
JavaScript coding, micro-interactions
Digital Coloring Page: ml5.js
Digital Coloring Page: ml5.js; p5.js
About
In this version of the digital coloring page, the ml5 library is called and combined with p5.js. On the left is an image the user can color in and on the right is a color palette from which they can choose colors from. To select a color, the user has to raise their right wrist and hold it over the color they want to pick. The RGB code is then stored as a variable, and the user's skeleton changes to that color as visual feedback. To deposit color onto the "page," the user has to raise their left wrist, and an ellipse with the selected color follows their nose, coloring in the image.
Tools:
p5.js, ml5.js
Skills:
JavaScript coding, machine learning, micro-interactions
Cat Hunt
Cat Hunt game; p5.js
About
In this program, users have to click around the screen and use the visual and audio clues to determine where the cat is hiding. As they get closer, the circles that follow the mouse get brighter and the meowing gets louder. Once they are able to find and click the cat's hiding spot, an image of the cat will appear and users have the option to play again.
Tools:
p5.js
Skills:
JavaScript coding, micro-interactions, UI design, game design