← Work
Creative Coding2025

Algorithmic Storytelling v3:
Interactive Narrative as Political Act

p5.jsSprite AnimationCollision DetectionInteractive NarrativePolitical Satire

The Project

Algorithmic Storytelling developed across three versions. Version 1 tested whether a canvas could carry narrative. Version 2 added sprite animation and interaction. Version 3 added collision detection, interactive zones, branching, and a political layer in which movement through the system changes the argument.

The brief was open-ended: synthesize everything I had learned across creative coding so far. I built a game that is also an argument.

Technical Implementation

The sketch runs in the p5.js web editor with p5.play handling sprites. JavaScript draws the canvas, tracks movement, and triggers narrative events. The implementation is deliberately small enough to inspect.

Sprite Animation

Character sprites use p5.play. The sprites have animation states, directional movement, and respond to player input in real time. Getting sprite sheets to load and animate correctly in the p5.js web editor was its own challenge.

Collision Detection and Interactive Zones

The narrative world is divided into interactive zones. When the player sprite enters a zone, it triggers events: dialogue, scene transitions, story branches. The collision detection handles both spatial boundaries and object interaction. Walk into the wrong place and the story responds.

Narrative Branching

The story is not linear. Player choices and movement patterns determine which threads activate. The branching is built directly into the game loop. The code and the story are the same thing.

The Political Layer

The politics are encoded in the mechanics: surveillance zones constrain movement, resistance changes the available path, and self-protection becomes a win condition.

From my author's note: “This project is a reflection of revolutionary behavior in a system which is increasingly headed towards an authoritarian surveillance state. The point of this part of the game is to reinforce that protecting one's self from this surveillance state is important.”

Mary Flanagan's Critical Play was a direct influence. Flanagan argues that games have always been political. They model systems, reward certain behaviors, punish others. The question is not whether a game carries values. The question is whether the designer is conscious of which values they are encoding. Algorithmic Storytelling v3 encodes its values deliberately: surveillance is a mechanic, resistance is a mechanic, self-protection is a win condition.

Games teach through repetition and consequence. Every time the player navigates a surveillance zone, the game is reinforcing a real-world instinct. That is the point.

Play It

The sketch runs live in the p5.js web editor. No install, no download. Open the link and play.

Open Algorithmic Storytelling v3 →

Skills and Concepts

p5.jsp5.play sprite libraryCollision detectionInteractive zone designNarrative branchingSprite animationCritical Play (Flanagan)Political game designCreative coding