31:T415,viewof game = { ({ prompt: "I have an image element called backdrop. I would like it to be the background, and the view and start button to be absolutely placed on top. Call the cell game ", time: 1701104418893, comment: "Create a cell to layout the background image, view, and start button" }); const view = positionView; const startButton = positionStartButton; const game = htl.html`

${backdrop}

${game_view}

${startButton}

`; return game; }32:T545,## A game is an analogue for complex software I am not actually interested in game programming. I am using a game as an analogue for _"complex software"_. Previously, I have struggled with getting LLMs to scale to hard programming tasks. I hypothesise that it's a UX issues, so I have been working on an alternative programming model using materialised LLM context in computational notebooks ([roboco-op](https://observablehq.com/@tomlarkworthy/robocoop)). I needed a programming grand challenge to test the approach, and this is the article that summarises the results of that challenge. I wanted to explore all the random things a real program contains, so I aimed to implement all the ingredients of a real game: score, lives, enemies, graphics, audio and art. Of course, if I wanted to build a real game the best use of time would be to use a game making framework, but in general there are not always frameworks for every type of software that you want built. Thus I made this game "from scratch" using web technologies only, the graphics, for example, are just SVGs, but using all the advanced options available (SVG filters to provide blur, displacement filters to fit the boxing, Web Audio API etc.). So programming a game is hopefully transferable to achieving state-of-the-art results in other programming domains. Can LLM coding scale?33:T625,time_spans = events .reduce((acc, d, index) => { if (index == 0) { acc.push({ ...d, start: new Date(d.time.getTime()), ...enrich_time(d.time) }); } else if ( events[index - 1].time.getTime() + 30 * 60 * 1000 < d.time.getTime() || events[index - 1].notebook !== d.notebook ) { acc[acc.length - 1].end = new Date(events[index - 1].time.getTime()); acc.push({ ...d, start: new Date(d.time.getTime()), ...enrich_time(d.time) }); } if (index == events.length - 1) { acc[acc.length - 1].end = new Date(d.time.getTime()); } acc[acc.length - 1].min_node_id = Math.min( d.node_id, acc[acc.length - 1].min_node_id || d.node_id ); acc[acc.length - 1].max_node_id = Math.max( d.node_id, acc[acc.length - 1].max_node_id || d.node_id ); return acc; }, []) .map((data) => ({ ...data, ...enrich_time(data.end, "end_") })) .flatMap((data) => { if (data.start.getHours() > data.end.getHours()) { const boundary = new Date(data.end); boundary.setHours(0); boundary.setMinutes(0); boundary.setSeconds(0); boundary.setMilliseconds(0); new Date(data.end); return [ { ...data, end: boundary, ...enrich_time(boundary, "end_"), end_minute: 24 }, { ...data, start: boundary, ...enrich_time(boundary), end: data.end } ]; } else { return data; } })34:T85a,## Effective Human-in-the-loop Collaboration with LLMs The main hypothesis driving this work, is that human experts and LLMs are good at different things, and to make the expert better we need a way for the two to effectively collaborate. For instance, LLMs are not good at producing correct programs, strategising solution execution or aesthetics. However, they are good at boiler-plate, have a large pool of general knowledge, are fast at switching gears and can adapt quickly in-context. A human expert is very often faster at an LLM at debugging, but an LLM is faster at generating a reasonable approach to a program. [Roboco-op](https://observablehq.com/@tomlarkworthy/robocoop) tries to reconcile these different strengths by using a computational notebook as the collaboration medium. Notebooks have the advantage of dividing a large program into smaller chunks that can be iterated on independently. This is perfect for an LLM to try something out and a human to improve upon it. LLM programming mistakes are quickly identified by the computational medium itself and the human can choose whether to fix it themselves, or ask the LLM to fix it. For minor syntax mistakes, the human can edit the cell, for major approach mistakes, a re-prompt with added context might be quicker. A human expert is in control of the overall evolution of the program. Critical for LLMs performance is the context. [Roboco-op](https://observablehq.com/@tomlarkworthy/robocoop) uses the notebook cells to generate the context. This means, human corrected cells are the truth. And the human is able to prune context simply by removing cells. This also implies forking a notebook forks the context. During development we used forks to delimitate major phases in development, and deleted all irrelevant cells before moving to the next phase. For instance, part I spends a significant proportion of the notebook dedicated to ideating and designing an Entity Component System, however, in part II, all that design work had been deleted because we now had a working and used ECS system and so the early ideas ware no longer helping the LLM writing code. 35:T520, Direct manipulation of the LLM context through normal notebook operations is a major workflow improvement. You can scrub development scaffolding noise and keep the context small with high signal-to-noise ratio. Because LLMs also learn in-context, I found the LLM climbed levels of abstraction as the project went on. In Part II, our prompts were quite technical and low level, for example, our early [physics system](https://observablehq.com/d/8571aa583512f2a4#PhysicsSystem) was ``` "Write a PhysicsSystem that extends deps.resolve("BaseSystem") with a tick function that moves everyone\'s position: [number, number] based on velocity, and alters velocity based on forces (and resets force)" ``` But through in-context learning, by part IV we could prompt in high level game development language, for example the [bullet intersection system](https://observablehq.com/d/fbab829d5bcdd7e2#PlayerBulletHitSystem) was:- ``` "Add a system for checking when a player bullet overlaps an enemy ship the ship should be destroyed." ``` Because working code becomes part of the context, the LLM evolves to fit the working idioms of the project. Because a human is fixing code as the project evolves, so its context is filled with working examples and thus its ability to one-shot working code increases over time. 36:T421,viewof crtWarpAdjustment = { ({ prompt: "So the CRT display backdrop is barrel warped, and a bit trapazoidal. We need another filter to apply a similar distortion. Create a UI for adjusting barrel warp and trapazoid parameters", time: 1701199826611, comment: "Create a UI for adjusting CRT display barrel warp and trapezoid parameters" }); const crtWarpSettings = view`

CRT Warp Adjustment

${[ "barrel_warp", Inputs.range([-1024, 1024], { value: 1024, step: 0.01, label: "Barrel Warp" }) ]} ${[ "trapezoid_warp", Inputs.range([-1, 1], { value: 0, step: 0.01, label: "Trapezoid Warp" }) ]} ${[ "warp_scale", Inputs.range([0, 100], { value: 2, step: 0.01, label: "Scale" }) ]} ${[ "displacement_size", Inputs.range([0, 1024], { value: 16, step: 0.01, label: "Size" }) ]}

`; return crtWarpSettings; }37:T404,warpImageTest = { ({ prompt: "I can;t tell if the warp image generator works, can you draw a checkboard with SVG with the filter applied to test it", time: 1701293709944, comment: "Create a checkerboard SVG with CRT warp filter applied to test the warp image generator" }); const warpFilter = deps.resolve("crtWarpFilter")(0, 0); // Applying moderate barrel warp for test const warpMapImage = deps.resolve("crtWarpDisplacementMap"); const checkerboard = htl.svg``; return checkerboard; }38:T647,crtWarpDisplacementMap_v5 = { ({ prompt: "Maybe barrel distortion is not the right term. I want the corners pulled in. So displacements far from the center should be deflected towards the center", time: 1701296188546, comment: "Generate displacement map for CRT warp effect with corners pulled towards the center" }); const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = canvas.height = crtWarpAdjustment.displacement_size; // Use a power of 2 for better texture performance // Draw the displacement map const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; const warpEffect = crtWarpAdjustment.barrel_warp; for (let index = 0; index < data.length; index += 4) { const x = (index / 4) % canvas.width; const y = index / 4 / canvas.width; const dy = y / (canvas.height * 1.0) - 0.5; let dx = x / (canvas.width * 1.0) - 0.5; const distance2 = dx * dx + dy * dy; data[index] = 127.5 + dx * distance2 * distance2 * warpEffect; // Red channel for X displacement data[index + 1] = 127.5 + dy * distance2 * distance2 * warpEffect; // Green channel for Y displacement data[index + 2] = 127; // Blue channel not used data[index + 3] = 127; // Alpha channel } ctx.putImageData(imageData, 0, 0); // Convert canvas to an image blob const warp = await new Promise((resolve) => { canvas.toBlob((blob) => { resolve(URL.createObjectURL(blob)); }); }); deps.register("crtWarpDisplacementMap", warp, 4); return warp; }39:T4b2, The purpose of this cell and its supporting cells was to figure out non-linear distortion of the image plane to fit the game view into a warped CRT backdrop. The LLM was totally unable to solve this task. Getting stuck on this task was the motivation for forking part VIIb. The LLM kept making a common beginner mistakes with image manipulation. It made the classic mistake of generating a displacement map by first iterating the source pixels, calculating a displacement and then writing those values into the destination image. The major problem with this strategy is the the destination image will have areas with no values, as there is no reason every source pixel will map to every destination pixel. The correct approach is to iterate the destination pixels, calculate the *reverse* displacement, and sample from the source image. It took me quite a while to figure out what the problem was, and ultimately I coded the core algorithm myself. The LLM was quite helpful in setting up the environment for success though. It built the scaffolding used to solve the task. For example, the preview, checkerboard pattern and reactive UI to fiddle with artistic parameters, *were* coded by the LLM.3a:Taa6,viewof enemy_ship_template_v4 = { ({ prompt: "OK I like the latest ship, can we make the center elipse spin around 360 with an SVG animation. Do not add or remove controls, or change values, other than than add spin speed UI", time: 1700598322777, comment: "Add spin speed UI and implement SVG animation for the center ellipse of the enemy ship" }); const enemyShipSettings = view`

Enemy Ship Settings

${["scale", Inputs.range([0.05, 5], { value: 0.75, label: "Scale" })]} ${["width", Inputs.range([0.1, 2], { value: 0.5, label: "Width" })]} ${["height", Inputs.range([0.05, 1], { value: 0.1, label: "Height" })]} ${["color", Inputs.color({ value: "#000000", label: "Color" })]} ${[ "stroke_width", Inputs.range([0, 0.05], { value: 0.018, label: "Stroke width" }) ]} ${[ "stroke_color", Inputs.color({ value: "#46ff2e", label: "Stroke color" }) ]} ${[ "center_ellipse_width", Inputs.range([0, 1], { value: 0.15, label: "Center ellipse width" }) ]} ${[ "center_ellipse_height", Inputs.range([0, 1], { value: 0.2, label: "Center ellipse height" }) ]} ${[ "spin_speed", Inputs.range([0, 10000], { value: 400, step: 100, label: "Spin speed (ms for full rotation)" }) ]}

`; const updateEnemyShipTemplate = () => { const settings = enemyShipSettings.value; const centerEllipse = htl.svg` `; const enemyShip = htl.svg` ${centerEllipse}`; assets.set("enemyShip", enemyShip); return enemyShip; }; // Preview enemy ship template const preview = htl.svg``; enemyShipSettings.addEventListener("input", () => { updateEnemyShipTemplate(); preview.replaceChild(assets.get("enemyShip"), preview.firstChild); }); return htl.html`${enemyShipSettings}${preview}`; }3b:Tad1,viewof PlayerControl_v6 = { ({ prompt: "Can we make a new version of keyboard controls that includes a UI for changing the values", time: 1700398068677, comment: "New version of PlayerControl with UI for changing control values" }); const controlSettings = view`

Player Control Settings

${[ "rotation_speed", Inputs.range([0.01, 0.1], { value: 0.03, step: 0.01, label: "Adjust rotation speed" }) ]} ${[ "thrust", Inputs.range([0.0001, 0.001], { value: 0.0004, step: 0.00005, label: "Adjust thrust" }) ]} ${[ "bullet_speed", Inputs.range([0, 1], { value: 0.02, step: 0.00005, label: "Bullet speed" }) ]} ${[ "bullet_ttl", Inputs.range([0, 500], { value: 80, step: 1, label: "Bullet ttl" }) ]}

`; class PlayerControl extends deps.resolve("BaseSystem") { constructor() { super(); } tick() { this.controlSettings = controlSettings.value; const player = entities.get("player"); if (!player) return; if (keysPressed["ArrowLeft"]) { player.velocity[2] = -this.controlSettings.rotation_speed; } if (keysPressed["ArrowRight"]) { player.velocity[2] = this.controlSettings.rotation_speed; } if (!keysPressed["ArrowRight"] && !keysPressed["ArrowLeft"]) { player.velocity[2] = 0; } if (keysPressed["ArrowUp"]) { const rotation = player.position[2]; player.velocity[0] += Math.cos(rotation) * this.controlSettings.thrust; player.velocity[1] += Math.sin(rotation) * this.controlSettings.thrust; } if (keysPressed["ArrowDown"]) { const rotation = player.position[2]; player.velocity[0] -= Math.cos(rotation) * this.controlSettings.thrust; player.velocity[1] -= Math.sin(rotation) * this.controlSettings.thrust; } if (keysPressed[" "]) { keysPressed[" "] = false; const rotation = player.position[2]; const bulletVelocity = [ Math.cos(rotation) * this.controlSettings.bullet_speed + player.velocity[0], Math.sin(rotation) * this.controlSettings.bullet_speed + player.velocity[1], 0 ]; const projectile = { id: `p${Date.now()}`, template: "projectile", position: [...player.position], velocity: bulletVelocity, ttl: this.controlSettings.bullet_ttl }; entities.set(projectile.id, projectile); } } } deps.register("PlayerControl", new PlayerControl(), 6); return controlSettings; }3c:T8c6,RendererSystem_v5 = { ({ prompt: "Our render system should use the generator and generator args if available", time: 1700507770128, comment: "Update RendererSystem to use generator function if available" }); class RendererSystem extends deps.resolve("BaseSystem") { constructor(...args) { super(...args); this.game_view = deps.resolve("game_view"); this.assetVersions = new Map(); this.boulderGenerator = deps.resolve("boulder_generator"); this.boulderGeneratorArgs = deps.resolve("boulder_generator_args"); } tick() { const assets = deps.resolve("Assets"); const unfiltered = this.game_view.querySelector(`#unfiltered`); const root = this.game_view.querySelector(`#game-root`); for (let [id, entity] of entities) { if (!entity.position) return; // Set attributes or create transform if needed let transform = this.game_view.querySelector(`g[id=${id}]`); let generator = deps.resolve(entity.generator); let template = assets.get(entity.template); if ( !transform || transform.generator !== generator || transform.template !== template ) { let svgElement; if (generator && entity.generator_args) { // Use generator function if available svgElement = generator(...entity.generator_args); } else if (template) { svgElement = template.cloneNode(true); } transform = transform || htl.svg``; transform.textContent = ""; transform.appendChild(svgElement); transform.template = template; transform.generator = generator; if (entity.unfiltered) { unfiltered.appendChild(transform); } else { root.appendChild(transform); } } // Sync transform to entity's position and rotation transform.setAttribute( "transform", `translate(${entity.position[0]} ${entity.position[1]}) rotate(${ (entity.position[2] * 180) / Math.PI })` ); } } } deps.register("RendererSystem", new RendererSystem(), 5); }3d:T94d,### keysPressed Another fairly solid piece of code the LLM wrote was the `keysPressed` adapter, which converts between the DOM style, event-driven, push approach, to a pollable register that is favoured in game development. ~~~js keysPressed = { ({ prompt: "Write a cell that listens to the keyboard and records which keys are up or down and swallows Array events to prevent scrolling", time: 1699995151091, comment: "Cell to record key up/down states and prevent scrolling with arrow keys" }); const keysPressed = {}; function keydownListener(event) { if (event.key.startsWith("Arrow")) event.preventDefault(); // Prevent scrolling with arrow keys keysPressed[event.key] = true; } function keyupListener(event) { if (event.key.startsWith("Arrow")) event.preventDefault(); // Prevent scrolling with arrow keys keysPressed[event.key] = false; } window.addEventListener("keydown", keydownListener); window.addEventListener("keyup", keyupListener); // Cleanup listeners when cell is re-evaluated or notebook is closed invalidation.then(() => { window.removeEventListener("keydown", keydownListener); window.removeEventListener("keyup", keyupListener); }); return keysPressed; } ~~~ The `keysPressed` has several interesting features. The LLM has learnt through in-context learning that it should deregister listeners. Resource cleanup is needed due to a resource leak side effect of the notebook execution environment when the cell recomputes. It was not taught to do this in the system prompt, it has learnt the technique from earlier examples within the notebook. It's using the `invalidation` promise of the [Observable runtime](https://observablehq.com/@observablehq/invalidation), which is something you would not find in vanilla Javascript projects. Furthermore it's commented its use of this unique feature. This cell demonstrates how the LLMs replicates code styles present in its context window. This is consequential, as it enables transfer learning of code skills just by copy and pasting cells across notebook. [Roboco-op](https://observablehq.com/@tomlarkworthy/robocoop) has a [dedicated notebook](https://observablehq.com/@tomlarkworthy/robocoop-skills?collection=@tomlarkworthy/robocoop) for cells meant for copy and pasting skill into notebooks to specialise the LLM helper quickly. 3e:T510,### Skill cells: `markdown_skill`, `bindableUISkill` The notebook used two reusable skill calls from [skills notebook](https://observablehq.com/@tomlarkworthy/robocoop-skills?collection=@tomlarkworthy/robocoop). `markdown_skill` gives the LLM the ability to write advanced markdown, and the `bindableUISkill` gives it the ability to write reactive UIs. Using a `markdown` cell is a great way to have a semi-structured dialog with the LLM. You can ask for a markdown cell containing a plan for instance. This was used extensively in the ideation phase of part I. After getting the basics of the game working initially in `part II`, it became obvious that to get the aesthetic feel of various systems right artistic scale would require tweaking parameters. Tweaking parameters in code did not feel great, so instead, I started using the LLM to generate systems with reactive UIs attached. The `bindableUISkill` gave it those powers in part III, and is a technique I expect to be useful in future projects. One limitation of the observable platform is UI changes are forgotten after a page refresh. So for the notebook to remember a settings you need to update the initial value in the code. Many of the notebook edits are trivial parameter materialisation after manually tweaking a UI setting. 3f:T703, ### Incremental Dependancy Injection I realised ECS was not enough to break down the project enough for collaboration with an LLM. With an LLM you expect to write sequential revisions of each functional component. However, Observable notebooks don't support multiple implementations under a single name. So I again asked the LLM for help on development of a *incremental dependancy injection* system. This piece of architecture was too hard to explain and in the early stages, and the LLM didn't have much Observable runtime competency, so ultimately I coded this critical piece of supporting code myself. You will see throughout the work names like `renderSystem_v1`, and within the code registrations with `deps` under the name `renderSystem` with a version `1`. Whenever a reference is required, you use `deps.resolve("renderSystem")` and it will return the value of the highest registered version number under that name. Its a dependancy injection system that supports multiple versions of a dependancy in the runtime at the same time, that resolves to the highest version present. The LLM was very good at pickup up the resolution system and running with it. It very quickly learnt to increment the version suffix in variable names when generating a new version and wiring that into the dependancy system correctly. LLMs excel at these higher order source code boilerplate. It is the kind of ceremony I would find annoying if I were coding it manually, but because the LLM does it, it was actually a really neat and enabled rapid iteration without losing context of previous attempts. This form of dependancy injection is something I would like to improve upon and build out into a reusable skill in the future. Its the kind of extra support needed to enable better workflows with LLMs40:T96f,## Structuring Code to Support LLM Help New constraints on maintainability occur when the code base needs to be updatable by an LLM. I found it was bad practice to have a cell implement more than than functional one task, because that caused re-promping difficulties. As the project went on I converged towards an ultra-decoupled design. For instance, near the beginning of the project I created a [`GameLoop`](https://observablehq.com/d/fbab829d5bcdd7e2#GameLoop_v4) component that was responsible for bullets hitting boulders, and for boulders splitting and for incrementing the score. In normal development workflow I might add features to this game loop over time, but getting the LLM to reproduce the existing features and add a new feature was error prone. The effect gets worse as the cell gets more features, so it's clearly a scalability bottleneck. So later on in the project I switched strategy on how I add features. Features like [enemies spawning](https://observablehq.com/d/ef7ccf2e0ed653d1#EnemyShipSystem_v2), [enemies shooting lazers](https://observablehq.com/d/ef7ccf2e0ed653d1#EnemyLazerSystem) and [enemy lazers hitting the player](https://observablehq.com/d/ef7ccf2e0ed653d1#PlayerLazerEnemyCollisionSystem) were written as independent systems which could be iterated on individually. The combination of Entity-Component-System and Iterative Dependancy Injection were important to decouple the program, and this helped getting the most value out of the LLM collaboration. I do not expect that ECS is the only approach though. Any architecture that supports decoupling might be viable. There are several that might work: event buses, rule systems _etc_. Understand that (roboco-op at least), is not good at updating the code within functions. So you really should aim to decompose a program into individual, very small, independently iterative functions. Generally this is good software engineering practice, but the LLM collaboration really forces us to take it to an extreme degree. The Observable notebook environment supports this style of decoupled development well. I think traditional software development will struggle with this, as tests are usually separate to functions and usually there is a lot of config to setup before parts of code can be executed. Applying LLMs effectively to professional coding will require a rethink of how projects are structured and executed. 41:T7eb,## Bad Project Decisions By Part V I realised our game system contained a ton of code repetition. I asked the LLM _"There is a lot of repetition in our code base. Let's write plan to refactor it and extract common functionality. Describe what we want to extract and how each cell should be modified in markdown"_ It responded with what superficially appeared to be a good game-plan for refactoring out some of the common functionality. We started by generating the new routines, and then started refactoring existing components. However, I quickly realised the abstractions it had suggested were not actually general purpose enough to fit all the projects use-cases, and also they were quite buggy. The right thing would have probably been to rollback, but I had also added some good new features so I did not want to lose work. So In the end I just stopped midway through a refactor. This poisoned the context window with a bad strategy for UI generation, which never recovered. From that point onwards I had to manually bug fix all attempts at UI generation. There several lessons here - LLMs are not very good at refactoring. - Keeping your context full of only one way of doing things is a good idea - Code repetition is not actually such a big problem when most of your code is generated anyway. - Its hard to get the LLM to change course once project idioms are established. Currently I would consider a refactor a very risky thing to do. There might be a better workflow, but currently roboco-op only allows a single cell to be changed at a time, and the LLM has very little feedback into what gets broken. We saw it struggle with coupled components before. Code quality is critical to maintain so that the LLM continues on a good trajectory, thisis is a headwind for velocity. Refactoring is a difficult thing for humans to do as well. In human driven development we use unit test suites to pivot our codebase. I could imagine trying some variant of test driven development might help, but it's just a hunch. 42:T757,## Closing Thoughts You can download an standalone export of the final project [here](https://api.observablehq.com/d/5cc90faa3b651500@4411.tgz?v=3). The final notebook had 2500 lines of code. Given it took 27 hours (4 days), thats about 600 lines of code a day. This is well above average. Whilst I can occasionally beat that, my subjective experience was that this was mentally easier than going full belt. Some of the harder problems I had to step in and code up (and this is where most time was spent), I am pretty sure the LLM took a lot of cognitive burden from me, so I only had to exert serious mental energy sporadically. I think there is big potential for LLMs to help with serious work along side subject matter experts. The way it adapts to a novel programming paradigm like Observable, and pickup cues from manual demonstration means they are quite flexible. By copying reusable skills from other notebooks, you can mix up specialists on demand. This work showed me LLMs can help expert programmer work faster if the expert can correct them quickly in-band. LLMs can climb levels of abstraction into domain jargon once project idioms are established. But controlling context is critical and technical debt poisons the context. Good code quality is even more important when collaborating with an LLM, and they will resist code layout changes which make refactoring dangerous and difficult. [Roboco-op](https://observablehq.com/@tomlarkworthy/robocoop-skills?collection=@tomlarkworthy/robocoop) hints we are not extracting the full value of LLMs on coding tasks yet, we need additional tools to help support iterative development at runtime like incremental dependancy injection, and something to help with refactoring. These are lessons I will fold back into [roboco-op](https://observablehq.com/@tomlarkworthy/robocoop-skills?collection=@tomlarkworthy/robocoop). 43:T544,data = [ { title: "part I", link: "https://observablehq.com/d/b497b79c94d3fbd1", history: await FileAttachment("partI.json").json() }, { title: "part II", link: "https://observablehq.com/d/8571aa583512f2a4", history: await FileAttachment("partII.json").json() }, { title: "part III", link: "https://observablehq.com/d/1ec7e3f612d70414", history: await FileAttachment("partIII.json").json() }, { title: "part IV", link: "https://observablehq.com/d/fbab829d5bcdd7e2", history: await FileAttachment("partIV.json").json() }, { title: "part V", link: "https://observablehq.com/d/025ff03d865684e9", history: await FileAttachment("partV.json").json() }, { title: "part VI", link: "https://observablehq.com/d/ef7ccf2e0ed653d1", history: await FileAttachment("partVI.json").json() }, { title: "part VII", link: "https://observablehq.com/d/49b1dd226a242821", history: await FileAttachment("partVII.json").json() }, { title: "part VIIb", link: "https://observablehq.com/@tomlarkworthy/make-a-game-part-viib-filter-sidequest", history: await FileAttachment("partVIIb.json").json() }, { title: "part VIII", link: "https://observablehq.com/d/5cc90faa3b651500", history: await FileAttachment("partVIII.json").json() } ]44:T6c0,viewof deps = { ({ prompt: 'Create a DI impelmentation that makes use of Observable resolution.\n\nThe named service should end up bound to an implementation with \n\n"mySystem = deps.resolve("mySystem")"\n\ndifferent implementations are added with\n\n"deps.register("mySystem", , 1)"\n\nwith a monotonic version counter.\n\nthe deps implementation should keep all versions, so we can dynamically switch implementations, e.g. for a/b testing, but by default things should resolve to the highest number.\n\nbecause when deps changes it should dispatch and event, callers will try to reregister. So it should sniff where the call is coming from for deduplication with caller_id and time', time: 1699900881324, comment: "Create a viewof cell for Dependency Injection container v2" }); const game_view = Inputs.input(); class DIContainer { constructor() { this.dependencies = new Map(); } register(name, factory, version = 0) { const caller = caller_id(); let versions = this.dependencies.get(name); if (!versions) { versions = {}; this.dependencies.set(name, versions); } if ( !versions[version] || versions[version].trigger_time < Date.now() - 1000 ) { game_view.dispatchEvent(new Event("input")); } versions[version] = { factory, caller, trigger_time: Date.now() }; return factory; } resolve(name) { const versions = this.dependencies.get(name); if (!versions) return null; const maxVersion = Math.max(...Object.keys(versions)); return versions[maxVersion]?.factory || null; } } game_view.value = new DIContainer(); return game_view; }45:Tb8d,viewof BulletBolouder_v6 = { ({ prompt: "Refactor the game loop remembering it was a UI", time: 1700902042331, comment: "Refactor GameLoop with UI according to the refactoring plan" }); const explosionSettings = deps.resolve("generateUIPanel")({ score_per_hit: { type: "range", label: "Score per Hit", options: { min: 5, max: 50, value: 10, step: 5 }, callback: (e) => (globalThis.scorePerHit = e.target.value) }, collision_radius: { type: "range", label: "Collision Radius", options: { min: 0, max: 1, value: 0.01 }, callback: (e) => (globalThis.collisionRadius = e.target.value) }, fragment_count: { type: "range", label: "Fragment Count", options: { min: 2, max: 10, value: 3, step: 1 }, callback: (e) => (globalThis.fragmentCount = e.target.value) }, fragment_size: { type: "range", label: "Fragment Size", options: { min: 0, max: 1, value: 0.06 }, callback: (e) => (globalThis.fragmentSize = e.target.value) }, fragment_velocity: { type: "range", label: "Fragment Velocity", options: { min: 0, max: 0.01, value: 0.001 }, callback: (e) => (globalThis.fragmentVelocity = e.target.value) } }); class GameLoop extends deps.resolve("BaseSystem") { constructor() { super(); } tick() { const projectiles = Array.from(entities.values()).filter( (e) => e.template === "projectile" ); const boulders = Array.from(entities.values()).filter( (e) => e.generator === "generateBoulder" ); projectiles.forEach((projectile) => { boulders.forEach((boulder) => { if ( deps.resolve("collisionDetection")( projectile, boulder, boulder.radius ) ) { gameState.score += globalThis.scorePerHit; deps.resolve("removeEntity")(projectile.id); deps.resolve("removeEntity")(boulder.id); if (boulder.radius > globalThis.fragmentSize) { this.createFragments( boulder, globalThis.fragmentCount, boulder.radius / 2 ); } } }); }); } createFragments(boulder, count, size) { for (let i = 0; i < count; i++) { const angle = Math.random() * Math.PI * 2; const velocity = [ Math.cos(angle) * globalThis.fragmentVelocity, Math.sin(angle) * globalThis.fragmentVelocity, 0 ]; deps.resolve("spawnEntity")( undefined, [...boulder.position], velocity, { radius: size, generator: "generateBoulder", generator_args: [size] } ); } } } deps.register("GameLoop", new GameLoop(), 6); return explosionSettings; }46:T4b2,PhysicsSystem_v2 = { ({ prompt: "We don't have rotation as a concept! update position etc. in the physics system to be arrays of 3, where the last element is rotation/rotational velocity, torque", time: 1699989339201, comment: "Update PhysicsSystem to include rotation in position, velocity, and force" }); class PhysicsSystem extends deps.resolve("BaseSystem") { constructor(...args) { super(...args); } tick() { entities.forEach((entity) => { if (entity.position && entity.velocity) { entity.position[0] += entity.velocity[0]; entity.position[1] += entity.velocity[1]; entity.position[2] += entity.velocity[2]; // Update rotation } if (entity.velocity && entity.force) { entity.velocity[0] += entity.force[0]; entity.velocity[1] += entity.force[1]; entity.velocity[2] += entity.force[2]; // Update rotational velocity // Reset force and torque entity.force = [0, 0, 0]; } }); } } // Register updated PhysicsSystem under 'PhysicsSystem' with version 2 return deps.register("PhysicsSystem", new PhysicsSystem(), 2); }47:T488,WorldWrap = { ({ prompt: "the bullets should world wrap too. So lets take all the wrapping logic into its own system called WorldWrap. We should also decrement the ttl and remove the element if ttl < 0", time: 1699993637444, comment: "Create WorldWrap system for wrapping entities and managing ttl" }); class WorldWrap extends deps.resolve("BaseSystem") { constructor(...args) { super(...args); } tick() { entities.forEach((entity, id) => { // Wrap entities around the edges for (let i = 0; i < 2; i++) { if (entity.position[i] < -1) entity.position[i] = 1; if (entity.position[i] > 1) entity.position[i] = -1; } // Decrement ttl for entities with ttl and remove if ttl < 0 if (entity.ttl !== undefined) { entity.ttl -= 1; if (entity.ttl < 0) { entities.delete(id); const element = game_view.querySelector(`#${id}`); if (element) element.remove(); } } }); } } // Register WorldWrap system with version 1 return deps.register("WorldWrap", new WorldWrap(), 1); }48:T5ae,viewof ship_template_v3 = { ({ prompt: "Let make a new ship shape. I want a simple V shape, but expose the parameters like color, length and width as a UI", time: 1700411623034, comment: "Create a new ship shape with parameters for color, length, and width exposed in a UI" }); const shipSettings = view`

Ship Settings

${["color", Inputs.color({ value: "#f88fff", label: "Ship color" })]} ${["length", Inputs.range([0, 2], { value: 0.2, label: "Ship length" })]} ${["width", Inputs.range([0, 1], { value: 0.11, label: "Ship width" })]} ${["stroke", Inputs.range([0, 1], { value: 0.018, label: "stroke width" })]} ${["offset", Inputs.range([0, 0.2], { value: 0.06, label: "offset" })]}

`; const updateShipTemplate = () => { const settings = shipSettings.value; const points = `${-settings.length / 2 + settings.offset},${ settings.width / 2 } ${settings.offset},0 ${-settings.length / 2 + settings.offset},${ -settings.width / 2 }`; const ship = htl.svg``; assets.set("ship", ship); }; // Update ship when settings change shipSettings.addEventListener("input", updateShipTemplate); updateShipTemplate(); // Initialize shape return shipSettings; }49:T4ec,viewof score_template = { ({ prompt: "Lets create a template for the score (and SVG text node). Include a UI to control its parameters", time: 1700416227959, comment: "Create a score template with SVG text node and a UI to control its parameters" }); const scoreSettings = view`

Score Settings

${[ "color", Inputs.color({ value: "#f0dd0a", label: "Score color" }) ]} ${[ "font_size", Inputs.range([0, 1], { value: 0.1, label: "Font size" }) ]} ${[ "x_position", Inputs.range([-1, 1], { value: -0.9, label: "X position" }) ]}

`; const updateScoreTemplate = () => { const settings = scoreSettings.value; const score = htl.svg` 0 `; assets.set("score", score); }; // Update score when settings change scoreSettings.addEventListener("input", updateScoreTemplate); updateScoreTemplate(); // Initialize score return scoreSettings; }4a:T4fd,viewof lives_template = { ({ prompt: "Create a template for the lives (and SVG text node). Include a UI to control its parameters", time: 1700416541894, comment: "Create a template for lives with SVG text node and a UI to control its parameters" }); const livesSettings = view`

Lives Settings

${[ "color", Inputs.color({ value: "#ff1f1f", label: "Lives color" }) ]} ${[ "font_size", Inputs.range([0, 1], { value: 0.1, label: "Font size" }) ]} ${[ "x_position", Inputs.range([-1, 1], { value: 0.91, step: 0.01, label: "X position" }) ]}

`; const updateLivesTemplate = () => { const settings = livesSettings.value; const lives = htl.svg` 3 `; assets.set("lives", lives); }; // Update lives when settings change livesSettings.addEventListener("input", updateLivesTemplate); updateLivesTemplate(); // Initialize lives return livesSettings; }4b:Ta95,viewof boulder_generator_v1 = { ({ prompt: "I do not like our current approach to the bolders. Lets replace them with a generator function instead of a template. Also lets make them more round. So make them out of 12 radial segments where the angle is a little noisey and the radius is a little noisey. The generator should have a target size so we can use this one generator for the little and big boulders. The template parameters should be configurable with a UI, which includes previewing the template and clicking a button to regenerate another.", time: 1700506696129, comment: "Create a boulder generator function with UI settings and a preview" }); const boulderSettings = view`

Boulder Generator Settings

${[ "target_size", Inputs.range([0, 1], { value: 0.2, label: "Target size" }) ]} ${[ "segments", Inputs.range([3, 20], { value: 12, step: 1, label: "Segments" }) ]} ${[ "angle_noise", Inputs.range([0, 5], { value: 0.3, label: "Angle noise" }) ]} ${[ "radius_noise", Inputs.range([0, 5], { value: 0.1, label: "Radius noise" }) ]} ${[ "stroke", Inputs.range([0, 0.3], { value: 0.01, label: "stroke width" }) ]} ${[ "color", Inputs.color({ value: "#1fb4ff", label: "color" }) ]} ${[ "regenerate", htl.html`` ]}

`; const generateBoulder = (target_size) => { const settings = boulderSettings.value; const angleStep = (Math.PI * 2) / settings.segments; const points = Array.from({ length: settings.segments }, (_, index) => { const angle = index * angleStep + (Math.random() - 0.5) * settings.angle_noise; const radius = target_size + (Math.random() - 0.5) * settings.radius_noise; return `${Math.cos(angle) * radius},${Math.sin(angle) * radius}`; }).join(" "); return htl.svg``; }; // Preview and regenerate boulder on button click const preview = htl.svg``; const regen = () => { const newBoulder = generateBoulder(boulderSettings.value.target_size); preview.replaceChild(newBoulder, preview.firstChild); }; boulderSettings.querySelector("button").onclick = regen; boulderSettings.addEventListener("input", regen); deps.register("generateBoulder", generateBoulder, 1); return htl.html`${boulderSettings}${preview}`; }4c:T613,BoulderGenerationSystem = { ({ prompt: "Add a system that generates new boulders when all are gone. Incrementing the level in gamestate and generating a number of boulders equal to the level count + 2", time: 1700511473544, comment: "Create a system to generate new boulders when all are gone" }); class BoulderGenerationSystem extends deps.resolve("BaseSystem") { constructor() { super(); this.boulderGenerator = deps.resolve("generateBoulder"); this.boulderSize = 0.2; // Default boulder size } tick() { const boulders = Array.from(entities.values()).filter( (e) => e.generator === "generateBoulder" ); if (boulders.length === 0 && gameState.state === "Running") { gameState.level = (gameState.level || 0) + 1; this.generateBoulders(gameState.level + 2); } } generateBoulders(count) { for (let i = 0; i < count; i++) { const angle = Math.random() * Math.PI * 2; const velocity = [ Math.cos(angle) * 0.0001, Math.sin(angle) * 0.0001, 0 ]; const boulder = { id: `boulder${Date.now()}${i}`, generator: "generateBoulder", generator_args: [this.boulderSize], position: [Math.random() * 2 - 1, Math.random() * 2 - 1, 0], velocity: velocity, radius: this.boulderSize }; entities.set(boulder.id, boulder); } } } deps.register("BoulderGenerationSystem", new BoulderGenerationSystem(), 1); }4d:T59a,LifeLostSystem = { ({ prompt: "Add a system that when a life is lost, the player is teleported to a blank area of the screen", time: 1700511874407, comment: "Create a system to teleport player to a clear area when a life is lost" }); class LifeLostSystem extends deps.resolve("BaseSystem") { constructor() { super(); } tick() { const player = entities.get("player"); if (!player) return; if (gameState.lives < this.previous_lives) { player.position = this.findClearArea(); player.velocity = [0, 0, 0]; } this.previous_lives = gameState.lives; } isAreaClear(position) { return !Array.from(entities.values()).some((entity) => { if (entity.generator !== "generateBoulder") return false; const dx = position[0] - entity.position[0]; const dy = position[1] - entity.position[1]; const distance = Math.sqrt(dx * dx + dy * dy); return distance < entity.radius + 0.2; // Consider a 0.1 buffer zone }); } findClearArea() { for (let i = 0; i < 100; i++) { // Limit search iterations const position = [Math.random() * 2 - 1, Math.random() * 2 - 1, 0]; if (this.isAreaClear(position)) { return position; } } return [0, 0, 0]; // Fallback to center } } deps.register("LifeLostSystem", new LifeLostSystem(), 1); }4e:T6e8,EnemyShipSystem = { ({ prompt: "randomly with low probability, if the game is running, add an enemy ship on the left or right side, with a fixed x velocity towards the center. Every tick, with low probability adjust any ships y velocities, so the ships tend to zig zag across the screen. Destroy the enemy ship when it reaches the other side.", time: 1700598762370, comment: "Create a system to manage enemy ship spawning, movement, and destruction" }); viewof enemy_ship_template_v4; class EnemyShipSystem extends deps.resolve("BaseSystem") { constructor() { super(); this.xVelocity = 0.002; // Fixed x velocity towards the center } tick() { const gameRunning = gameState.state === "Running"; if (gameRunning && Math.random() < 0.01) { // Spawn an enemy ship with low probability this.spawnEnemyShip(); } for (let [id, ship] of entities.entries()) { if (ship.template !== "enemyShip") continue; if (Math.random() < 0.1) { // Adjust y velocity with low probability ship.velocity[1] += (Math.random() - 0.5) * 0.001; } if (Math.abs(ship.position[0]) > 0.95) { // Destroy enemy ship when it reaches the other side entities.delete(ship.id); } } } spawnEnemyShip() { const side = Math.random() < 0.5 ? -0.9 : 0.9; // Randomly choose left or right side const enemyShip = { template: "enemyShip", position: [side, Math.random() * 2 - 1, 0], velocity: [this.xVelocity * -side, 0, 0] // Move towards center }; entities.set(`enemy${Date.now()}`, enemyShip); } } deps.register("EnemyShipSystem", new EnemyShipSystem(), 1); }4f:Ta24,viewof EnemyShipSystem_v2 = { ({ prompt: "Add a UI to the enemy spawning system, e.g. spawn rate, x velocity, y adjust probability, y velocity adjust magnitude etc. Keep the logic identical", time: 1700685553019, comment: "Add UI for the enemy ship spawning system and keep the logic identical" }); const enemyShipSpawningSettings = view`

Enemy Ship Spawning Settings

${[ "spawn_probability", Inputs.range([0, 0.02], { value: 0.001, step: 0.001, label: "Spawn probability per tick" }) ]} ${[ "x_velocity", Inputs.range([0, 0.01], { value: 0.002, step: 0.0001, label: "X velocity towards center" }) ]} ${[ "y_adjust_probability", Inputs.range([0, 0.2], { value: 0.1, step: 0.01, label: "Y velocity adjust probability per tick" }) ]} ${[ "y_velocity_adjust", Inputs.range([0, 0.002], { value: 0.001, step: 0.0001, label: "Y velocity adjust magnitude" }) ]}

`; class EnemyShipSystem extends deps.resolve("BaseSystem") { constructor() { super(); this.spawningSettings = enemyShipSpawningSettings.value; } tick() { const gameRunning = gameState.state === "Running"; if ( gameRunning && Math.random() < this.spawningSettings.spawn_probability ) { // Spawn an enemy ship with low probability this.spawnEnemyShip(); } for (let [id, ship] of entities.entries()) { if (ship.template !== "enemyShip") continue; if (Math.random() < this.spawningSettings.y_adjust_probability) { // Adjust y velocity with low probability ship.velocity[1] += (Math.random() - 0.5) * this.spawningSettings.y_velocity_adjust; } if (ship.position && Math.abs(ship.position[0]) > 0.95) { // Destroy enemy ship when it reaches the other side entities.delete(id); } } } spawnEnemyShip() { const side = Math.random() < 0.5 ? -0.9 : 0.9; // Randomly choose left or right side const enemyShip = { id: `enemy${Date.now()}`, template: "enemyShip", position: [side, Math.random() * 2 - 1, 0], velocity: [this.spawningSettings.x_velocity * -side, 0, 0] // Move towards center }; entities.set(enemyShip.id, enemyShip); } } deps.register("EnemyShipSystem", new EnemyShipSystem(), 2); return enemyShipSpawningSettings; }50:T70b,viewof PlayerLazerEnemyCollisionSystem = { ({ prompt: "Add a system for checking if the players lazer overlaps the enemy and removes it and increments the score. Add a UI for critical parameters.", time: 1700995837938, comment: "Create a system to handle collisions between player's lazer and enemy ships" }); const lazerEnemyCollisionSettings = deps.resolve("generateUIPanel")({ score_per_hit: { type: "range", label: "Score per Hit", options: { min: 0, max: 100, value: 10, step: 1 }, callback: (e) => (globalThis.scorePerHit = e.target.value) }, bullet_ship_radius: { type: "range", label: "bullet_ship_radius", options: { min: 0, max: 1, value: 0.06, step: 0.001 }, callback: (e) => (globalThis.bullet_ship_radius = e.target.value) } }); class PlayerLazerEnemyCollisionSystem extends deps.resolve("BaseSystem") { constructor() { super(); } tick() { const lazers = Array.from(entities.values()).filter( (e) => e.template === "projectile" ); const enemyShips = Array.from(entities.values()).filter( (e) => e.template === "enemyShip" ); lazers.forEach((lazer) => { enemyShips.forEach((enemy) => { if ( deps.resolve("collisionDetection")( lazer, enemy, globalThis.bullet_ship_radius ) ) { gameState.score += globalThis.scorePerHit; deps.resolve("removeEntity")(lazer.id); deps.resolve("removeEntity")(enemy.id); } }); }); } } deps.register( "PlayerLazerEnemyCollisionSystem", new PlayerLazerEnemyCollisionSystem(), 1 ); return lazerEnemyCollisionSettings; }51:T73e,viewof EnemyLazerSystem = { ({ prompt: "Add a system with UI that spawns enemy lazers from enemy ships randomly with some probability", time: 1700725096036, comment: "Add system with UI that spawns enemy lazers from enemy ships randomly" }); const enemyLazerSettings = view`

Enemy Lazer Settings

${[ "lazer_probability", Inputs.range([0, 1], { value: 0.1, step: 0.001, label: "Lazer spawn probability per tick" }) ]} ${[ "lazer_speed", Inputs.range([0, 0.01], { value: 0.005, step: 0.001, label: "Lazer speed" }) ]} ${[ "lazer_ttl", Inputs.range([0, 300], { value: 100, step: 10, label: "Lazer time-to-live" }) ]}

`; class EnemyLazerSystem extends deps.resolve("BaseSystem") { constructor() { super(); this.lazerSettings = enemyLazerSettings.value; } tick() { const enemyShips = Array.from(entities.values()).filter( (e) => e.template === "enemyShip" ); enemyShips.forEach((ship) => { if (Math.random() < this.lazerSettings.lazer_probability) { this.spawnLazer(ship); } }); } spawnLazer(ship) { const angle = Math.random() * Math.PI * 2; const lazer = { id: `lazer${Date.now()}`, template: "enemyLazer", position: [ship.position[0], ship.position[1], angle], velocity: [ Math.cos(angle) * this.lazerSettings.lazer_speed, Math.sin(angle) * this.lazerSettings.lazer_speed, 0 ], ttl: this.lazerSettings.lazer_ttl }; entities.set(lazer.id, lazer); } } deps.register("EnemyLazerSystem", new EnemyLazerSystem(), 1); return enemyLazerSettings; }52:T496,viewof enemyLazer_template = { ({ prompt: "create an enemyLazer template, add a UI for its visual parameters ", time: 1700850741421, comment: "Create enemyLazer template with UI for visual parameters" }); const enemyLazerSettings = view`

Enemy Lazer Template

${[ "length", Inputs.range([0.01, 0.2], { value: 0.1, label: "Lazer length" }) ]} ${[ "width", Inputs.range([0.001, 0.01], { value: 0.003, label: "Lazer width" }) ]} ${[ "color", Inputs.color({ value: "#1eff00", label: "Lazer color" }) ]}

`; const updateEnemyLazerTemplate = () => { const settings = enemyLazerSettings.value; const enemyLazer = htl.svg``; assets.set("enemyLazer", enemyLazer); }; // Update lazer template when settings change enemyLazerSettings.addEventListener("input", updateEnemyLazerTemplate); updateEnemyLazerTemplate(); // Initialize template return enemyLazerSettings; }53:T4d1,generateNeonGlowFilter_v6 = { ({ prompt: "No the v5 leads to a background color. We should not need to supply a color in the filter. The color should be derived from bluring the source image.\n", time: 1701026953278, comment: "Generate a neon glow filter that derives color by blurring the source graphic" }); const generateNeonGlowFilter = (id, blur, color, intensity) => { const filter = htl.svg` `; return filter; }; deps.register("neonGlowFilterGenerator", generateNeonGlowFilter, 6); }54:T7ae,viewof generateNeonGlowFilterPreview = { ({ prompt: "Lets create a neon glow filter generator that takes various arguments, and a UI for previewing the effect on a boulder as a sample", time: 1700997430208, comment: "Create a neon glow filter generator with a UI for previewing the effect on a boulder" }); const neonGlowSettings = view`

Neon Glow Filter Settings

${[ "blur", Inputs.range([0, 1], { value: 0.012, step: 0.001, label: "Blur amount" }) ]} ${[ "color", Inputs.color({ value: "#ffffff", label: "Glow color" }) ]} ${[ "intensity", Inputs.range([0, 100], { value: 2, step: 0.1, label: "Glow intensity" }) ]}

`; const generateNeonGlowFilter = deps.resolve("neonGlowFilterGenerator"); const previewNeonGlowFilter = () => { const settings = neonGlowSettings.value; const filterId = "neon-glow-preview"; const filter = generateNeonGlowFilter( filterId, settings.blur, settings.color, settings.intensity ); const boulder = deps.resolve("generateBoulder")(0.2); const preview = htl.svg``; preview .querySelector("polygon") .setAttribute("filter", `url(#neon-glow-preview)`); return preview; }; // Update preview on input neonGlowSettings.addEventListener("input", () => { const previewUpdate = previewNeonGlowFilter(); document.body .querySelector("#neon-filter-preview") .replaceWith(previewUpdate); }); const initialPreview = previewNeonGlowFilter(); return view`${["...", neonGlowSettings]}${initialPreview}`; }55:T831,viewof startGameButton_v2 = ({ prompt: "That game button freezes everything. Lets' make the button massive too using a cool retro system font.\nyou will need to manually add the player and astroids.", time: 1700413206526, comment: "Create a bigger start game button with retro font and manually add player and asteroids" } && view`

`)56:T478,PlayerHitByLazerSystem = { ({ prompt: "Add a system if the player hits an enemy bullet they lose a life", time: 1700853269313, comment: "Add a system to detect player collisions with enemy lazers and decrease lives" }); class PlayerHitByLazerSystem extends deps.resolve("BaseSystem") { constructor() { super(); this.collisionRadius = 0.02; // Radius for detecting collisions } tick() { const player = entities.get("player"); if (!player) return; // No player to hit const lazers = Array.from(entities.values()).filter( (e) => e.template === "enemyLazer" ); lazers.forEach((lazer) => { const dx = player.position[0] - lazer.position[0]; const dy = player.position[1] - lazer.position[1]; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < this.collisionRadius) { // Player hit by lazer gameState.lives -= 1; entities.delete(lazer.id); // Remove the lazer that hit the player } }); } } deps.register("PlayerHitByLazerSystem", new PlayerHitByLazerSystem(), 1); }57:T468,LazerShotSoundSystem_v2 = { ({ prompt: "LazerShotSoundSystem doesn't work because the keyboard control clears the keyPressed state. It needs to detect the existence of a new lazer object instead (and track which it knows about) ", time: 1701617015743, comment: "Update LazerShotSoundSystem to play sound based on new lazer object existence" }); class LazerShotSoundSystem extends deps.resolve("BaseSystem") { constructor() { super(); this.knownLazers = new Set(); } tick() { const lazers = Array.from(entities.values()).filter( (e) => e.template === "projectile" ); for (const lazer of lazers) { if (!this.knownLazers.has(lazer.id)) { // Play sound for new lazer viewof shot.play(); this.knownLazers.add(lazer.id); } } // Remove known lazers that are no longer present this.knownLazers.forEach((id) => { if (!entities.has(id)) { this.knownLazers.delete(id); } }); } } deps.register("LazerShotSoundSystem", new LazerShotSoundSystem(), 2); }58:[{"id":"229cffb07deab777743d4b38b937ee73baca239b0f0d22819ed4bace122759a6f5a47cafe4e0e2f7585bf1fe041059135036b93ae8c7a23a8722d23c10db9f01","href":"https://static.observableusercontent.com/files/229cffb07deab777743d4b38b937ee73baca239b0f0d22819ed4bace122759a6f5a47cafe4e0e2f7585bf1fe041059135036b93ae8c7a23a8722d23c10db9f01","name":"image (5).png","type":"image/png","lastModified":1701617623818.489,"size":1709839},{"id":"3deee3298908c25207b462aefdebdc5e669251cffebced115095f31f6ced1c4ed077eaf2c5abe991f3390a3cdf81022f839774428f711e222b9d6c9a011a92eb","href":"https://static.observableusercontent.com/files/3deee3298908c25207b462aefdebdc5e669251cffebced115095f31f6ced1c4ed077eaf2c5abe991f3390a3cdf81022f839774428f711e222b9d6c9a011a92eb","name":"laser-gun-shot-sound-future-sci-fi-lazer-wobble-chakongaudio-174883.mp3","type":"audio/mpeg","lastModified":1701617623818.489,"size":76032},{"id":"277b184c0e4f3ef330533be8e108ad5b28ee8f4cd9f286aa904849c42cc4eb651ab2c35bc687e9cb87205e8ea56b77957a96488d2379981e7c62b4f20a34bec8","href":"https://static.observableusercontent.com/files/277b184c0e4f3ef330533be8e108ad5b28ee8f4cd9f286aa904849c42cc4eb651ab2c35bc687e9cb87205e8ea56b77957a96488d2379981e7c62b4f20a34bec8","name":"pop2-84862.mp3","type":"audio/mpeg","lastModified":1701617623818.489,"size":23520},{"id":"6c4c33cd157e57010a47ca9954d9169387322950e848723b28a0bd6d320ff361f76bee6d8e57a7a7a27a44eb945486a99cb65ffc78820f9c2a787451bcf9c577","href":"https://static.observableusercontent.com/files/6c4c33cd157e57010a47ca9954d9169387322950e848723b28a0bd6d320ff361f76bee6d8e57a7a7a27a44eb945486a99cb65ffc78820f9c2a787451bcf9c577","name":"sci-fi-alarm-106436.mp3","type":"audio/mpeg","lastModified":1701617623818.489,"size":144000},{"id":"a17aea604a88ebfd888a7179171210d972dc7d26e8ade62e040e1242697fec0123865e24a0d07cab967e4a4bb76ef84cc1b285abe52eb72cb012dce8e92b9c86","href":"https://static.observableusercontent.com/files/a17aea604a88ebfd888a7179171210d972dc7d26e8ade62e040e1242697fec0123865e24a0d07cab967e4a4bb76ef84cc1b285abe52eb72cb012dce8e92b9c86","name":"image@1.png","type":"image/png","lastModified":1702332771722.56,"size":54256},{"id":"3cf60646affec2fc3c8bc07ae099a8c2f71e118d68d7615d3c78e5259d29d7d66c8094515189c9b449e7d69d183ead9d00785b53a5a4b2e11041b0df21edc590","href":"https://static.observableusercontent.com/files/3cf60646affec2fc3c8bc07ae099a8c2f71e118d68d7615d3c78e5259d29d7d66c8094515189c9b449e7d69d183ead9d00785b53a5a4b2e11041b0df21edc590","name":"image.png","type":"image/png","lastModified":1702219346691.142,"size":164397},{"id":"d224499098154c075b602b66832714a2bbef8d6d21a34aacc4fc0902dbed7872cfa3114e4cb4fcffbe754e1e012abae7d896df8310af05339cbd8377f7738da8","href":"https://static.observableusercontent.com/files/d224499098154c075b602b66832714a2bbef8d6d21a34aacc4fc0902dbed7872cfa3114e4cb4fcffbe754e1e012abae7d896df8310af05339cbd8377f7738da8","name":"partVIII.json","type":"application/json","lastModified":1702018287051.708,"size":33722},{"id":"fc9d29637421ff4e7eeb79b99bb462f18e8d47e97e3246bcfb83cf742dbab8fb165cecc33a9587d7540d789295bc6bbac9fe528a74564c9ae26c69ae097a8436","href":"https://static.observableusercontent.com/files/fc9d29637421ff4e7eeb79b99bb462f18e8d47e97e3246bcfb83cf742dbab8fb165cecc33a9587d7540d789295bc6bbac9fe528a74564c9ae26c69ae097a8436","name":"partIII.json","type":"application/json","lastModified":1702018287116.121,"size":55890},{"id":"8343bc3e2a029496201112c00e214f6b61ecc41679c63e9fd4e65b5e524902b0ab894b6ec5eaae093cf71936b2c88d65f89652f59661e2614e301220986e62d6","href":"https://static.observableusercontent.com/files/8343bc3e2a029496201112c00e214f6b61ecc41679c63e9fd4e65b5e524902b0ab894b6ec5eaae093cf71936b2c88d65f89652f59661e2614e301220986e62d6","name":"partII.json","type":"application/json","lastModified":1702018287148.655,"size":55931},{"id":"8666847c5cfceccca44b8a7ea1d251e6b0405fef9669fc961ed5764dadaf079e367ee43d30dffae85647c612cfeb3b4bb1d5528ed07dcaa5430fd2461732a1a1","href":"https://static.observableusercontent.com/files/8666847c5cfceccca44b8a7ea1d251e6b0405fef9669fc961ed5764dadaf079e367ee43d30dffae85647c612cfeb3b4bb1d5528ed07dcaa5430fd2461732a1a1","name":"partIV.json","type":"application/json","lastModified":1702018287152.137,"size":54908},{"id":"1e061e98490e854a20a43bb8f4be05b94c996a4b59e2ddc9e9ca1ee1aa4515b1ff98075a14e171a576ac802c946fb2028ad30cecf0ce867b7564c1d751a9bfbf","href":"https://static.observableusercontent.com/files/1e061e98490e854a20a43bb8f4be05b94c996a4b59e2ddc9e9ca1ee1aa4515b1ff98075a14e171a576ac802c946fb2028ad30cecf0ce867b7564c1d751a9bfbf","name":"partV.json","type":"application/json","lastModified":1702018287080.196,"size":33577},{"id":"1db8ac8012ab59265170ad7fd8a112f80ab636adaac2bb11deec8bd058e6772d49224a41d9558b4688b56b26887f7a8702715b30846cb98d40a7d5a1c419efb9","href":"https://static.observableusercontent.com/files/1db8ac8012ab59265170ad7fd8a112f80ab636adaac2bb11deec8bd058e6772d49224a41d9558b4688b56b26887f7a8702715b30846cb98d40a7d5a1c419efb9","name":"partVI.json","type":"application/json","lastModified":1702018287113.096,"size":61611},{"id":"5c4e03c5ed51661e088e9310f60b69b4212807132f558251c2213b87aaf1852d53cc2d4aff9d5956e51c9bb44d90dd1c77a5e2f91c7701685610e61df8deb7e4","href":"https://static.observableusercontent.com/files/5c4e03c5ed51661e088e9310f60b69b4212807132f558251c2213b87aaf1852d53cc2d4aff9d5956e51c9bb44d90dd1c77a5e2f91c7701685610e61df8deb7e4","name":"partVIIb.json","type":"application/json","lastModified":1702018287119.511,"size":47416},{"id":"dc2707c1888d1ade7e41a57e1259024a9154fd090961b082312db3b5d4b9944fed0b1f9c3b17f9c5e716710b7b82ea1a469903dfd52b8bffc2a415cb39d52b2f","href":"https://static.observableusercontent.com/files/dc2707c1888d1ade7e41a57e1259024a9154fd090961b082312db3b5d4b9944fed0b1f9c3b17f9c5e716710b7b82ea1a469903dfd52b8bffc2a415cb39d52b2f","name":"partVII.json","type":"application/json","lastModified":1702018287175.306,"size":69154},{"id":"c2eea3eb58b68ed3ba4099fe1b587e58cf59749b1c45eb849cc0ab0e1ab2d5fbaab08eb413b8ffba8d79108fba6f184206096dd9fbe3858f79d4b201bd0a946b","href":"https://static.observableusercontent.com/files/c2eea3eb58b68ed3ba4099fe1b587e58cf59749b1c45eb849cc0ab0e1ab2d5fbaab08eb413b8ffba8d79108fba6f184206096dd9fbe3858f79d4b201bd0a946b","name":"partI.json","type":"application/json","lastModified":1702018287343.887,"size":53399}] 2f:{"title":"Experiments in Complex Software development with ChatGPT","cells":[{"id":0,"value":"# Experiments in Complex Software development with ChatGPT\n\nChatGPT can be used to accelerate development but it doesn't seem possible with our current IDE UX. I challenged myself to write a _full_ featured game end-to-end with ChatGPT to test a new workflow of interleaved prompting and program execution. It mostly worked, there were challenges, I reach 600 lines of code per day, and found several places for further process improvements.\n","pinned":false,"hidden":false,"mode":"md"},{"id":4475,"value":"isSafari\n ? md`⚠️ The following is the game, however, it uses SVG transforms and runs like a pig on iPhone/Safari so it's been disabled on your device.`\n : md`The following is the game, click on it and press space to start`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3948,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4840,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":4488,"value":"## Notebooks\n\nThis game was incrementally built across a series of notebook.\n\n- Part I - Ideation and Architecture https://observablehq.com/d/b497b79c94d3fbd1\n- Part II - Pixels on a Screen https://observablehq.com/d/8571aa583512f2a4\n- Part III - UI All the things https://observablehq.com/d/1ec7e3f612d70414\n- Part IV - Enemies https://observablehq.com/d/fbab829d5bcdd7e2\n- Part V - (failed) Refactoring https://observablehq.com/d/025ff03d865684e9\n- Part VI - Polish https://observablehq.com/d/ef7ccf2e0ed653d1\n- Part VII - Boxing https://observablehq.com/d/49b1dd226a242821\n- Part VIIb - Displacement map Deepdive https://observablehq.com/@tomlarkworthy/make-a-game-part-viib-filter-sidequest\n- Part VIII - Audio https://observablehq.com/d/5cc90faa3b651500\n- Conclusion - https://observablehq.com/@tomlarkworthy/complex-software-with-chatgpt","pinned":false,"hidden":false,"mode":"md"},{"id":4818,"value":"## How long did it take?\n\nWe can query the notebook history to get development statistics.\n\n${Math.ceil(d3.sum(time_spent_hours, d => d. time_spent_hours))} hours total spent in spare time over 3 weeks. You can see I put in a sliver of time before work on weekdays, a big chunk after work, and the odd weekend day, so there was quite a lot of context switching.","pinned":false,"hidden":false,"mode":"md"},{"id":4530,"value":"events = data\n .reduce(\n (acc, data) => [\n ...acc,\n ...data.history.events.map((e) => ({ ...e, notebook: data.title }))\n ],\n []\n )\n .map((d) => ({\n ...d,\n ...enrich_time(d.time)\n }))\n .filter((d) => ![\"create\"].includes(d.type))\n .filter((d) => d.node_id !== 0)\n .sort((a, b) => a.time - b.time)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4587,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4622,"value":"Plot.plot({\n x: {\n type: \"time\"\n },\n color: { legend: true },\n marks: [\n Plot.rect(time_spans, {\n x1: (d) => new Date(d.date).getTime() - 60 * 60 * 8 * 1000,\n x2: (d) => new Date(d.date).getTime() + 60 * 60 * 8 * 1000,\n y1: \"minute\",\n y2: \"end_minute\",\n stroke: \"notebook\",\n tip: true\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4833,"value":"Most notebooks took about 3 hours to build. But significant work work was put in for the polish and boxing notebook which had a high degree of graphics programming. Part VII contained a complex SVG displacement map to give non-linearly warp the image into the display. This task was hard and I had to fork a separate notebook (VIIb) to focus on that specific problem.","pinned":false,"hidden":false,"mode":"md"},{"id":4800,"value":"time_spent_hours = Object.entries(\n time_spans.reduce((sums, span) => {\n sums[span.notebook] =\n (sums[span.notebook] || 0) +\n (span.end.getTime() - span.start.getTime()) / 1000 / 60 / 60;\n return sums;\n }, {})\n).map(([notebook, time_spent_hours]) => ({\n notebook,\n time_spent_hours\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4806,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.auto(time_spent_hours, {x: \"notebook\", y: \"time_spent_hours\", color: \"notebook\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4867,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":5050,"value":"### Cell modifications over time\n\nIn the plot below we visualize the cell node_id, which increments as cells are added, against time. We see that new cells are added over time, and cells are often deleted after a fork, which demonstrates context cleanup.\n\nWe see a huge number of cells deleted for part VIIb, when the whole game was removed so we could concentrate in development of a specific filter. We also see a major set of deletions going into part II, when the design work was removed. We also see that notebook III nodes with a low node_id were modified. This was back-porting some roboco-op bugfixes. The first notebook in the series, part I, was forked from the roboco-op blank slate notebook, and thus only nodes with an id greater than 2200 were project specific.","pinned":false,"hidden":false,"mode":"md"},{"id":4940,"value":"filtered_events = events\n .filter((d) => [\"modify_node\", \"remove_node\"].includes(d.type))\n .map((d) => ({ ...d, type: d.is_new ? \"new_node\" : d.type }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4962,"value":"Plot.plot({\n x: {\n type: \"time\",\n domain: [\"2023-11-12\", \"2023-12-04\"]\n },\n symbol: { legend: true },\n marks: [\n Plot.dot(filtered_events, {\n x: \"date\",\n y: \"node_id\",\n stroke: \"type\",\n symbol: \"type\",\n tip: true\n }),\n Plot.rectY(time_spans, {\n x1: (d) => new Date(d.date).getTime() - 60 * 60 * 8 * 1000,\n x2: (d) => new Date(d.date).getTime() + 60 * 60 * 8 * 1000,\n y1: \"min_node_id\",\n y2: \"max_node_id\",\n stroke: \"notebook\",\n tip: true\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4929,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":5078,"value":"## Human vs. LLM work\n\nAs the workflow supports human editing, how much did the LLM do vs. the human?","pinned":false,"hidden":false,"mode":"md"},{"id":5359,"value":"### Number of edits per named cell\n\nTypically the LLM first generates a cell, and a human edits it. We can get a ballpark figure for how much human editing is needed was needed by looking at the number of edits to each named cell.\n\nSome cells were never edited after initial generation (edits: 1), but some cells cells, like `crtWarpDisplacementMap_v4` were iterated heavily (141 edits).","pinned":false,"hidden":false,"mode":"md"},{"id":5157,"value":"named_cell_work = filtered_events.filter((d) => d.node_name !== undefined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5153,"value":"Plot.plot({\n marginLeft: 200,\n insetLeft: 14,\n x: {\n type: \"sqrt\"\n },\n marks: [\n Plot.auto(named_cell_work, {y: \"node_name\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5549,"value":"## Where the LLM was not so good","pinned":false,"hidden":false,"mode":"md"},{"id":5364,"value":"### The `crtWarpDisplacementMap_v4` saga\n\nThe most edited cell was [`crtWarpDisplacementMap_v4`](https://observablehq.com/@tomlarkworthy/make-a-game-part-viib-filter-sidequest#crtWarpDisplacementMap_v5) which represents the cell that the LLM was least helpful with.\n","pinned":false,"hidden":false,"mode":"md"},{"id":3985,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3991,"value":"CRTWarpFilterSystem = {\n ({\n prompt:\n \"Now create a component that uses crtWarpAdjustment settings to create/replace an appropriate filter into the view SVG defs\",\n time: 1701199921023,\n comment: \"Create a component to generate CRT warp filter using settings\"\n });\n\n const defs = game_view.querySelector(\"defs\") || htl.svg``;\n\n const crtWarpFilter = deps.resolve(\"crtWarpFilter\")(crtWarpAdjustment);\n\n // Replace or append the new filter to the defs\n const existingFilter = defs.querySelector(`#crt-warp`);\n if (existingFilter) {\n existingFilter.replaceWith(crtWarpFilter);\n } else {\n defs.appendChild(crtWarpFilter);\n }\n\n if (!game_view.querySelector(\"defs\")) {\n game_view.prepend(defs);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4064,"value":"html`

crtWarpDisplacementMap

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4095,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":4091,"value":"crtWarpAdjustmentGenerator_v3 = ({\n prompt:\n \"OK make a new crtWarpAdjustmentGenerator that uses the displacement map\",\n time: 1701292141453,\n comment: \"Generate CRT warp adjustment filter using the displacement map\"\n} &&\n deps.register(\n \"crtWarpFilter\",\n function crtWarpAdjustmentGenerator(barrel_warp, trapezoid_warp) {\n const warpMapImage = deps.resolve(\"crtWarpDisplacementMap\");\n const filter = htl.svg`\n \n \n `;\n return filter;\n },\n 3\n ))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4235,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":6020,"value":"$39","pinned":false,"hidden":false,"mode":"md"},{"id":5410,"value":"### Other heavily iterated nodes\n\n#### Art\n`ship_template_v3`, `enemy_ship_template_v4`, `neonGlowFilterGenerator` also were hand edited a lot. The templates are SVG files, where it was simpler for me to edit the coordinates that go through LLM prompting. Ultimately that kind of work is a bad fit for coding anyway, you should create art assets in an art program, not in code.\nfeatures to it manually. While I edited these cells a lot, it was mostly trivial parameter tweaks.","pinned":false,"hidden":false,"mode":"md"},{"id":3218,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":6077,"value":"\n#### Game Controls\n\n`PlayerControl_vX` were the keyboard controls for the game. These sources were easier to iterate by hand as it requires fast feedback to converge on a solution, and it is easier to try things out and refine, than to try to explain the subjective input device experience to the LLM. LLMs don't really understand the link between the controls and the experience of the game. It did code the UI.\n","pinned":false,"hidden":false,"mode":"md"},{"id":6260,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":6227,"value":"\n\n#### Coupled Components - Renderer System\n\nThe LLM was actually quite adept with developing the rendering system, the part that iterates all the entities and syncs the representation to an SVG DOM node. However, this component is coupled to many features of the game, and thus often needed to be upgraded to accommodate new features. I found re-prompting the LLM would often forget important changes between iteration, so a new Rendering System would often be faulty with the same set of bugs as were fixed in the prior version. So in the end I converged towards adding features manually.","pinned":false,"hidden":false,"mode":"md"},{"id":3127,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs"},{"id":5492,"value":"### Most cell did not require much iteration\n\nPlotting a histogram of number of edits we see many cells were never edited, or edited only a few times, but there is a long tail.","pinned":false,"hidden":false,"mode":"md"},{"id":5148,"value":"edits = [\n ...d3\n .rollup(\n filtered_events,\n (d) => d.length,\n (d) => d.node_name\n )\n .entries()\n]\n .map(([cell, edits]) => ({ cell, edits }))\n .sort((a, b) => a.edits - b.edits)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5464,"value":"Plot.plot({\n marks: [\n Plot.rectY(\n edits,\n Plot.binX(\n { y: \"count\" },\n {\n x: \"edits\",\n tip: true,\n thresholds: [\n 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 25, 30,\n 35, 40, 100, 200\n ]\n }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5505,"value":"### The `GameOverSystem` component\n\nA good example of a cell the LLM aced in a single prompt was the GameOverSystem that was introduced in part IV and survived to the end of the process. It is a non-trivial quantity of code that was generated from a high-level prompt\n","pinned":false,"hidden":false,"mode":"md"},{"id":3167,"value":"GameOverSystem = {\n ({\n prompt:\n \"Add a system that when lives is 0, the top score is recorded and the player ship is removed\",\n time: 1700511760135,\n comment:\n \"Create a system to handle game over, record top score, and remove player ship\"\n });\n\n class GameOverSystem extends deps.resolve(\"BaseSystem\") {\n constructor() {\n super();\n }\n\n tick() {\n if (gameState.lives <= 0) {\n gameState.state = \"Game Over\";\n\n // Record top score\n const topScore = localStorage.getItem(\"topScore\") || 0;\n if (gameState.score > topScore) {\n localStorage.setItem(\"topScore\", gameState.score);\n }\n\n // Remove player ship\n entities.delete(\"player\");\n const playerElement = game_view.querySelector(\"#player\");\n if (playerElement) playerElement.remove();\n }\n }\n }\n\n deps.register(\"GameOverSystem\", new GameOverSystem(), 1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5516,"value":"$3d","pinned":false,"hidden":false,"mode":"md"},{"id":5564,"value":"$3e","pinned":false,"hidden":false,"mode":"md"},{"id":6274,"value":"## Good Design Decisions \n\nThe LLM and I made some important decisions at the beginning of the project that I think were critical for the overall success. I also made a few big mistakes that damaged the project which I will talk about afterwards.\n\n\n\n\n\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":6298,"value":"\n\n### Use of an Entity Component System\n\nMy first question to the LLM was\n\n_\"I want to build a really fast high quality game using html, but incrementally in the notebook, so we need to build each system independently. Do you have a good architecture suggestion. It should be a one pager, with neon graphics like geomtry wars, maybe exploiting the simplicity of SVG, but somehow with shaders?\"_\n\nIt responded with:\n\n_\"Building a fast, high-quality game with HTML and SVG can be achieved using a component-based architecture where each system of the game is developed independently. Here's an architectural suggestion: ...\"\n_\n\nIts actual concrete architecture was not really used, but we did go with an Entity Component System. That worked out *really* well with the notebook environment because we could add systems over time.","pinned":false,"hidden":false,"mode":"md"},{"id":6301,"value":"$3f","pinned":false,"hidden":false,"mode":"md"},{"id":6388,"value":"$40","pinned":false,"hidden":false,"mode":"md"},{"id":6313,"value":"$41","pinned":false,"hidden":false,"mode":"md"},{"id":6326,"value":"## The cost\n\nI started the project with GPT-4, but then GPT-4-turbo came out with a bigger context windows and reduced costs so I switched to that. Still, the costs of a large context windows started to add up as the project got bigger (particularly for a hobby project) and I had to start consciously thinking about costs every time I pressed the prompt button. The total cost was under $100, and compared to programmer time, it was a total bargain, but this was still quite a small project in total line count so a real project would probably be at least 10x in cost.\n\n![image@1.png](${await FileAttachment(\"image@1.png\").url()})\n\nI think it would be useful if Roboco-op displaced the token cost for each cell so cost could be optimised better, and have tools for temporarily masking cells from the context window. I think the approach has good potential but there are signs that costs and complexity will become a future scaling bottleneck if not addressed.","pinned":false,"hidden":false,"mode":"md"},{"id":6340,"value":"$42","pinned":false,"hidden":false,"mode":"md"},{"id":6363,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6365,"value":"## Research Tools","pinned":false,"hidden":false,"mode":"md"},{"id":6367,"value":"#### History search\n\nThis is a search over the entire series notebook edit history","pinned":false,"hidden":false,"mode":"md"},{"id":5511,"value":"events","pinned":true,"hidden":false,"mode":"ojs"},{"id":6369,"value":"#### Calculations","pinned":false,"hidden":false,"mode":"md"},{"id":4513,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":4692,"value":"enrich_time = (time, prefix = \"\") => ({\n [`${prefix}time`]: new Date(time),\n [`${prefix}date`]: `2023-${new Date(time).getMonth() + 1}-${new Date(time)\n .getDate()\n .toString()\n .padStart(2, \"0\")}`,\n [`${prefix}minute`]:\n new Date(time).getHours() + new Date(time).getMinutes() / 60\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4468,"value":"isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6374,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6376,"value":"## Game Implementation\n\nThese cells implement the game. I moved some of them into the article, you can see the prompt that generated them in the cell code (burger menu on left)","pinned":false,"hidden":false,"mode":"md"},{"id":2849,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3436,"value":"### State","pinned":false,"hidden":false,"mode":"md"},{"id":2298,"value":"$44","pinned":false,"hidden":false,"mode":"ojs"},{"id":2219,"value":"entities = ({\n prompt: \"Create the entity state as a map of objects\",\n time: 1699829601388,\n comment: \"Initialize an empty Map to hold the entity state\"\n} && new Map())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2757,"value":"gameState = {\n ({\n prompt:\n 'Add a cell for the game state, should contain lives 3, a score 0 and the state \"Running\"',\n time: 1700002625261,\n comment:\n \"Cell to store game state including lives, score, and current state\"\n });\n\n const gameState = { lives: 3, score: 0, state: \"Game Over\" };\n return gameState;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2693,"value":"keysPressed = {\n ({\n prompt:\n \"Write a cell that listens to the keyboard and records which keys are up or down and swallows Array events to prevent scrolling\",\n time: 1699995151091,\n comment:\n \"Cell to record key up/down states and prevent scrolling with arrow keys\"\n });\n const keysPressed = {};\n\n function keydownListener(event) {\n if (event.key.startsWith(\"Arrow\")) event.preventDefault(); // Prevent scrolling with arrow keys\n keysPressed[event.key] = true;\n }\n\n function keyupListener(event) {\n if (event.key.startsWith(\"Arrow\")) event.preventDefault(); // Prevent scrolling with arrow keys\n keysPressed[event.key] = false;\n }\n\n window.addEventListener(\"keydown\", keydownListener);\n window.addEventListener(\"keyup\", keyupListener);\n\n // Cleanup listeners when cell is re-evaluated or notebook is closed\n invalidation.then(() => {\n window.removeEventListener(\"keydown\", keydownListener);\n window.removeEventListener(\"keyup\", keyupListener);\n });\n\n return keysPressed;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3431,"value":"### Refactored Routines","pinned":false,"hidden":false,"mode":"md"},{"id":3419,"value":"collisionDetection_v1 = {\n ({\n prompt: \"Write the common collision routine and register as a dependancy\",\n time: 1700899553837,\n comment: \"Common collision detection routine\"\n });\n\n function collisionDetection(entityA, entityB, collisionRadius = 0) {\n const dx = entityA.position[0] - entityB.position[0];\n const dy = entityA.position[1] - entityB.position[1];\n const distance = Math.sqrt(dx * dx + dy * dy);\n return (\n distance < (entityA.radius || 0) + (entityB.radius || 0) + collisionRadius\n );\n }\n\n deps.register(\"collisionDetection\", collisionDetection, 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3422,"value":"spawnEntity_v1 = {\n ({\n prompt: \"Write the common entity spawning routine as a dependancy\",\n time: 1700899657356,\n comment: \"Common entity spawning routine\"\n });\n let count = 0;\n function spawnEntity(\n entityTemplate,\n position,\n velocity,\n additionalProps = {}\n ) {\n const newEntity = {\n id: `s${count++}`,\n template: entityTemplate,\n position: position,\n velocity: velocity,\n ...additionalProps\n };\n entities.set(newEntity.id, newEntity);\n return newEntity;\n }\n\n deps.register(\"spawnEntity\", spawnEntity, 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3425,"value":"randomizeVelocity_v1 = {\n ({\n prompt:\n \"Write the common randomized velocity adjustment routine as a dependancy\",\n time: 1700899715036,\n comment: \"Common randomized velocity adjustment routine\"\n });\n\n function randomizeVelocity(entity, magnitude, axis = null) {\n const adjust = () => (Math.random() - 0.5) * magnitude;\n if (axis === \"x\" || axis === null) entity.velocity[0] += adjust();\n if (axis === \"y\" || axis === null) entity.velocity[1] += adjust();\n }\n\n deps.register(\"randomizeVelocity\", randomizeVelocity, 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3428,"value":"removeEntity_v1 = {\n ({\n prompt: \"Write the entity removal routine as a dependancy\",\n time: 1700899801821,\n comment: \"Entity removal routine\"\n });\n\n function removeEntity(entityId) {\n entities.delete(entityId);\n const element = game_view.querySelector(`#${entityId}`);\n if (element) element.remove();\n }\n\n deps.register(\"removeEntity\", removeEntity, 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3445,"value":"generateAsset_v1 = {\n ({\n prompt:\n \"Write the routine for asset generation, remember we want to use deps instead of assets going forward\",\n time: 1700900207335,\n comment: \"Routine for asset generation using deps\"\n });\n\n function generateAsset(name, generatorFunction, ...args) {\n const asset = generatorFunction(...args);\n deps.register(name, asset, 1);\n }\n\n deps.register(\"generateAsset\", generateAsset, 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3448,"value":"### Update Game","pinned":false,"hidden":false,"mode":"md"},{"id":3503,"value":"$45","pinned":false,"hidden":false,"mode":"ojs"},{"id":3510,"value":"viewof PlayerBoulderCollisionSystem = {\n ({\n prompt:\n \"I think we should split the game loop into independant systems. Create the player collides with bolder as an independent system with a UI\",\n time: 1700902504309,\n comment: \"Create independent system for player colliding with boulder\"\n });\n\n class PlayerBoulderCollisionSystem extends deps.resolve(\"BaseSystem\") {\n constructor() {\n super();\n }\n\n tick() {\n const player = entities.get(\"player\");\n if (!player) return;\n\n const boulders = Array.from(entities.values()).filter(\n (e) => e.generator === \"generateBoulder\"\n );\n\n boulders.forEach((boulder) => {\n if (\n deps.resolve(\"collisionDetection\")(player, boulder, boulder.radius)\n ) {\n gameState.lives -= 1;\n }\n });\n }\n }\n\n deps.register(\n \"PlayerBoulderCollisionSystem\",\n new PlayerBoulderCollisionSystem(),\n 1\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2507,"value":"assets = deps.resolve(\"Assets\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2267,"value":"caller_id = ({\n prompt:\n \"Write a function called caller_id that will identifying the source code location by reading a stack trace and hashing it\",\n time: 1699860967160,\n comment: \"Function for identifying the source code location\"\n} &&\n function caller_id() {\n const err = new Error();\n const stack = err.stack.split(\"\\n\");\n const sourceLocation = stack[2];\n let hash = 0;\n for (let i = 0; i < sourceLocation.length; i++) {\n const char = sourceLocation.charCodeAt(i);\n hash = (hash << 5) - hash + char;\n hash = hash & hash; // Convert to 32bit integer\n }\n return hash;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2306,"value":"deps.register(\"BaseSystem\", class {}, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2411,"value":"ticker_v1 = {\n ({\n prompt:\n \"Tick all systems by iterating the deps and calling the tick function if it exists\",\n time: 1699907020513,\n comment:\n \"Ticker function v1 that resolves dependencies and calls tick on each system\"\n });\n let cancel = false;\n function tick() {\n if (isSafari) return;\n if (cancel) return;\n const names = Array.from(deps.dependencies.keys());\n names.forEach((name) => {\n const system = deps.resolve(name);\n if (system && typeof system.tick === \"function\") {\n try {\n system.tick();\n } catch (e) {\n console.error(e);\n }\n }\n });\n requestAnimationFrame(tick);\n }\n tick();\n // Clear loop if cell recomputes\n invalidation.then(() => (cancel = true));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2504,"value":"assets_v1 = ({\n prompt:\n \"At the moment all entities are circles. Lets add a Assets dependancy that will hold a str -> any map\",\n time: 1699948455733,\n comment: \"Register Assets dependency holding a map from string to any\"\n} && deps.register(\"Assets\", new Map(), 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2527,"value":"player_entity = {\n ({\n prompt: \"create an entity called player at the origin\",\n time: 1699948785452,\n comment: \"Create a player entity at the origin\"\n });\n\n const player = {\n id: \"player\",\n template: \"ship\",\n position: [0, 0, 0],\n velocity: [0, 0, 0],\n force: [0, 0, 0]\n };\n\n // Add player entity to entities map\n entities.set(player.id, player);\n return player;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2559,"value":"$46","pinned":false,"hidden":false,"mode":"ojs"},{"id":2649,"value":"$47","pinned":false,"hidden":false,"mode":"ojs"},{"id":2624,"value":"projectile_asset = {\n ({\n prompt: \"create projectile asset as an SVG line\",\n time: 1699992605095,\n comment: \"Create a projectile asset as an SVG line\"\n });\n // Create an SVG line to represent a projectile\n const projectile = htl.svg``;\n assets.set(\"projectile\", projectile);\n return htl.svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2731,"value":"boulder_template = {\n ({\n prompt:\n \"now we need some astroids to collide into, create a jagged bolder templates\",\n time: 1700001722754,\n comment: \"Create jagged boulder SVG template\"\n });\n\n // Create a jagged boulder template using a random polygon\n const points = Array.from({ length: 8 }, () => {\n const angle = Math.random() * 2 * Math.PI;\n const radius = 0.1 + Math.random() * 0.05; // radius between 0.1 and 0.15\n return `${Math.cos(angle) * radius},${Math.sin(angle) * radius}`;\n }).join(\" \");\n\n const boulder = htl.svg``;\n assets.set(\"boulder\", boulder);\n return htl.svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2743,"value":"small_boulder_template = {\n ({\n prompt: \"We need a template for smaller boulders\",\n time: 1700002006174,\n comment: \"Create template for smaller boulders\"\n });\n\n // Create a smaller jagged boulder template using a random polygon\n const points = Array.from({ length: 8 }, () => {\n const angle = Math.random() * 2 * Math.PI;\n const radius = 0.025 + Math.random() * 0.00125;\n return `${Math.cos(angle) * radius},${Math.sin(angle) * radius}`;\n }).join(\" \");\n\n const smallBoulder = htl.svg``;\n assets.set(\"smallBoulder\", smallBoulder);\n return htl.svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2956,"value":"$48","pinned":false,"hidden":false,"mode":"ojs"},{"id":3042,"value":"$49","pinned":false,"hidden":false,"mode":"ojs"},{"id":3051,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs"},{"id":3068,"value":"HUDSystem = {\n ({\n prompt: \"We need a system to update the score and lives each tick.\",\n time: 1700416874329,\n comment: \"Create a system to update the HUD (score and lives) each tick\"\n });\n\n class HUDSystem extends deps.resolve(\"BaseSystem\") {\n constructor() {\n super();\n }\n\n tick() {\n const scoreElement = game_view.querySelector(\"#score-value\");\n if (scoreElement) scoreElement.textContent = gameState.score;\n\n const livesElement = game_view.querySelector(\"#lives-value\");\n if (livesElement) livesElement.textContent = gameState.lives;\n }\n }\n\n deps.register(\"HUDSystem\", new HUDSystem(), 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3108,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs"},{"id":3163,"value":"CleanupSystem = {\n ({\n prompt:\n \"Add a system to remove transforms that are not attached to an entities in the view\",\n time: 1700511337309,\n comment:\n \"Create a system to remove transforms that are not attached to an entities in the view\"\n });\n\n class CleanupSystem extends deps.resolve(\"BaseSystem\") {\n constructor() {\n super();\n this.game_view = deps.resolve(\"game_view\");\n }\n\n tick() {\n const transforms = this.game_view.querySelectorAll(\"#game-root g[id]\");\n transforms.forEach((transform) => {\n const id = transform.getAttribute(\"id\");\n if (!entities.has(id)) {\n transform.remove();\n }\n });\n }\n }\n\n deps.register(\"CleanupSystem\", new CleanupSystem(), 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3165,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs"},{"id":3169,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs"},{"id":3224,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs"},{"id":3283,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs"},{"id":3606,"value":"$50","pinned":false,"hidden":false,"mode":"ojs"},{"id":3459,"value":"deps.resolve(\"generateUIPanel\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3324,"value":"$51","pinned":false,"hidden":false,"mode":"ojs"},{"id":3354,"value":"$52","pinned":false,"hidden":false,"mode":"ojs"},{"id":3875,"value":"$53","pinned":false,"hidden":false,"mode":"ojs"},{"id":3654,"value":"$54","pinned":false,"hidden":false,"mode":"ojs"},{"id":3767,"value":"generateNeonGlowFilterPreview","pinned":false,"hidden":false,"mode":"ojs"},{"id":3763,"value":"NeonFilterApplicationSystem = {\n ({\n prompt: \"Update the filter when generateNeonGlowFilterPreview changes\",\n time: 1701013247736,\n comment: \"Create a system to apply neon filter to SVG view\"\n });\n\n const neonGlowFilterGenerator = deps.resolve(\"neonGlowFilterGenerator\");\n const settings = generateNeonGlowFilterPreview;\n const neonFilter = neonGlowFilterGenerator(\n \"neon-filter\",\n settings.blur,\n settings.color,\n settings.intensity\n );\n\n // Attach the filter to the defs of the game view if not already there\n const defs = game_view.querySelector(\"defs\") || htl.svg``;\n const existingFilter = defs.querySelector(`#neon-filter`);\n if (existingFilter) existingFilter.remove();\n defs.appendChild(neonFilter);\n game_view.insertBefore(defs, game_view.firstChild);\n\n // Apply the filter to all elements in the game view\n\n for (const el of game_view.querySelectorAll(\"#game-root\")) {\n el.setAttribute(\"filter\", `url(#neon-filter)`);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3825,"value":"entities","pinned":true,"hidden":false,"mode":"ojs"},{"id":2994,"value":"$55","pinned":false,"hidden":false,"mode":"ojs"},{"id":3402,"value":"$56","pinned":false,"hidden":false,"mode":"ojs"},{"id":2803,"value":"game_view = deps.resolve(\"game_view\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3914,"value":"backdrop = FileAttachment(\"image (5).png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3926,"value":"generateUIPanel_v2 = {\n ({\n prompt: \"Rewrite the UI panel using a bindable view\",\n time: 1700899857021,\n comment: \"UI panel generator routine\"\n });\n\n function generateUIPanel(settings) {\n return view`${[\n \"...\",\n Object.entries(settings).map(([key, value]) => {\n const wrapper = document.createElement(\"div\");\n const args =\n value.type === \"range\"\n ? [[value.options.min, value.options.max], value.options]\n : [value.options];\n\n const input = Inputs[value.type](...args);\n input.addEventListener(\"input\", value.callback);\n input.dispatchEvent(new Event(\"input\"));\n return [key, input];\n })\n ]}`;\n }\n\n deps.register(\"generateUIPanel\", generateUIPanel, 2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3940,"value":"viewof positionView = {\n ({\n prompt:\n \"write a UI for x,y,width,height in -1 to +1 range called positionView\",\n time: 1701104257534,\n comment: \"Create a UI for x, y, width, and height in the -1 to +1 range\"\n });\n\n const positionSettings = {\n x: Inputs.range([-1, 1], { value: -0.42, step: 0.01, label: \"X position\" }),\n y: Inputs.range([-1, 1], { value: -0.59, step: 0.01, label: \"Y position\" }),\n width: Inputs.range([-1, 1], { value: -0.17, step: 0.01, label: \"Width\" }),\n height: Inputs.range([-1, 1], { value: 0.03, step: 0.01, label: \"Height\" })\n };\n\n const positionView = view`

Position View

\n ${[\"...\", positionSettings]}\n

`;\n\n return positionView;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3943,"value":"viewof positionStartButton = {\n ({\n prompt:\n \"write a UI for x,y,width,height in -1 to +1 range called positionStartButton\",\n time: 1701104319993,\n comment: \"Create a UI for x, y, width, and height in the -1 to +1 range\"\n });\n\n const positionSettings = {\n x: Inputs.range([-1, 1], { value: 0, step: 0.01, label: \"X position\" }),\n y: Inputs.range([-1, 1], { value: 0, step: 0.01, label: \"Y position\" }),\n width: Inputs.range([-1, 1], { value: 1, step: 0.01, label: \"Width\" }),\n height: Inputs.range([-1, 1], { value: 1, step: 0.01, label: \"Height\" })\n };\n\n const positionView = view`

Position and Size (start button)

\n ${[\"...\", positionSettings]}\n

`;\n\n return positionView;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3957,"value":"positionView","pinned":true,"hidden":false,"mode":"ojs"},{"id":3971,"value":"game_view_v3 = {\n ({\n prompt:\n \"create a new game_view that does fill the content area instead of having a specified height and width\",\n time: 1701105057172,\n comment: \"Create a new game_view that fills the content area\"\n });\n\n const game_view = htl.html`\n \n \n `;\n\n deps.register(\"game_view\", game_view, 3);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4231,"value":"### Sidequest Filtering\n\niterating on the filter on its own\nhttps://observablehq.com/d/7b8e4503e0cabb68","pinned":false,"hidden":false,"mode":"md"},{"id":4273,"value":"### Audio","pinned":false,"hidden":false,"mode":"md"},{"id":4287,"value":"audio = ({\n explode: htl.html`