p5.js Projects: Games, Simulators - Live Demos

I've built a wide variety of projects with JavaScript, particularly p5, a visual and dynamic animation library. I created games, simulators, and calculators early in my CS journey, which taught me many programming fundamentals. Motivated by my desire to create interesting things, I learned more advanced techniques in structuring, organizing, and handling objects and arrays, enabling the development of the projects below. All these projects show my attention to detail in error and edge-case handling, as well as my skills with arrays, data structures, and object-oriented programming in particular.

Note: If any sketches do not load or seem to be running slowly due to browser compatibility issues, they can be run (and code can be viewed) at https://editor.p5js.org/brpeterson/sketches.

Game Station 359

Ira Fulton Engineering Group Project

In collaboration with fellow Ira Fulton Engineering students at ASU, I created a series of games as part of an engineering class project. Because of my experience with p5, I took the lead, directing the organization and structure of our project, and encouraging the implementation of features that competing groups lacked. I personally developed our most advanced games, Balloon Cut and Time Tiles, as well as several key overall features, such as persistent scores in the stats page and the implementation of sound, while supporting my fellow group members in developing our other features and games. These games, particularly Balloon Cut and Time Tiles, highlight my attention to detail and experience with data structures. Our project was a strong success, earning our group an A+, and wowing the class during our presentation. Source code not publicly available due to ASU's and Ira Fulton's Academic Integrity Policies.

Flower Pop

An Arcade-Style Fixed-Shooter Game with Levels and Progression

Click to shoot the flowers and pop their petals off one-by-one before they reach the bottom of the screen!

Spend your points on upgrades to take on the increasingly larger and faster waves of flowers. (Points boosted for demo purposes)

While visually simple, this game demonstrates my skills with complex arrays and data structures; each petal, flower, point animation, and laser beam are part of a larger array and are owned by their respective parent objects. The petals and flowers can be removed in any order, and all relevant items are deleted off-screen to maintain performance. Source code is readily available through the link in the upper-righthand corner of the embedding.

Bouncing

Simple but Engaging Physics Simulator with Quadtree Implementation

Left-click to add new balls to the simulation.

Middle-click to remove the last added balls.

Move the sliders to adjust the simulation factors in the upper-left.

Check the, "Display Quadtree," box to display the quadtree (more apparent with 3+ balls).

Inspired by Daniel Shiffman's p5 YouTube tutorials, I created a basic physics simulator with real-time modifiable factors such as size, gravity, friction, and spring (how much energy is recovered after each bounce), and implemented a quadtree to improve efficiency and framerate. This project demonstrates my skills with arrays and data structures. Source code is readily available through the link in the upper-righthand corner of the embedding.