Table of Contents

1. ViriDOS
2. Jank Jumper: Unlimited
3. Tower Heist (Prototype)
4. Creed (Prototype)
5. Spicyroll
6. From Stone to Steel
7. Undoing
8. Northeastern Khoury Promo
9. The Discrete Structures Christmas Special
10. CTRL
11. Wasting Water Is Outdated
12. OA PTSA Winter Raffle Ad
13. Galactic Adventures of Military Empires: New Advanced Missions Edition
14. Time - Inception | Virtual Orchestra
15. Mathematics of Data Models Mini-Project: A Scene
16. Miscellaneous Projects

ViriDOS

_{March 5, 2021 ⸱ programming, game dev, filmmaking, video editing, music, ui design}

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

Jank Jumper: Unlimited

_{November 5, 2021 ⸱ programming, game dev, music}

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)

_{N/A ⸱ programming, game dev}

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, and I can’t wait to bring it to the state of a finished project. While updates are unlikely for the time being, any updates will be available at our website (which I also coded!).

Creed (Prototype)

_{N/A ⸱ programming, game dev, ui design}

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, comprimises 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.

Any updates, if any, will be available at our website.

Spicyroll

_{August 23, 2023 ⸱ programming}

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

From Stone to Steel

_{June 15, 2022 ⸱ filmmaking, video editing}

From Stone to Steel is a short documentary made on a month-long school trip abroad in London. Inspired by the extreme contrasts in architecture present in the city, the video dives into what led to this, and what citizens think of it. For this video, I came up with the concept, filmed some of the interview and b-roll footage, and served as lead video editor.

Initally, our group went to London with the intention of making a documentary on the modernization of religion, and the ways religions have to adapt to the changing social landscape. We ran into problems almost immediately. We really struggled to find interviews. Many responded to our emails before ghosting us as soon as it came to scheduling. We were at least a week and a half into the trip and we still haven’t recorded a single interview. That’s when we decided we needed to switch.

I was fascinated by the sharp conflicts between the different styles of architecture in London, the most striking of which being Lloyd’s Building directly next to Leadenhall Market.

Once we switched topics, we were able to get the ball rolling with the video. We were able to secure three interviews. We took a ton of b-roll, and although editing was a tad last minute, requiring a couple late nights and a few boosts of caffeine, I think we were all pretty proud of the final result.

Undoing

_{October 30, 2020 ⸱ filmmaking, video editing}

Like many things I’m proud of making, “Undoing” came from what many would consider to be a stupid idea. For my 12th grade AP Literature class, our teacher assigned us to do some sort of creative group project relating to Gothic literature and themes. It could be anything, though we were still in the middle of quarantine. Additionally, this was assigned on a Thursday, due before class the following Thursday; we had only a week to make it. Regardless, I really wanted to make a short film.

After some discussion with my two close friends in the class, Lance Sahagun (who starred in the short) and Anthony Wang, we decided to try to make a film. That Thursday, I wrote the concept, an idea that came to me with the primary goal of subverting the common use of castles and similar structures in Gothic literature. The storyboard was completely soon after. The weekend was used to figure out where to film, with the goal being somewhere foreboding. This proved to be a challenge, especially since many places were completely closed due to the pandemic. After several hours across multiple days of trying to figure this out, we picked the South Coast Plaza mall by Lance’s suggestion. Also by his suggestion, we adjusted the story to include another location, where we went to Noguchi Garden, a scupture garden across the street from the mall.

The day we filmed was Tuesday, two days before the due date. This was mostly straightforward, but a fun anecdote has to do with the hallways in the short film, which were actually the pathways to the bathrooms at the mall. Because of this, we had Anthony and another friend scout the ends of the hallway so we don’t accidently film people moving in and out of the bathrooms.

After filming, we then had only one day to edit the video. I spent all day (excluding classes) on call with friends as I edited the video, frequently exporting for feedback and suggestions. This process led to several new ideas being incorporated in, such as the reversed speech and flashing inverted facial expressions near the end.

In the end, I think it’s kind of funny that I created a horror-adjacent short, considering horror is a genre I never watch. Many stylistic aspects of the short were actually inspired by the Queen Vanessa’s Manor level from A Hat in Time. Still, I’m still happy with this project, especially considering the extremely short turnaround time for it.

Northeastern Khoury Promo

_{April 24, 2022 ⸱ filmmaking, video editing}

This is a video made for the promotion of the Khoury College of Computer Sciences at Northeastern University. Alongside storyboarding and editing the video, all footage was shot by me. Since the video was turned it close to the end of the Spring 2022 semester, I’m not sure if it was ever released, though I am still rather happy with the result. However, due to me not having a gimbal at the time it was filmed, much of the footage shakes more than I am fully satisfied with.

The “split-screen” sequence beginning at 0:53 in the video was largely inspired by the opening sequence of the anime Horimiya. I created macros in DaVinci Resolve’s Fusion page in order to create a split-screen of two clip, with a splitter I could animate. I then chained the effect for several videos. This took a massive toll on my computer, and the effect had to be split into two halves in order for me to be able to edit it. Here’s a screenshot of the node graph of one of the halves:

The Discrete Structures Christmas Special

_{December 1, 2021 ⸱ filmmaking, video editing, music}

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 blatent 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 filmmed 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 filmmed 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.

CTRL

_{December 9, 2020 ⸱ filmmaking, video editing}

CTRL is a video made to describe the risks posed by ad tracking and personalization on the Internet. While I’m not happy with several aspects of the video in hindsight, I’m still decently proud of the editing and directing of this video.

I’ll start with what I’m not happy with. For one, my delivery on several lines is awful, and it honestly makes me cringe rewatching. Additionally, I’m talking way to close to the microphone, leading to weird clipping and very audio “mouth sounds”. After the production of the video, I learned how I can mostly remove those sounds, and I wish I did that for this video. Additionally, I don’t have the rights to most of the music in the video, which is something I aim to do now when I make videos. Finally, and perhaps most importantly, I made a huge mistake drawing the images with triangle or pyramid heads. It creates a really weird implication that I don’t want and never wanted for my video.

However, I still think some sequences, like the “filter bubble” sequence, the “profile” sequence, as well as the closing animation, still look pretty good, and they’re something I’m relatively happy with, still.

Wasting Water Is Outdated

_{April 13, 2020 ⸱ filmmaking, video editing}

In my senior year of high school, I got to be a board member of our school’s Solar Boat club, despite never being in the club prior, and despite having no experience with Solar Boat. Why? They needed someone to make a PSA. Wasting Water Is Oudated was the result.

In total, I did some amounts of research, wrote the introduction and closing, revised the other parts of the script, storyboard the video, did the voiceover, and edited the entire thing. This video was my first time ever using Blender (for the “infinite water” clip, as well as the grass and cactus clips), and I’m fairly happy with how it turned out.

The “50% wasted” clip took a huge toll on my computer when I edited it, as I didn’t realize to cache the noise used to define the shape of the water, leading to massive amounts of RAM, VRAM, and GPU power being taken up by the clip. I think I learned my lesson, though.

All in all, I still think this video is pretty solid, even if it’s been quite a while since I made it. Sadly, due to COVID-19, the PSA portion of the competition was scrapped, for some reason, so it was never used.

OA PTSA Winter Raffle Ad

_{November 15, 2020 ⸱ filmmaking, video editing}

My high school’s PTSA wanted to better advertise the raffle event they were running. I was given complete creative control to work on a video to advertise the event by showcasing the baskets, and I wanted to make the video as “hyped-up” as possible. Once again, I worked with Brandon Imai on the video.

I was inspired by the many tech channels that have a rotating display of a product to show it off. However, I don’t have an expensive setup where I can do that easily. So how was this video made? We bought some Philips Hue lights and lamp stands at Home Depot, spray painted my family’s kitchen’s Lazy Susan black, taped up black tablecloths to my living room wall, and had Brandon rotate the Lazy Susan from the floor while I’d film. Here’s what it actually looked like behind the scenes:

After filming, I edited the video, timing various cuts to music. I’m still quite proud of the video, considering it was made in two days (three if you count the trip to Home Depot the night before.) Several watching the ad for the first time on our school broadcast were really impressed with the video, which I’m really happy with.

Galactic Adventures of Military Empires: New Advanced Missions Edition

_{March 5, 2021 ⸱ filmmaking, video editing, music, programming, game dev}

Galactic Adventures of Military Empires: New Advanced Missions Edition, abbreviated as GAMENAME (yes, we were a bit cheeky with the title), is a board game designed for an Intro to Game Development class. The game involves strategizing to take over the solar system across the game board. The rules for the game, mostly designed by other members of the group, are available as a Google Doc (a PDF backup is available here).

The trailer video was entirely created within the span of half a day. During a playtest of the game in class, I brought my camera and took b-roll to make a trailer with. For whatever reason, I wanted a synthwave song with a time signature of 7/4, so I quickly composed a short song to use for the trailer. I then wrote the script, timed with the music, recorded it, and edited the video.

At 1:10 of the video, a digital representation of the board is shown. This was something I quickly threw together in a few hours to aid with playtesting, as the draft game pieces we were using were extremely hard to deal with, so having a digitized game board helped us to more quickly playtest. This was created using the React framework. The website is available here, and the source code is available on GitHub.

Time - Inception | Virtual Orchestra

_{May 2, 2020 ⸱ video editing, music}

During the 2020 quarantine, my friend Anthony Wang wanted to make a video for his arrangement of “Time” by Hans Zimmer, a part of the Inception soundtrack. Due to really tight time constraints with the video, the production ended up being a rather stressful experience.

I was in charge of editing the video portion of the project (someone else was doing the audio mixing). Because of the time constraints, I didn’t want to run into any problems learning how to more elegantly do this, so I ended up manually moving and cropping each video to fit the frames I made. This bit me, hard, due to vast changes to the layout that were eventually required. In addition, tons of timing issues had to be fixed, as, despite all of our efforts to prevent desync, most of the submitted videos from students were desynced and required manual adjustment. The revision process was frantic, stressful, and at times frustrating, but the final video turned out, in my opinion, amazing. I also really like the section with the scrolling frames, which was an idea I came up with for the video.

Oh, also: there’s an Easter egg hidden at the end of the video (prior to the spiel given by Anthony after the song ends). No one thus far has found it without the help of someone that has already seen it. Give it a try! gl;hf!!

Mathematics of Data Models Mini-Project: A Scene

_{March 5, 2022 ⸱ filmmaking, video editing, music}

For this project, we were assigned to create some sort of scene, with objects we can somehow connect to concepts in the class. We were tasked to describe the scene and how it our class’s concepts can be used to describe it. For this video, I create a very simple scene which I basically shoe-horned in concepts from class.

The content of the video itself is pretty simple, but I’m happy with how the presentation of the video turned out, considering I have very little experience in Blender, which was used for any 3D aspects. Additionally, the music in the video was composed by me. Why? Because I thought it’d be fun. :D

Miscellaneous Projects

_{N/A ⸱ programming}

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 travelling 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 unforseen 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.)