This tutorial will walk you through creating & deploying your first "computational sandbox", an environment where you can define the rules of a simulation and explore the result. This is designed to be walked through together with a mentor.
This is the opposite of vibe coding - in order for you to use these simulations to think & learn about the world, you need to know everything about how it works. This is why we're doing everything "by hand". We're going to do the absolute minimum setup you need to (1) run things on a computer by yourself (2) share it with collaborators in a way that they can edit and build on.
Inspirations
- Permacomputing
- Derek Sivers' "tech independence" philosophy
- See also Rosano's Zero Data Apps & the Kosmos network
- Casey Muratori's "Handmade Hero" series
-
Explorable Explanations
- Like the Parable of Polygons, a simulation about how sociology
- Cameras & Lenses, simulation about how cameras, light, and vision work
- Internet art experiments like those done by Nolan (https://eieio.games/) & Neal (https://neal.fun/). See Nolan's newsletter
- Example of a simple research prototype that is only a few lines of code & a single HTML file, good & evil words
Overview of the series
- (this article) How to run a piece of code in a plain HTML file on your computer, and deploy it on the internet with CodePen
- Deploying a free static website or app on GitHub pages, like Ithaca Social Circle, or an Obsidian based website "digital garden"
- Very basic backends ((1) using Google Sheets as a free backend, (2) or "BYO server" with remoteStorage, or (3) free CloudFlare object storage)
- Basic user management with OAuth (twitter/google login)
- Basic computer graphics visualizations (how to render pixels "raw", how to use a library like PixiJS or ThreeJS)
- Basic data analysis (Jupyter notebooks & Google Colab)
- Tips for navigating open source codebases, how to fork, edit, and contribute a pull request
In this lesson, you're going to setup this cellular automata simulation as a single HTML file on your computer, and copy/paste it onto CodePen to share it on the internet.
1. Install VS Studio Code
https://code.visualstudio.com/
We will use this as our IDE to edit code. The web browser is what will "run" the code.
You can use VS Code to edit any coding language, by either running the code outside of it, or finding a plugin that runs it for you.
2. Create an HTML file
This is just a text file with the extension .html. Inside of the HTML code we will embed the JavaScript code we want to run.
- Create the file
vanilla.htmlwith VS Code, anywhere on your computer - Paste in the following code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vanilla JS</title>
</head>
<body>
<p>Hello!</p>
<script>
// This is how you embed JavaScript inside of HTML
console.log("Hello world!")
</script>
</body>
</html>
Note: This series will not cover the basics of JS syntax. It's assumed you have a supplementary source or already know it. I recommend the book Eloquent Javascript, and the Codecademy JavaScript interactive lessons
- Run this code by opening this file in your browser
- Check the browser console to see if the JS code snippet ran correctly
Challenge: Can you make the web page display the current time?
You want to (1) get the current time in the JS code (2) Use
document.querySelector()to select the HTML element and edit it with the local time (3) usesetIntervalto auto-update the code
Note: You can use the browser console as a REPL! You can expose a variable from your code by saying window.myVar = myVar, and then you have access to editing it live in your app
3. Deploy your code on the internet
This is the fastest way to get your code to run on millions of devices. It's "infinitely" scalable because the code runs on the user's computer, not on a central server. It's very cheap for CodePen, or any static host, because it's just delivering the code (consuming bandwidth, not CPU).
- Make an account on https://codepen.io/
- Create a new "pen"
- Copy/paste your code into the "HTML" section of the CodePen interface
- Click "Save" in the top right
- To share it, click on the little icon of an arrow going out of a box, in the bottom right (on the same row as "Share" / "Export" / "Embed")
The shared link should look like this: https://codepen.io/omarshe7ta/full/wBWBqZq
You can continue writing code in the CodePen interface, or locally in VS Code.
4. Animated rectangle
Now we're going to run a piece of code that draws a rectangle that moves back and forth. Technically, the rectangle doesn't "move", we just erase the screen and redraw the rectangle at a new location at every frame.
Replace the code you have with this new template:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vanilla JS</title>
<style>
html, body {
margin: 0px; overflow: hidden;
}
</style>
</head>
<body>
<!-- the "canvas" element is the box on the page, inside of which all the drawing will happen -->
<canvas></canvas>
<script>
// set the height & width to be full screen
const canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext("2d");
let positionX = 25
function loop() {
// Clear the screen
ctx.clearRect(0, 0, canvas.width, canvas.height)
// Draw a rectangle, x, y, width, height
ctx.fillRect(positionX, 25, 20, 20);
// move the position for the next frame
positionX += 1
// run the function "loop" again
requestAnimationFrame(loop)
}
// run the function "loop" once
loop()
</script>
</body>
</html>
Challenge: Can you move the box faster?
Challenge: Can you make the box start at the right edge of the screen and move to the left
Challenge: Can you make the box move back & forth?
To do this, set the X of the box to be the sine of your count variable. Sine of any number will give you a range of [-1, 1], and you can scale that to the range you want it to go back and forth in.
5. Cellular Automata Grid
Here we're going to start with a piece of code that sets up a grid of pixels with a random color. We'll use this as a base to explore various "cellular automata" simulations, like the Game of Life.
- Replace the code you have with this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vanilla JS</title>
<style>
html, body {
margin: 0px; overflow: hidden;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
const canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext("2d");
const grid = {}
const gridSize = 5
initGrid()
function loop() {
requestAnimationFrame(loop)
updateGrid()
drawGrid()
}
loop()
function initGrid() {
// Fill the grid data structure with initial random colors
for (let x = 0; x < canvas.width; x+= gridSize) {
for (let y = 0; y < canvas.height; y+= gridSize) {
const color = Math.random() * 360
grid[`${x}_${y}`] = color
}
}
}
function updateGrid() {
for (let x = 0; x < canvas.width; x+= gridSize) {
for (let y = 0; y < canvas.height; y+= gridSize) {
let currentColor = grid[`${x}_${y}`]
// modify the color of the current square
// given the color it currently has
grid[`${x}_${y}`] = currentColor
}
}
}
function drawGrid() {
// draw whatever is currently stored in the grid variable
for (let x = 0; x < canvas.width; x+= gridSize) {
for (let y = 0; y < canvas.height; y+= gridSize) {
const color = grid[`${x}_${y}`]
ctx.fillStyle = `hsl(${color}, 70%, 60%)`;
ctx.fillRect(x, y, gridSize, gridSize);
}
}
}
</script>
</body>
</html>
Try changing the gridSize variable at the top.
Challenge: Expose the
gridvariable to the browser console, so you can edit it in "real-time". Ask your LLM for a one-liner to take this data structure and set it all to 0, or some other constantChallenge: Edit the
updateGridfunction to make the color change every frameChallenge: Edit the
updateGridfunction to set the color of the current pixel, equal to the pixel to its left.You'll need to handle the boundary condition to avoid errors.
Next lessons:
Top comments (0)