top of page
p5.js Projects
Every week for my class Introduction to Computational Media, we created a different design on p5.js with a basic framework of coding requirements and much room for creativity. The designs increased in technical difficulty as we progressed and I enjoyed getting to apply my coding foundations to something visually creative.
Project 1
Our assignment was to re-create the painting Composition with Red, Blue, and Yellow using shapes, lines, and colors in p5.js. I added an interactive element -- refresh the page to randomize the colors.
Project 2
Our assignment was to create a car using variables for the different parts of the car that could be changed so that no matter what size they were, the wheels always touched the ground and the front, middle, and back of the car always stayed together. We were also to make the car loop around the screen and come back on the other side. I added decorative elements and a lap counter in a "Mario Kart" theme.
Project 3
Our assignment was to create a painting canvas with the cursor and some elements of interactivity. My canvas randomized the background color and includes buttons to change paint color, erase, and reset the canvas. To paint, the user just needs to hold down and drag their cursor.
Project 4
Our assignment was to create a sort of photo collage, or any design that involved uploading images rather than drawing with built in p5 shapes. I made a "witchy soup" scene in a forest where the cursor is a stick to stir the soup in the stump and users can click to add more ingredients. There are also sound effects for the forest ambience and bubbling soup.
Project 5
Our assignment was to create a fireworks show where users could click anywhere on the screen and have a firework generate from that spot. My creative twist was changing the colors for different holidays depending on which number on the keyboard you press. 1 for Fourth of July, 2 for Christmas, 3 for Hanukkah, 4 for Pride, 5 for Valentine's Day, 6 for Halloween, 7 for Thanksgiving, 8 for New Years, and 9 for white fireworks.
Project 6
Our assignment was to create some kind of block game. My model was similar to Crossy Road where players try to get from one side to the other while avoiding moving blocks. If the play gets to the other side, new obstacles randomly generate. If they fail, the life counter goes down. The player can move left, right, up, and down with the A, D, W, S keys, respectively.
Project 7
Our assignment was to create a design that visualized some kind of dataset. I found a National Parks database and organized the park names alphabetically that users could scroll through with a slider to display the number of recreation visitors they received in 2021 on a decorative, National Park-style sign.
Project 8
Our assignment was to create some kind of interactive photo booth, integrating device camera into our sketches. My design included silly, customizable accessories for the user, changeable with one click and able to be moves around with the cursor.
Project 9
Our assignment was to integrate some machine learning algorithm into our sketches. I used a hand recognition model to highlight to tips of a user's fingers when in frame and change the color of the highlight when the hand moves to the edge of the frame.
Final Project
Our assignment was to imagine a world made better by AI with a focus in sustainability and create a sketch to represent it. My group focused on social and resource sustainability, imagining a world more accommodating to people with invisible medical and mental conditions that can make daily life difficult by having AI recognizers assist us with what we need in the moment. Our sketch is an interactive "day in the life" users can click through with the space bar, showing what this new world could look like.
links.
bottom of page