Coastal Vectors

Finding Old Video Game Music

The other day my sister left me a voice mail hoping I could help her identify a tune she had in her head. She sang it and I instantly recognized it. I couldn’t remember where it was from, but I had the vivid recollection that it was from a game we played as kids.

I was also pretty certain it was a game we played on our Macintosh. I mentally went through some of the games we played a lot, and then it hit me; it was from Spectre VR!

Spectre was vector tank game where you have to collect flags while avoiding or destroying enemy tanks. It was available on many platforms. My first attempt to find the music track was to download MIDI files from a website that had collections of old video game music. I think these files were taken from the DOS version or some other platform, and none of them sounded quite right.

I decided to run the original game in my SheepShaver Mac OS 9 emulator to verify that this game was indeed the correct one. Bingo. Level 2 has the music in question!

The next thing I did was get a copy of ResForge (this is a forked version of ResKnife which is no longer in development). ResForge is an editor/viewer for old OS 9 resource forks. Back in the day, you could look at resource forks using ResEdit. Using ResForge, I was able to locate and export all the MIDI files from my original copy of Spectre.

The problem with MIDI files is that they only sound correct if they have the correct instruments, and unfortunately, the instruments (samples) were kept in a different resource. So the MIDI files didn’t sound right. I used the same program to export all the sampled instruments, and identified which ones were used for this music.

Example instrument (vibraslap):

I used Garage Band to import the MIDI track and then assigned a sound sampler to each voice. I loaded the appropriate sample into each one. For some reason I had to transpose a few of the samples to get it sounding just right.

Here is the final track:

If you compare it to the in game music capture, it sounds perfect. Kind of a silly diversion, but nostalgia can be intoxicating! What games from your childhood had memorable music?

Oh man. This music is going to be in my head all day…

Creating a 150 Year Old Soap Box

Have you ever heard of ACME soap? I can’t say definitively if the company still exists, but it was a soap brand from the early 1800’s. Growing up, my grandma’s bathroom was wallpapered with ACME Soap themed wall paper. It had various advertisements, pictures, logos, etc all representing the ACME Soap brand. I have memories of looking at the various artwork while doing my business there.

One of the most memorable ones was a four panel story of a boy that falls in a well. He is holding a bar of ACME Soap, and it lathers up so much that it lifts him to the top, thus saving him. Below are the four panels as seen in the official trading cards.

When the bathroom got remodeled, each grandchild was gifted this four panel advertisement framed for us to put in our own bathrooms, which we did.

I felt that the picture frame looked a little lonely on its own, and thought that making a soap box to accompany it would be appropriate. Although not at all historically accurate, I took the dimensions of a modern soap box, and styled it appropriately.

I found a graphic that was actually used on the antique soap boxes that depicts a man holding a bar of soap. I recreated the ACME logo and added some verbiage and legal text that I could find on various images of their products. According to what I found they were founded in 1811, and the trademark was registered in 1875.

I used an old paper texture to make it look more aged.

I printed it out on card stock, cut it out, and glued it up.

Now it sits and complements the original wall paper that sits on display in the bathroom.

Phasmophobia and Bézier Curves

I’ve been playing a lot of Phasmophobia recently. It’s a ghost-hunting game where you, and a team of up-to 3 other investigators explore haunted properties looking for evidence in order to determine what type of ghost is present. At the same time you have to try to not get killed at the hands of said ghost.

So what does this game have to do with Bézier curves??

We’ll get there. Trust me.

In the most recent release, the developers added in some riddles and clues to tease something coming in the next major revision. The problem I ran into was that if I had a question about a riddle I couldn’t solve, googling would only bring up spoiler-filled results. I don’t want answers, but little nudges in the correct direction.

I decided to take it upon myself to create a repository of information about the clues so one can decide which information to be exposed to, thereby minimizing risk of unwanted spoilage. I give you, Phasmophobia Rune Hints.

This still has nothing to do with Bézier curves! Get on with it!

Dear reader, I am nearly there. Believe me!

One of the evidences of ghost ghost activity in the game is what they call “Ghost Orbs”. They are floating balls of light that are only visible on video camera. (In reality these are specs of dust reflecting light close to a lens…) In any case, I wanted to spruce up my rune hinting website with some Phasmophobia appropriate ambiance. I wanted to add some ghost orbs.

My first implementation was to take a PNG of a ghost orb and use javascript to move it in a specific direction while fading it in and out at the ends of the animation. This yielded a result and was maybe passable, but it wasn’t great. My brother suggested to use Bézier curves in order to have it follow a more natural curved path.

In this example, the ghost orbs both start and end at the same location, however the one on the left follows a linear path while the one on the right follows a Bézier curve. (The points are chosen at random, so you may have to watch a few cycles to get an interesting comparison). Below is a simplified example of the code to demonstrate the minimal logic required to compute the curved path.

function find_point_on_line(p1, p2, percent){
    let p3 = {
        "x" : ((p2.x - p1.x) * percent) + p1.x,
        "y" : ((p2.y - p1.y) * percent) + p1.y,
    }
    return p3;
}

function follow_bezier_curve(b1, b2, b3, percent){
    if (percent >= 1) return; // We finished
    let p1 = find_point_on_line(b1, b2, percent);
    let p2 = find_point_on_line(b2, b3, percent);
    let p3 = find_point_on_line(p1, p2, percent);
    move_orb(p3);
    timer = setTimeout(() => follow_bezier_curve(percent+.001), 1000/60);
}

Bézier curves are pretty common. I’ve been using them for decades in software like Adobe Illustrator or Affinity Designer. I remember learning about them in college. But I’ve actually never had a need to program my own.

As it turns out, they are really simple. A quadratic Bézier curve uses 3 points; a, b, and c. First you draw a path from a to b, and from b to c. Then you draw paths between points at equivalent subdivisions on these paths. The result is a really nice curve. It’s really hard to explain with words, so try out this interactive animation instead:

This is the type of Bézier curve I used on the Phasmophobia site.

There are also cubic Bézier curves. Cubic curves are basically two quadratic curves combined. Let’s say you have 4 paints; a, b, c, and d. You would create two quadratic curves; abc, bcd, then your final curve will be created by the same process along the resulting curves.

These 4-point quadratic curves are how vector drawing programs like Illustrator build paths. the outer two points act as nodes, and the inner two act as the handles.

Although not very complicated, I thought it was a fun diversion, and wanted to share.