Portfolio

Spicyroll

_{August 23, 2023}

I wanted to use picture-in-picture mode to watch anime on Crunchyroll while doing other stuff. Unfortunately, due to the way Crunchyroll displays subs on their site, subtitles wouldn’t show on the PIP window, and the Firefox developers have not yet written an adapter for the subs on Crunchyroll.

When investigating to see how I could work around this, I found the JSON file that provides the links for a given video stream and its subs. While my initial plan was to convert CR’s provided subfile to WebVTT, then inject those onto the video player, I noticed a “hardsub” section on the file. Apparently, this is used to display subs in the mobile apps. Could I simply tell the player to use the hardsub stream instead of the regular one, and to ignore softsubs entirely? Yes, yes I could.

I hacked together most of the functionality in a few hours, so a lot of stuff is very janky. I’ve never written a browser extension before, so this was also a fun learning experience for me!

When switching subtitles, Widevine gets triggered (perhaps unsurprisingly), so the second toggle in the extension popup is to automatically refresh the page when switching subs. This should work when logged in, but does not work when logged out, from my testing. If logged out, disable “force hardsub” before switching languages.

I also have not tested this with audio languages other than Japanese. I have no clue if it will work or not in other cases. This very much was a hack done to solve a personal problem, not for widespread public usage. (I’m still probably publishing it in case others may need it, though, and have close to my exact use case).

GitHub Link

Creed (Prototype)

_{January 1, 2022}

Creed is a social deduction card game where all players have a different win condition, designed by Matthew Young. Although Tower Heist began as a project first, we plan to finish Creed first, due to the relative simplicity of the game, making it easier to build and ship.

Alongside Hayden DelCiello and Brandon Imai, a Creed mobile app prototype was created in Godot. However, due to challenges with the small amount of screen real estate on a mobile device, compromises would have to be made in terms of ease of use and the intuitiveness of the controls. Due to this, we are likely to shift to a web-based format for the game, although work on this is still pending.

The Discrete Structures Christmas Special

_{December 1, 2021}

Oh boy, now this is a video! For our Discrete Structures class final project, we were asked to take a homework problem from a selection, recontextualize it and change the numbers, and make a video working through the problem. We were encouraged to have fun with the video and be creative. I don’t think they ever saw our video coming.

Our thumbnail and video title are a blatant bait-and-switch. In fact, the thumbnail image doesn’t appear in the video at all—we even took it after the video was done. If you haven’t watched the video yet, I’d recommend watching it before reading the rest of this description.

Upon seeing we can be creative with this video, an idea immediately popped into my head: we can make a musical. Rather surprisingly, my roommate and classmate Hayden DelCiello was willing to go with my stupid idea. I created the general outline for the script and composed the backing track, and any other music used in the video. The two of us drafted the script and lyrics together. The video was filmed in our floor’s common room, likely leaving many to question what the heck we were doing.

For several portions of the video, we also created used split-screen in order for the two of us to play four characters. It ended up looking pretty good, all things considered, and even some portions where I overlap myself look clean.

I “sung” for the video, and for that recorded a take and autotuned it the best I could. The ultimate takeaway: even aggressive autotuning can’t fix garbage singing. The “teaching” segments were filmed in front of a green screen I set up in my dorm room, solely because I wanted to do the trippy effect during the bridge of the song. I also edited the video, with Hayden writing out the captions for the music portion.

I had a blast making the video, and am glad to have friends willing to roll with my stupid, stupid ideas. Also, I’d like to take a moment to shout-out Hayden’s brilliantly hilarious news ticker headlines. Rewatch that part of the video if you didn’t get a chance to read them all.

Jank Jumper: Unlimited

_{November 5, 2021}

Jank Jumper: Unlimited was a game created in two weeks for the Northeastern University Jam-O-Lantern 2021 game jam, created by Hayden DelCiello and me in the Unity game engine. The game features a map where tiles constantly change to apply various harmful effects to your character, such as a shorter jump or slower speed. Alongside programming several elements of the game, such as the gem collection mechanics, some aspects of movement, and the generation of the base map from an image file, I also created the textures for the game, with all but the star background being created from scratch. I’m not an artist and have no experience with creating sprites like that, so even though they’re pretty ugly, I’m fairly happy with the result. I also composed the music used in the game.

Several aspects of the game fun and/or frustrating to create. For one, it took us a long time to figure out how jumping should function. In the end, we created three different jumping styles, each with their own flaws, and so we created three characters so players can try all of them. In addition, clipping into tiles was a major issue we had to figure out, as it would often stop the movement of the player character randomly. Though multiple iterations of differently written collision logic, we were eventually able to get the game working without bugs such as that.

The game has many flaws, such as the fairly bad physics and map design. Though, having never made a platformer prior to this, and considering we did it within two weeks, I’m very proud of the project.

Tower Heist (Prototype)

_{July 1, 2021}

Tower Heist is a turn-based, social-deduction, strategy capture-the-flag board game created by a friend, Matthew Young. A group of us planned to create a video game adapatation of the game. Thus far, a rough prototype has been created in Unity, though development is currently halted, at least until Creed, another game designed by the same person, is finished.

The Tower Heist prototype is capable of online play, assuming the clients can connect to the correct port on the server. It additionally fully implements the rules of the game, including the hidden information and bluffing mechanics. However, as the prototype was my first project in Unity (built during the summer between senior year of high school and freshman year of college), the codebase is rather messy, and it is likely that in the future we will reimplement it, potentially in Godot.

In addition to implementing the game and networking, we began designing aspects of the game’s user interface. Some music was also composed for the game by Matthew and Anthony Wang, where I took the MIDI files and set the synth sounds in FL Studio, as well as did some light mixing. Following are a few examples:

Anthony Wang - Genesis (edited by me)

Matthew Young - Clockwork (edited by me)

Matthew Young - Bounce (edited by me)

Honestly, I’m really excited to revisit this project once Creed (a simpler game that should be easier to make and ship) is finished. I had so much fun playtesting the physical version of Tower Heist, though the project seems stalled for now.

ViriDOS

_{March 5, 2021}

ViriDOS (where “DOS” is pronounced as in “MS-DOS”), is a point-and-click adventure game Brandon Imai and I made in our senior year of high school. Largely inspired by games such as Club Penguin’s Penguin Secret Agency missions, ViriDOS was created for our school’s PTSA to serve as an fun event for students during online learning. Brandon and I were quite ambitious with the project, and in the end, the hour-long experience featured an original story and script involving the participation of many school staff members, 16 unique puzzles, 360° panoramas of several classrooms to interact with, video cutscenes of the campus, original music, cloud sync, and a really janky “status system” that served as a timeline to control the linear progression and events of the game. From brainstorming to release, the game took 7 months to create.

Brandon and I wanted to center the story around some “secret” or “mythical” item, so we created a green school polo, a tougue-in-cheek reference to our school’s dress code, which only allowed grey, blue, red, and white polos. From this concept, we wrote a script, aiming to involve as many school departments as possible, and hoping to raise the stakes at two different points in the story. We had a few friends help out with brainstorming puzzle ideas with us at the same time.

For the videos in the game, Brandon and I got permission to film on campus and in various classrooms, where we ran around building to building with a camera in hand. In order to create 360° panoramas of the classrooms, I used the Google Street View app on my phone (did I mention we had literally zero budget for this project?). Most of the videos were edited by Brandon, though I did edit the two “CGI” shots that look just as stilted as you’d expect. We also got in contact with several teachers at our school to record video clips of themselves for the game. In addition, we had three original songs for the game’s soundtrack, the first of which was written by two other students, TheBigBit and Spottier, and the latter two of which I wrote.

I was ViriDOS’s sole programmer, and oh boy the codebase is something. For starters, we began this project when my only real development experience was with React Native, so ViriDOS was built with React Native Web with React Navigation, which I believe added a bit more complexity to the output build than there otherwise would be. In order to keep track of user progress, I created a “status system”, which was a long array of objects describing screens, videos to play, or the time to wait before triggering the next item on the list. This was hacked together with tons of async functions, while loops to wait for components to mount, workarounds to account for reloading components due to switching screens, and a function over 100 lines long, mostly consisting of else-if statements.

[WARNING: this paragraph contains unnecessary description of bad code and should be skipped by sane individuals.] Hacking things together is a common thread throughout this project. Four of the sixteen puzzles (Flow Free, Tower of Hanoi, Oregon Trail, and Pong) were shoehorned in code from GitHub slapped into the project. For the 360° panorama screens, I used Google’s Marzipano library…in the jankiest, most cursed way imaginable. The website renders an iframe of a copy of Marzipano linked in the project’s static folder, with each room having its own copy of the entire library in the codebase. Furthermore, to trigger moving to the next screen, I have a small bit of custom code in the library to inject a text element with a specific class name and content into the iframe and detect it with a while(true) and a wait function to search every second. It wasn’t until after I wrote this that I realized I can just pass data from the iframe to its parent, and at that point I just decided it worked and left it…oh well!

I also really didn’t want people to be able to use browser DevTools to jump to the end of the game to get on the leaderboard, nor did I want people to cheat the puzzles, so I programmed a rather unnecessary about of obfuscation. Puzzles with an input were checked with a hash, and I built JWTs using a player’s progress in the game and their login token such that a player couldn’t easily edit their progress, nor share their progress with others. Despite being almost entirely unnecessary, this anti-cheat was pretty fun to make, and I have more pride in it than I reasonably should.

There were so many other fun challenges with coding ViriDOS: creating cloud sync, wrestling with xterm.js to create a usable text interface, and also this one stupid bug that caused the entire screen to zoom in and out that only appeared when deployed on Vercel, and therefore required multiple pushed commits to get to the bottom to! Somehow, it got done, and after playtesting and a ton of bugfixing, we were able to to get it to a playable state.

We also advertised this game surprisingly heavily. Brandon and I created three trailers and two instagram teasers, of which I edited the third trailer and two teasers. The trailer I edited is available to view at the top of this page.

In the end, I’m really proud of ViriDOS. It was a project created over the span of months, mostly by two people. The codebase is janky as heck, the “acting” is definitely high school project level, and overall it’s not the most polished game or webapp. But at the end of the day, it was the first real programming project I tackled, and I had a blast creating it.

Play ViriDOS | Source code

Miscellaneous Projects

As part of the natural cycle of side projects, I work on a lot of side projects that don’t deserve an entire page of content. Here is a small sample of those projects:

Puzzle for Brandon

A hellishly long series of CTF-like puzzles unleashed upon a friend as a birthday gift in 2020, with an Amazon gift card as the prize for completion. He has never completed it. I’ll add more detailed info once I give him the gift card and walk him through the entire thing. I recently looked at my planning document and realized just how incredibly insane this project was, and that’s hilarious.

Disneyland Waittimes

Before I knew about Disney Genie (a poorly designed product for reasons I will delve into shortly), I thought it would be fun to make my own Disneyland trip planner program before I went on a trip there with my sister. I eventually learned that any attempts to plan a trip before going are made in vain.

The project consisted of three parts: a way to fetch and store wait times, a way to display a graph of wait times, and an attempt to minimize the time it takes to complete a set of rides when factoring in walking time, waiting time, and ride length. The fetching of wait times was done using a third-party Node.js API, and wait times were simply stored in my Git repo. This ran and updated for a number of months, which is why the repo currently has over a thousand(!!!) commits. The graph was a simple render of the data, with the ability to set what ride and park you viewed. The trip planning website tried multiple strategies, ultimately using a “bubble sort-esqe” algorithm to make a half-decent guess at a itinerary based on the information it was given. This was a pain, as it really was trying to estimate the NP-hard traveling salesman problem, but with additional steps (like wait times!). Ultimately, though, this wasn’t even the main problem!

The main problem with this is how variable wait times are. Alongside unforeseen circumstances, such as ride breakdowns that are common at Disneyland, the patterns of wait times from day-to-day are so inconsistent that it is almost always a better idea to play it by ear instead, which is what my sister and I ended up doing when we went, and we were able to do everything we wanted, and them some (though, I guess prior knowledge of park layout and rough intuition on wait time patterns helped quite a bit with this).

The source code for this is available on GitHub. This was never meant to be released publicly, so everything about the repo is a mess.

Bookmark Formatter

This project was a simple way for me to practice a bit of my functional programming skills with Racket, a dialect of Lisp. It’s a very simple script that takes a folder of yaml files and parses them to a bookmark import format supported by Firefox and Chromium-based browsers using HTML. The entire thing was slapped together in a day. Source code is available on GitHub.

Random Hackathon Stuff

I did a couple of virtual hackathons in my junior year of high school with a couple people at my school. I’m honestly not happy with the results at all, but it’s something that I did. Hymn, a home gym workout tracker. CoVCast, a COVID-19 forecast app. (To be fair, I didn’t come up with the ideas here, I just contributed to code and UI design.)