*Embeds with images may take a minute to load and have a tendency to lag

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

State Machines

​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