Interactive Media
What I love more broadly than game design is interactivity. I've been learning to code in p5 JavaScript and enjoying making an experience that is aesthetically pleasing and satisfying. Everything was done with VS Code and viewed in the Live Server extension. I use GitHub to save work and use the p5 web editor to share it.
Contrasting Emotions: Love/Hate Infographic
This was a project for an illustration class that I decided to code interaction for. the theme was contrasting emotions, and I chose love/hate themed to health and wellness, specifically nutrition.
From previous projects, I already had the skills to create arrays of class instances, which I used for each item, and found assistance from online forums with the drag and drop.
This was entirely optional and I did this on my own time to enhance my work. This project could be expanded upon and used as a tool to plan for meal prepping and/or to learn how to meal prep.
Instructions:
Click and drag an item to move it to another location and mix and match food items in your meal prep boxes!
Census Data Visualization
Our second project was a data visualization for census tracts based on JSON files. The skills we built were creating, working with, and passing around objects and arrays; loading data from external text files, and using form controls and a callback function.
This was a very challenging project due to its complexity and working with JSON files, but I really enjoyed working on it.
Instructions:
-
Use the radio to switch between locations
-
Use the left select menu to switch between properties
-
Use the right select menu to filter data
-
Use the checkbox to display the data in text format
Inherited Bugs
Our first project of the semester was about inheritance, DOM elements, animation, and data structures.
Instructions:
-
Click on bugs to interact with them
-
Use the menu at the bottom to change the mode, which will affect what the click does
-
Click on the buttons at the bottom to refill the canvas with a new array of bugs
Pumpkin Array
This project was about arrays, loops, classes, DOM elements, and interaction. Using art from a previous game jam, I created a relatively simple program to interact with pumpkins with visual and auditory feedback.
Instructions:
Click on the pumpkins, changing the click's effect using the menu.
State Machines
Our second project focused on classes, finite state machines, and coding interactive motion. I used art from a previous game jam for the distinct instances.
Instructions:
-
Click the kid you want to move
-
Move them with WASD
-
Hold SHIFT + A/D or L/R arrow keys to rotate the finger
-
Hold SPACE to move automatically
At this point in the semester, we knew how to create shapes, how to use boolean variables, and how to animate movement. We were required to have a continuous animation and user interaction in both scenes.
Instructions:
-
Click "see Penguin"/"see Whale" to flip between scenes
-
Click and hold on the whale to move them up and down
-
Move the mouse left and right to move the penguin