ProcSite

Reinvent (a) Hacking (minigame)!

Comment

Inspiration

Heavily inspired by Deadeye Deepfake Simulacrum by Nodayshalleraseyou & light inspiration from The Fable by Katsuhisa Minami.

What it does

The program seeks to expand upon a minigame in Deadeye Deepfake Simulacrum, turning the concept it expressed into a standalone, full featured game with lots of depth.

How we built it

Fastnoise lite instances generate random noise onMount & when certain events coming to pass. Mathematical distortions + domain warping over time are applied to it to give a fluid animated look. The "buckets" of noise, determined by brightness, are drawn as curated ASCII characters which cycle over time at random speeds. Sometimes, a map is generated with brightness tiles instead of ASCII characters for more variation. I would like to add more diversity in the future.

Color morphing is done through a smoothstep interpolation.

The pipeline of the game is generally: Intro -> decoding animation-> terminal animation->game->level complete-> decoding animation -> repeat

Of course, level complete doesn't always happen and there is a different state to handle that as well.

The overlord intro is pretty simple, just a dialogue tree wired up by Claude after I made a few stubs. The blinking animation is just switching between two ASCII emojis.

Now the fun part! How was the game made?

A graph is procedurally generated which represents a computer network. In this graph, nodes are placed at random and given random roles (examples include server, door, overlord). 8-15 random nodes are created with different types, at least one overlord node, and logic in place so hopefully the level doesn't feel too easy.

The generation algorithm is as follows:

  1. build a minimum spanning tree.

  2. add extra edges (node count * one of many multipliers).

  3. Mark 3 nodes (at least 2 nodes away from the starting node) as targets.

There's lots of other logic in there such as ICE traps which can have one of three random debuffs associated with them. Enemy hacker, etc.

Player state is handled in a player interface structured like a dictionary called player.js

BFS is used liberally for antagonists.

It's used in tandem with random pathing for tracer agents. The relationship between random movement and BFS for tracer agents is scaled by where the likelyhood of BFS grows as detection increases. min(detection / 0.5, 1).

Enemy Hacker uses BFS to move towards targets.

Every time the word decoding animation plays, the last word whose decoding animation is shown on screen will influence some part of the simulated network. I call these Network events. Examples include Neural doubling Overlord's detection scaling, and Socket allowing the player to hop to any previously discovered node regardless of edge connection with a 10% detection cost.

The minimap computes the position of nodes using a force directed graph algorithm. nodes have a base repulsion of 2000 which I may need to increase in the future.

Nodes are initialized in a circle with random jitter. and 80 iterations of repulsion push them apart. Attraction pulls connected nodes together, gravity pulls towards the center, and damping decays velocity. Final positions are clamped within the bounds of the minimap (which extends beyond the minimap window on initialization). Each node has a distinct shape thanks to Claude helping me with SVG rendering.

Challenges we ran into

I very quickly ran into a scope creep/warp challenge at the beginning of this hackathon. My initial idea was something along the lines of: procedurally generate websites from the ground up, code and all. However, as I did my research, that scope shrank to: procedurally generate the UI for a website. As I was playing around with cellular noise animations, I was reminded of the hacking minigame in Deadeye Deepfake Simulacrum, and decided to create a web based version with more depth.

I also ran into the challenge of relearning svelte after 3+ years of not doing any web dev. Thankfully, Svelte is much nicer to work with than some other frameworks (cough cough).

Accomplishments that we are proud of

I'm proud of the procedural aesthetics, they turned out nicer than I expected. The entire main animation loop is driven by a single requestAnimationFrame loop, which calculates and updates all the effects, dt, phase-specific logic with a few custom java script helpers like fractal, grid, etc.

What we learned

I learned that:

  • ValueCubic and Value noise looks great with a bit of brightness bucketing, ASCII overlay, and domain warping over time.

  • Expanding and increasing the scope of cool, yet small ideas can be a great exercise and motivator to code! (Instead of working on the same behemoth project all the time).

  • Dialogue trees are a pain to write by hand, but creating the dialogue tree stubs and having AI walk through all the custom dialogue options with you is a great use case for using AI to save time if you're working on a multiple choice story type game.

What's next for ProcSite

I plan to keep working on this project. I had a lot of fun coming up with new terminal commands, antagonists, updating the minimap with new node shapes/entity symbols. Concrete things that are coming: I want to add more network effects, terminal commands, node properties (make nodes besides overlord, servers, and targets actually do something). I also want to port this project to c++ and extend it from a desktop application standpoint. I also want to give the terminal more QOL functionality, such as last command, autocomplete commands, and maybe some in-terminal animations for certain commands (namely: spike, kill, and scan). The application definitely needs a new name as well.

Built With

Share this project:

Updates