Granger Uses Live ClojureScript Tool to End Game Tuning Guesswork

ibdknox

Pairing instant code re-evaluation with projected trajectory timelines eliminates blind trial-and-error variable tuning and exposes emergent gameplay mechanics.

AI-assisted summary of Live ClojureScript Game Editor — original source. Check the original for full context.

Source published: 2012-02-27

Key ideas

Chris Granger implemented a live ClojureScript game editor inspired by Bret Victor's 'Inventing On Principle' talk, featuring a side-by-side code editor and game canvas with instant re-evaluation. (0:02)
The editor enables real-time visual trajectory prediction, rendering ghost avatars to display the jump arc and letting developers adjust physics variables like speed and jump height on the fly. (1:48)
Level terrain can be modified directly within the canvas during runtime, recalculating collision physics and bounce paths against projected trajectories in real time. (3:13)
A physics logic bug regarding ceiling edge collision and jump state reset turned into an unintended sticky-ceiling mechanic, illustrating Victor's thesis on accidental discoveries in interactive environments. (3:13)

Detailed notes

## Background Published on YouTube by Chris Granger (ibdknox) on February 27, 2012, this video presents a live ClojureScript game editor prototype. According to the page description, the project was directly inspired by Bret Victor's demo in his landmark talk "Inventing On Principle" and Granger's exploration of connecting directly to one's creations.

## TL;DR Chris Granger demonstrates a split-screen ClojureScript environment where source code edits and canvas interactions update a running 2D platformer in real time without recompilation or page reloads. Granger adjusts player parameters like speed, jump height, and sprite color on the fly, while directly clicking the canvas to spawn or erase terrain beneath the active avatar. The centerpiece of the demo is a pause-state action projection feature that renders translucent ghost trails across the screen, allowing developers to visually tune physics values or build mid-air obstacle courses to hit precise landing targets. Throughout the walkthrough, Granger highlights how real-time tactile editing uncovers emergent gameplay, such as an accidental sticky-ceiling bug, turning tedious calibration into an intuitive, playful process.

## Atmosphere & style The presentation has the relaxed, unhurried feel of an authentic late-night coding breakthrough, capturing the excitement of a developer tinkering with a fresh idea. Granger's delivery is understated and conversational, allowing the visual power of instant feedback to take center stage without hype or pretense. There is a palpable sense of playful delight as abstract programming theories materialize into responsive ghost trails and accidental mechanics, leaving the viewer with an inspiring glimpse into the future of creative programming tools.

## Bulletin - [00:02](https://www.youtube.com/watch?v=7XUWpze_A_s&t=2s) Chris Granger implemented a live ClojureScript game editor inspired by Bret Victor's 'Inventing On Principle' talk, featuring a side-by-side code editor and game canvas with instant re-evaluation. - [01:48](https://www.youtube.com/watch?v=7XUWpze_A_s&t=108s) The editor enables real-time visual trajectory prediction, rendering ghost avatars to display the jump arc and letting developers adjust physics variables like speed and jump height on the fly. - [03:13](https://www.youtube.com/watch?v=7XUWpze_A_s&t=193s) Level terrain can be modified directly within the canvas during runtime, recalculating collision physics and bounce paths against projected trajectories in real time. - [03:13](https://www.youtube.com/watch?v=7XUWpze_A_s&t=193s) A physics logic bug regarding ceiling edge collision and jump state reset turned into an unintended sticky-ceiling mechanic, illustrating Victor's thesis on accidental discoveries in interactive environments.

## Key takeaways - [00:02](https://www.youtube.com/watch?v=7XUWpze_A_s&t=2s) Granger set out to recreate the live-editing concepts from Bret Victor's 'Inventing On Principle' talk using ClojureScript. - [00:02](https://www.youtube.com/watch?v=7XUWpze_A_s&t=2s) The environment pairs source code on the left with an active canvas on the right to eliminate traditional compile and refresh cycles. - [00:02](https://www.youtube.com/watch?v=7XUWpze_A_s&t=2s) Aesthetic adjustments, such as changing player sprite colors in the `draw-player` function, update instantaneously in the running game. - [00:02](https://www.youtube.com/watch?v=7XUWpze_A_s&t=2s) Core movement parameters like speed and jump height can be modified in real time, immediately altering physics behavior. - [00:02](https://www.youtube.com/watch?v=7XUWpze_A_s&t=2s) Direct canvas interactions allow clicking empty space to spawn terrain or clicking existing blocks to delete them while physics are running. - [01:48](https://www.youtube.com/watch?v=7XUWpze_A_s&t=108s) Pressing 'S' pauses execution to display a trail of ghost avatars representing recorded player input and projected forward trajectory. - [01:48](https://www.youtube.com/watch?v=7XUWpze_A_s&t=108s) Visualizing projected jump trajectories removes black-box guesswork when tuning multi-variable physics to clear specific platform gaps. - [01:48](https://www.youtube.com/watch?v=7XUWpze_A_s&t=108s) Adjusting jump height to 14 and run speed to 7 allows precise visual alignment with a target ledge before unpausing. - [03:13](https://www.youtube.com/watch?v=7XUWpze_A_s&t=193s) Placing terrain blocks directly into the projected ghost trajectory causes the simulation to instantly recalculate collision bounces and ricochets. - [03:13](https://www.youtube.com/watch?v=7XUWpze_A_s&t=193s) A flaw in jump-state reset logic inadvertently created a mechanic allowing the player to stick to ceilings by holding the spacebar. - [03:13](https://www.youtube.com/watch?v=7XUWpze_A_s&t=193s) Directly manipulating a creation in real time leads to emergent gameplay discoveries and validates Victor's philosophy of creative immediacy.

## Detailed walkthrough ### [00:02](https://www.youtube.com/watch?v=7XUWpze_A_s&t=2s) Recreating Bret Victor's Live Coding Demo

Inspired by Bret Victor's influential "Inventing On Principle" talk, Chris Granger wanted to test how difficult it would actually be to build a live editable game environment for himself. Setting up a two-pane layout, he displays ClojureScript source code on the left-hand side and the game canvas running on the right-hand side. The baseline mechanics function as a standard platformer: the player can run around, jump, interact with collision surfaces, and if the avatar falls off the edge, it dies and restarts. Granger emphasizes that Bret Victor's core thesis was that creators need an immediate connection to their work: “the point he was making with his game was that you wanted to be, you know, connected with the thing you had created, and that means being able to edit it in place.”

To illustrate this direct connection, Granger demonstrates modifying code parameters and viewing instant updates without triggering a manual rebuild or page refresh. Editing the `draw-player` function allows him to instantly swap the player sprite's color to pink. Moving past aesthetic changes, he tweaks fundamental mechanics on the fly: modifying the movement speed from a baseline of 5 up to 8 makes the character move swiftly, while lower values reduce the movement to a painfully slow crawl. Similarly, adjusting the jump height from normal values up to an exaggerated 22 sends the character soaring into the air.

Beyond code-level variable manipulation, the editor allows in-game environment creation. Granger demonstrates clicking directly into the game canvas to spawn terrain blocks or clicking existing blocks to delete them while the game engine is actively running. When the floor blocks underneath the avatar are deleted, the character immediately drops and falls continuously, showcasing that collision and physics respond to level-geometry edits in real time.

```mermaid flowchart LR accTitle: Live Game Editing Loop accDescr: Diagram showing how live ClojureScript code edits and direct canvas clicks update the running game state in real time.

subgraph Editor ["Editor Environment"] Code["ClojureScript Source<br/>(speed, jump, color)"] CanvasClicks["Direct Mouse Input<br/>(place / remove blocks)"] end

subgraph Runtime ["Live Game Runtime"] Engine["Physics & Collision Engine"] Renderer["Canvas Renderer<br/>(player & terrain)"] end

- **Player Speed Range Demoed**: Altered between 5 (default), 8 (fast), and lower values (painfully slow). - **Jump Height Range Demoed**: Pushed from base level up to 22 for extreme leaps. - **Direct Canvas Editing**: Left-clicking empty space spawns ground blocks; clicking existing blocks deletes them instantly while physics remain active.

---

[01:48](https://www.youtube.com/watch?v=7XUWpze_A_s&t=108s) Action Projection and Trajectory Prediction

The most powerful concept borrowed from Bret Victor's presentation is recording a sequence of player actions, pausing execution, and rendering a projected path through time while tweaking physics constants. Granger walks through this by attempting to reach an elevated ledge on the right side of the screen. He presses `S` to pause the game, which freezes the canvas and reveals a timeline of translucent ghost avatars marking every point along his recent trajectory. Because his current stats are insufficient to clear the gap, the ghost trail drops short of the destination.

With the game paused, Granger tweaks the code variables while watching the visual projection shift dynamically across the canvas. Raising the jump parameter to 14 elevates the peak of the arc, and bumping the run speed to 7 stretches the horizontal leap far enough to land securely on the upper ledge. Once the projected ghosts align with the target platform, he presses `S` again to resume the game, successfully executing the leap on the first try. Granger underscores the efficiency of this workflow compared to traditional black-box development: “one of the points he was making is it's significantly more efficient to be able to modify a game in this way, otherwise you would have had to have sat there and go, 'Well, is is 10 enough? Is 11 enough?' And in the case like this where you needed to edit multiple variables, could have taken you quite a while to figure it out.”

- **Pause Toggle**: Bound to the `S` key to freeze time and visualize previous and projected actions. - **Ghost Projections**: Displays historical positions and forward-looking trajectory calculations directly on screen. - **Target Platform Adjustments**: Tuned jump to approximately 14 and speed to 7 to land precisely on the ledge.

---

[03:13](https://www.youtube.com/watch?v=7XUWpze_A_s&t=193s) Environmental Modification and the Sticky-Ceiling Bug

Granger highlights an emergent capability that arose while experimenting with the system: pausing mid-jump and dropping obstacle blocks directly into the ghost trajectory. Placing blocks in the projected path forces the simulation to recalculate collisions instantly, revealing where the character would ricochet or become trapped. Granger builds walls directly around the ghost figures, observing how the projected avatar hits ceilings, deflects off walls, and redirects its landing site before unpausing.

```mermaid flowchart TD accTitle: Ghost Trajectory Recalculation Flow accDescr: Flowchart illustrating how pausing and modifying environmental obstacles updates the projected path of the player.

Pause["Press 'S' to Pause Game"] --> Record["Capture Inputs & Trajectory"] Record --> RenderGhost["Render Ghost Projections"] RenderGhost --> EditEnv["Place/Remove Blocks in Path"] EditEnv --> Recalc["Recalculate Collision Bounces"] Recalc --> RenderGhost RenderGhost --> Unpause["Press 'S' to Resume Gameplay"] ```

This live experimentation also surfaced an entertaining bug echoing a sentiment from Victor's presentation—that accidental glitches can spark innovative game mechanics. Granger's code intended to restrict jumping to moments when the player was moving upward, preventing jumps while descending. However, an earlier logic flaw reset the jumping state to `false` whenever an edge was touched from above. As a result, holding down the spacebar while colliding with the underside of an overhead surface caused the player to stick to the ceiling. Rather than an annoying flaw, Granger found himself clinging to high overhangs, placing new blocks across ceilings, and flinging the avatar across the screen. Reflecting on the experiment, Granger notes: “I definitely buy into the the the statements he made, right, that connecting to your creation really does, I don't know, bring you more into it and actually makes it a lot more fun.”

- **Dynamic Path Rerouting**: Drawing terrain over the projected ghost trail recalculates ceiling bounces and redirects exit paths live. - **Sticky-Ceiling Mechanic**: Caused by checking upward velocity and resetting jump state upon edge contact, allowing the player to latch onto ceilings by holding the spacebar. - **Source Code**: Released publicly on GitHub for the community to explore live ClojureScript game authoring.

## Notable quotes > [03:13](https://www.youtube.com/watch?v=7XUWpze_A_s&t=193s) connecting to your creation really does, I don't know, bring you more into it and actually makes it a lot more fun. — Chris Granger

## Mentioned Bret Victor, Chris Granger, ClojureScript, GitHub, Inventing On Principle

## Video description A live ClojureScript game editor based on the demo that Bret Victor did in his "Inventing On Principle" talk.

http://www.chris-granger.com/2012/02/26/connecting-to-your-creation/

[Source](https://www.youtube.com/watch?v=7XUWpze_A_s)

中文简报

Granger利用实时ClojureScript工具消除游戏调参盲猜将即时代码重新求值与预测轨迹时间线相结合，消除了盲目试错式的变量调整，并展现出突现的游戏机制。 Chris Granger展示了一个分屏ClojureScript环境，其中源代码编辑与画布交互可实时更新正在运行的2D平台游戏，无需重新编译或刷新页面。Granger即时调整了玩家参数（如速度、跳跃高度和精灵颜色），同时直接点击画布在活动角色下方生成或擦除地形。该演示的核心功能是暂停状态下的动作投影，它在屏幕上渲染出半透明的残影轨迹，使开发者能够以可视化方式微调物理数值，或构建空中障碍以命中精准的着陆目标。在整个演示过程中，Granger强调了实时触觉式编辑如何发掘出突现的游戏机制（例如一次偶然的天花板粘附Bug），从而将乏味的校准转变为直观且富有趣味的过程。 Chris Granger受到Bret Victor“依原则发明”演讲的启发，实现了一个实时ClojureScript游戏编辑器，具有并排的代码编辑器和支持即时重新求值的游戏画布。 (0:02) 该编辑器支持实时可视化轨迹预测，通过渲染残影角色来显示跳跃弧线，并允许开发者即时调整速度和跳跃高度等物理变量。 (1:48) 在运行时可以直接在画布内修改关卡地形，并根据预测轨迹实时重新计算碰撞物理效果和反弹路径。 (3:13) 一个关于天花板边缘碰撞和跳跃状态重置的物理逻辑Bug转变成了意料之外的“天花板粘附”机制，印证了Victor关于交互环境中意外发现的论点。 (3:13)

Source quotes

[3:13] Chris Granger: connecting to your creation really does, I don't know, bring you more into it and actually makes it a lot more fun.

Original transcript

[0:02] you know Brett Victor showed some really [0:03] really cool Demos in his talk and I was [0:05] curious kind of after I saw it how hard [0:07] it would actually be to go about trying [0:09] to to build one of these myself and so I [0:12] created sort of the live editable game [0:15] demo that he had so you can see here I [0:17] have some closure script code on the [0:18] left side I have the game running on the [0:20] right side and you know I can move [0:22] around I can jump there's Collision if I [0:25] fall off the edge I die and [0:28] restart um but the point he was making [0:31] with his game was that you wanted to be [0:33] you know connected with the thing you [0:34] had created and that means being able to [0:37] to edit it in place so for example you [0:40] know I have this draw player function I [0:42] can actually change the color of my [0:43] player right I do that bam now it's pink [0:46] right that's kind of [0:48] a trivial example let's actually change [0:51] the speed of the player right now I'm [0:54] really fast eight instead of five or I [0:58] can make myself really slow slow so now [1:01] I move really painfully slow here or um [1:05] you know I can change things like how [1:07] high my jump goes as an example is one [1:09] of the things he also did so now I jump [1:11] a little bit higher and let's make it [1:14] totally ridiculous 22 now I jump really [1:19] high um but I think the more interesting [1:22] parts of his demo are actually the fact [1:25] that you could edit the game within [1:26] itself right so this idea that oh I can [1:29] click around and stuff start adding [1:31] terrain so you can see here I can click [1:34] to add blocks I can click the blocks to [1:36] remove them if I want the game is all [1:38] responding to these events in real time [1:41] so for example I remove those blocks the [1:43] thing goes away right and I'll just sit [1:46] here and fall forever [1:48] um but by far the coolest thing he [1:51] showed was being able to do some actions [1:55] and actually pause the game and see how [1:58] changing some of the variables would [2:00] affect sort of that projection in time [2:03] ready and so if I wanted to be able to [2:05] jump up onto that platform over here on [2:07] the right hand side you can see here I [2:09] pressed s to pause the game and we see [2:13] the actions I've taken right so I [2:14] started here and there are these sort of [2:17] ghost images and this is where I was [2:18] ultimately ending up if I wanted to make [2:21] it so that I ended up on this platform [2:23] by doing the exact same set of actions I [2:25] can now modify the game right so I need [2:28] to jump a little bit higher all right [2:30] about 14 that looks pretty good looks [2:33] like I'll make it basically up there and [2:36] we need to go a little bit faster so [2:38] that we move that's seven and there we [2:40] go I made modifications to the the game [2:43] which modified the projection there's [2:46] really cool stuff so now if I press s to [2:47] unpause the game you'll see I'm here and [2:51] I'm able to do that jump just like you [2:54] saw and one of the points he was making [2:56] is it's significantly more efficient to [2:58] be able to modify a game in this way [3:01] otherwise you would have had to have sat [3:02] there and go well is is 10 enough is 11 [3:05] enough and in the case like this where [3:07] you needed to edit multiple variables [3:09] could have taken you quite a while to [3:10] figure it [3:13] out so this was a lot of fun actually to [3:15] put together and I think one of the [3:17] coolest things uh I got out of this [3:19] actually was you know it's great to be [3:22] able to to modify this and mess around [3:24] with like the jump and move speeds and [3:26] all that one of the more interesting [3:28] things however was jumping pausing and [3:31] then actually [3:32] placing uh things in your path right [3:35] placing blocks modifying the environment [3:38] and seeing what happens as a result so [3:40] you can see here based on the inputs I [3:42] gave it and all that if I put blocks [3:44] here and there this is where I would end [3:46] up right uh kind of close myself in [3:50] there see I'd hit the top hit there and [3:53] would have ended out through there um [3:57] and it's I I found actually that it's [4:00] just tons of fun actually messing around [4:02] with that and seeing how the sort of [4:04] physics play out in real life and all of [4:06] that [4:08] um and I think one of the funnier things [4:11] I discovered is actually something he [4:12] brought up in his talk is I had a bug [4:14] that ended up being a lot of fun um so [4:17] let me adjust the the jump speed down [4:19] here um you can see here I check to make [4:23] sure that I can only be jumping if I'm [4:25] uh moving up right so if I'm starting to [4:28] fall I can't be jumping anymore before I [4:30] had this automatically setting this to [4:32] false anytime I hit an edge the result [4:35] of that is actually if I hit an edge [4:38] from above I'll stick to it so for [4:41] example if I jump and hold the the space [4:44] bar button here I'll end up sticking to [4:47] this roof right and actually this ended [4:49] up introducing kind of a fun sort of [4:52] aspect to the game playay I go off the [4:53] side here come up on top right and then [4:56] add some more [4:58] blocks [5:00] and then I can you know fling myself all [5:02] over the place so uh I I definitely buy [5:05] into the the the statements he made [5:07] right that connecting to your creation [5:10] uh really does I don't know bring you [5:12] more into it and actually makes it a lot [5:14] more fun um this was just a really [5:17] interesting you know project to build um [5:21] put the code on GitHub so play around [5:23] with it and have [5:25] fun