software

Handmade Cellular Automata

Published: (January 6, 2026 at 01:59 PM EST)
6 min read
Source: Dev.to

Source: Dev.to

Introduction

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 results. It’s designed to be walked through together with a mentor.

It’s the opposite of “vibe coding”: to use these simulations to think & learn about the world, you need to know everything about how they work. That’s why we’re doing everything by hand. We’ll cover the absolute minimum setup you need to:

  1. Run things on a computer by yourself.
  2. Share them with collaborators so they can edit and build on them.

Inspirations

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, e.g.:
  • Very basic back‑ends:
    1. Google Sheets as a free backend.
    2. “BYO server” with remoteStorage.
    3. Free Cloudflare object storage.
  • Basic user management with OAuth (Twitter/Google login).
  • Basic computer‑graphics visualizations (rendering raw pixels, using PixiJS or ThreeJS).
  • Basic data analysis (Jupyter notebooks & Google Colab):
  • Tips for navigating open‑source codebases, forking, editing, and contributing pull requests.

In this lesson you’ll set up a cellular‑automata simulation as a single HTML file on your computer, then copy/paste it onto CodePen to share it on the internet.

Cellular automata demo

1. Install VS Studio Code

Download VS Code

We’ll use it as our IDE to edit code. The web browser is what will run the code.

VS Code can edit any programming language—either by running the code outside the editor or by installing a plugin that runs it for you.

2. Create an HTML File

An HTML file is just a text file with the .html extension. Inside the HTML we’ll embed the JavaScript we want to run.

  1. Create a file named vanilla.html with VS Code (anywhere on your computer).
  2. Paste the following code into it:
<!DOCTYPE html>
<html>
<head>
    <title>Vanilla JS</title>
</head>
<body>
    Hello!
    <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 JavaScript 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.

  1. Run the code by opening vanilla.html in your browser.
  2. Open the browser console (usually F12 → Console) to verify that Hello world! was logged.

Challenge

Can you make the web page display the current time?

  1. Get the current time in JavaScript.
  2. Use document.querySelector() to select the “ element and replace its contents with the local time.
  3. Use setInterval to auto‑update the display.

Solution:

Tip: You can use the browser console as a REPL! Expose a variable from your code with window.myVar = myVar and then edit it live in your app.

3. Deploy Your Code on the Internet

This is the fastest way to get your code running on millions of devices. It’s “infinitely” scalable because the code runs on the user’s computer, not on a central server. CodePen makes it very cheap (free) to host static HTML/JS.

  1. Go to CodePen.io and create a new Pen.
  2. Copy the entire contents of vanilla.html into the HTML panel (the <script> tag will automatically go into the JS panel).
  3. Save the Pen and enable the Public setting if you want others to see it.
  4. Share the URL with collaborators or embed the Pen in a blog post.

You now have a live, shareable version of your simulation that anyone can open in a browser—no server required!

What’s Next?

  • Add a simple backend (Google Sheets, remoteStorage, or Cloudflare).
  • Implement OAuth login (Twitter/Google).
  • Explore graphics libraries (PixiJS, ThreeJS).
  • Dive into data analysis with Jupyter/Colab.

Happy hacking! 🚀

Deploying Your Code

You can host the code on any static host because it only serves files (bandwidth, not CPU).

  1. Create a CodePen account – go to the site and sign up.
  2. Create a new “pen”.
  3. Paste your code into the HTML section of the editor.
  4. Click Save (top‑right).
  5. To share, click the share icon (arrow out of a box) in the bottom‑right corner (on the same row as Share / Export / Embed).

The shared link will look like this: (example omitted)

You can continue editing in CodePen or locally in VS Code.

4. Animated Rectangle

We’ll draw a rectangle that appears to move back and forth. In reality, we clear the canvas each frame and redraw the rectangle at a new position.

Replace your current code with the following template:

<!DOCTYPE html>
<html>
<head>
    <title>Vanilla JS</title>
    <style>
        html, body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <script>
        // Full‑screen canvas
        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 rectangle for the next frame
            positionX += 1;

            // Schedule the next frame
            requestAnimationFrame(loop);
        }

        // Start the animation
        loop();
    </script>
</body>
</html>
  • Enter fullscreen mode – click the fullscreen button in the preview.
  • Exit fullscreen mode – click the same button again.

Challenges

  1. Make the box move faster.
  2. Start the box at the right edge and move left.
  3. Make the box move back & forth.

For the third challenge, set the X‑position to the sine of a counter variable. sin() returns a value in [-1, 1]; scale it to the desired range.

Solution example: (implementation omitted)

5. Cellular Automata Grid

We’ll start with a grid of pixels, each assigned a random colour. This will serve as a foundation for cellular‑automata simulations such as Conway’s Game of Life.

Replace your current code with this:

<!DOCTYPE html>
<html>
<head>
    <title>Vanilla JS</title>
    <style>
        html, body {
            margin: 0;
            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;   // Try changing this value
        initGrid();

        function loop() {
            requestAnimationFrame(loop);
            updateGrid();
            drawGrid();
        }
        loop();

        function initGrid() {
            // Fill the grid with initial random colours
            for (let x = 0; x 
        }

        // Additional functions (updateGrid, drawGrid, etc.) would go here
    </script>
</body>
</html>
  • Enter fullscreen mode – click the fullscreen button in the preview.
  • Exit fullscreen mode – click the same button again.

Challenges

  1. Expose grid to the browser console so you can edit it in real time.
    Hint: window.grid = grid;
    Then, from the console, you can run a one‑liner like Object.keys(grid).forEach(k => grid[k] = 0);.
  2. Make the colour change every frame by updating updateGrid.
  3. Set each pixel’s colour to that of its left neighbour (handle the left‑edge boundary to avoid errors).

Feel free to experiment with gridSize, colour calculations, and neighbour rules to create interesting cellular‑automata behaviours!

Back to Blog

Related posts

Read more »