The ASCII Backdrop Custom Script

Ok then: let’s talk about the ASCII backdrop custom script!

Introduction

If you’ll allow me, I think this script is probably the coolest I’ve implemented into the game. I mean, you’ve seen it in action: it’s mesmerizing! 

Now, I can’t take all the merit for it - you might’ve seen it already mentioned in the about section of Spirit of Hunger, but this custom insert is derived from another project called “The Way of Code”, from Rick Rubin. I myself don’t really get what it’s trying to do or say as a whole, but I do know I like those little sections in between were really cool, and that one in particular got my attention. So, with the help of Claude, I attempted to adapt one of those experiments onto the Chapbook format.

I think this should outline to you why I’m making these technical sections free for all, and not paywalled them: I just don’t feel comfortable getting people to pay for what is essentially AI generated code. That… feels off. While I have:

• Spent hours making it work

• Tweaked it to be easy to use and intuitive

• Modified the parameters of the patterns to look as best they could

• Debugged it a lot

I also, very simply, did not write the final code by myself. I was, at best, a creative director.

What It Does

Think of it like animated wallpaper made entirely of text characters. Instead of showing static images or solid colors behind the main text story, the script draws constantly-shifting patterns using simple text characters like:

• █

• ▓

• ▒

• ░

And last but not least:

•  ·

How It Works

The script treats the screen like a mathematical canvas. It:

• Divides into a grid of character positions (like graph paper)

• Calculates a "brightness value" for each position using mathematical formulas that change over time

• Converts those values into different characters - bright areas get solid blocks (█), medium areas get textured characters (▓, ▒), dim areas get dots (░, ·), and dark areas stay empty

For example, the mathematical formula that creates the backdrop for the cutscenes looks like this:

      loading: (x, y, t, w, h) => {

        const steamFlow = Math.sin(x 0.2 + y 0.1 - t 0.8) Math.exp(-y * 0.05);

        const rising = Math.sin(x 0.3 + t 0.6) Math.cos(y 0.2 - t * 0.4);

        const drift = Math.cos((x + y) 0.15 + t 0.5) Math.sin(y 0.1 - t * 0.3);

        return steamFlow 0.4 + rising 0.3 + drift * 0.3;

And translates into this:

Patreon is compressing the living hell out of this gif, but I think you get the picture (say hi to the mouse cursor! Hii!!)

Why This Approach?

This method serves several purposes. One of them, of course, is Atmosphere. Each pattern creates a different emotional backdrop that subtly reinforces the story's mood without competing with the text for attention. 

Text-based animation is also considerably lighter than video or complex graphics, so it runs smoothly, (hopefully) does not lag, and maintains the game's focus on the text on top of it.

***

If you want to know more about its workings, or simply cycle through all of the patterns I have placed into the game, you can play around with the tech demo down below.

Or also import the .twee into twine, too! There you’ll be able to see all of the variables I have set up in order to control these patterns. I can assure you it’s all very easy to play around with.