Thinking Surface

What is this?

This site is a kind of personal computing tool built in the lineage of Notion and Jupyter notebooks: a system of blocks for thinking, connecting, writing, and coding all in one. Think of it like the eccentric notebook of a designer, where each page is an expression of my curiosity—rather than expertise.

A surface for the Game of Life

This is an experiment.

One thesis of Thinking Surface is that a document can be computational. It can bring together natural language, executable code, as well as the ability to generate its own live output. The page is like a computational environment.

I’m building Conway’s Game of Life here to test that idea. The program is written in Scheme because Scheme was the first interpreter I added to Thinking Surface. This project began as a companion for working through SICP, so Scheme is also part of the surface’s origin story.

Game of Life is a useful test because it is simple to describe but dynamic when it runs. The rules fit in a few lines of prose. The behavior appears over time.

The rules

Imagine a grid. Each cell is alive or dead. On each tick, every cell looks at its eight neighbors and decides what happens next. If alive with 2 or 3 living neighbors, it'll stay alive. If alive with anything else, it'll die. If dead with exactly 3 living neighbors, it'll come to life

From those three rules, patterns move, stabilize, disappear, and sometimes seem almost creature-like. That emergence is what makes Life a good first test for a programmable page.

How to store life

Most of the grid is dead most of the time. If I stored the whole grid, I would mostly be storing absence. So I’ll store only the living cells. The world is a list of points, and each point is an (x . y) pair.

A small world might look like this:

(define seed
  '((1 . 1) (2 . 2) (0 . 3) (1 . 3) (2 . 3)
    (7 . 1) (8 . 1) (9 . 1)
    (8 . 0) (8 . 2)
    (14 . 2) (15 . 2) (16 . 2)
    (14 . 3)          (16 . 3)
    (14 . 4) (15 . 4) (16 . 4)
    (4 . 8) (5 . 8) (6 . 8) (7 . 8)
    (4 . 9)                 (7 . 9)
    (4 . 10) (5 . 10) (6 . 10) (7 . 10)
    (11 . 8) (12 . 8) (13 . 8)
    (12 . 9)
    (11 . 10) (12 . 10) (13 . 10)
    (16 . 10) (17 . 10)
    (16 . 11) (17 . 11)
    (2 . 12) (3 . 12) (4 . 12)
    (3 . 13)))

That list is the whole world: anything in the list is alive; anything missing from the list is dead.

Is this cell alive?

Because the world is only a list of living cells, asking whether a cell is alive means asking whether its point appears in the list.

First I need a way to compare two points. Two points are the same when their x values match and their y values match.

(define (same-point? a b)
    (and (= (car a) (car b))
         (= (cdr a) (cdr b))))

Then alive? walks the world one point at a time. If it finds the point, the cell is alive. If it reaches the end of the list, the cell is dead.

(define (alive? p world)
  (if (null? world)
      #f
      (if (same-point? p (car world))
          #t
          (alive? p (cdr world)))))

This is recursive. Each call peels one point off the list and checks the rest. It is not the fastest possible representation — a set would make lookup cheaper — but it keeps the structure visible for now.

Eight neighbors

Each cell has eight neighbors: the cells directly above, below, left, right, and diagonal from it. Given a point (x . y), those neighbors are the surrounding (x ± 1 . y ± 1) combinations, excluding the point itself.

(define (neighbors p)
  (let ((x (car p)) (y (cdr p)))
    (list
      (cons (- x 1) (- y 1)) (cons x (- y 1)) (cons (+ x 1) (- y 1))
      (cons (- x 1) y)                         (cons (+ x 1) y)
      (cons (- x 1) (+ y 1)) (cons x (+ y 1)) (cons (+ x 1) (+ y 1)))))

The code is laid out like the neighborhood itself: three positions above, two beside, and three below. The missing middle position is the cell we started from.

Counting living neighbors

The rules depend on a count: how many of a cell’s eight neighbors are alive? To answer that, I generate the neighbor points, walk through them, and use alive? to count how many appear in the world.

(define (count-living p world)
  (let loop ((ns (neighbors p)) (n 0))
    (if (null? ns) n
        (loop (cdr ns) (if (alive? (car ns) world) (+ n 1) n)))))

Who to check

The grid is infinite, so checking every cell is impossible. But Life has a useful locality: nothing changes unless it is already alive or near something alive.

Only two kinds of cells can possibly change:

alive cells
dead cells next to something alive

Everything else is dead, has no living neighbors, and stays dead. So the candidate list is every living cell plus all of their neighbors. After removing duplicates, that is the whole set of cells worth checking.

(define (dedupe lst)
  (if (null? lst) '()
      (if (member (car lst) (cdr lst))
          (dedupe (cdr lst))
          (cons (car lst) (dedupe (cdr lst))))))

(define (candidates world)
  (let loop ((w world) (acc '()))
    (if (null? w) (dedupe acc)
        (loop (cdr w) (cons (car w) (append (neighbors (car w)) acc))))))

The rule as a function

Now the three rules become one decision for a single point: will this point be alive in the next world?

First count its living neighbors. Then apply the rule differently depending on whether the point is already alive or currently dead.

(define (will-live? p world)
  (let ((n (count-living p world)))
    (if (alive? p world)
        (or (= n 2) (= n 3))   
        (= n 3))))

The tick

A tick builds the next world from the current one.

Walk every candidate point, ask will-live?, and keep the points that say yes. The result is a new list of living cells.

Because this page draws a finite window, I bound the candidates to that window. The grid can be imagined as infinite, but this run only computes the part I can see.

(define (tick world)
  (let loop ((cs (candidates world)) (next '()))
    (if (null? cs) next
        (loop (cdr cs)
              (if (will-live? (car cs) world)
                  (cons (car cs) next)
                  next)))))

This is the whole engine. No mutation. The next world is a fresh list, built from the old one.

Drawing

Since the surface compiles scheme and shows me what it prints, i'll just print a window of the grid. Squares for alive. dots for dead.

(define (cell->text p world)
    (if (alive? p world) "# " ". "))

(define (draw-row world y x w)
    (if (= x w)
        "\n"
        (string-append
          (cell->text (cons x y) world)
          (draw-row world y (+ x 1) w))))

(define (draw-frame world w h)
  (let loop-y ((y 0) (out ""))
    (if (= y h)
        out
        (loop-y (+ y 1)
                (string-append out (draw-row world y 0 w))))))

Notice that draw-frame returns a string instead of displaying it immediately. That matters because the output block can animate a list of frame strings in place.

Run it

The first version printed every frame one after another. That showed the motion, but it made the output grow downward forever.

Now the program builds a list of frames. The output block receives that list and redraws the same area over time.

(define (in-bounds? p w h)
    (and (>= (car p) 0)
         (< (car p) w)
         (>= (cdr p) 0)
         (< (cdr p) h)))

(define (candidates-bounded world w h)
    (let loop ((cs (candidates world)) (out '()))
      (if (null? cs)
          out
          (loop (cdr cs)
                (if (in-bounds? (car cs) w h)
                    (cons (car cs) out)
                    out)))))

(define (tick-bounded world w h)
    (let loop ((cs (candidates-bounded world w h)) (next '()))
      (if (null? cs)
          next
          (loop (cdr cs)
                (if (will-live? (car cs) world)
                    (cons (car cs) next)
                    next)))))

(define (life-frames world n w h)
    (let loop ((world world) (remaining n) (frames '()))
      (let ((frame (draw-frame world w h)))
        (if (= remaining 0)
            (reverse (cons frame frames))
            (loop (tick-bounded world w h)
                  (- remaining 1)
                  (cons frame frames))))))

(animate (life-frames seed 40 20 15) 500)

. . . . . . . . # . . . . . . . . . . . 
. # . . . . . # # # . . . . . . . . . . 
. . # . . . . . # . . . . . # # # . . . 
# # # . . . . . . . . . . . # . # . . . 
. . . . . . . . . . . . . . # # # . . . 
. . . . . . . . . . . . . . . . . . . . 
. . . . . . . . . . . . . . . . . . . . 
. . . . . . . . . . . . . . . . . . . . 
. . . . # # # # . . . # # # . . . . . . 
. . . . # . . # . . . . # . . . . . . . 
. . . . # # # # . . . # # # . . # # . . 
. . . . . . . . . . . . . . . . # # . . 
. . # # # . . . . . . . . . . . . . . . 
. . . # . . . . . . . . . . . . . . . . 
. . . . . . . . . . . . . . . . . . . .

Thinking Surface

What is this?

Surfaces:

Thoughts:

About me:

What is this?

Surfaces:

Thoughts:

About me: