Appendix B · Programming in a Glass House

Appendix B: The Eight-Lesson Curriculum

The shipped learning sequence of Programming in a Glass House — each lesson with a live demonstration of the capability it teaches.

[code][live demos]

Each lesson in Glasshouse is an executable artifact under mechanical validation: its programs parse and run deterministically, every vocabulary card a step references exists, every sentence shown to the learner passes the jargon ban, and every “find this and change it” instruction names text actually present in the starting program. The demonstrations below are self-contained renderings of each lesson's core interaction — the same mechanisms, in miniature, that the studio provides in full. The arc is the report's five demands in teachable order: lesson 1 reads the vocabulary, 2–3 create by reacting, 4–5 follow the flow and see the state, 6–8 create by abstracting and manipulate directly.

#	Lesson	Goal	Capability exercised
1	Read a picture	Every number on the screen tells you what it controls.	Hover cards; on-picture annotation	play ▶
2	Change the numbers	Adjust a program by feel, not by retyping.	Draggable literals; color widget	play ▶
3	Make your own	Go from a blank line to a shape without memorizing anything.	Completions with live previews; the parts palette	play ▶
4	Watch it move	Animation is state changing frame by frame — and you can hold time still.	The frame model; state panel; scrubber	play ▶
5	Many at once	A loop is one description that happens many times.	`repeat`; the iteration grid	play ▶
6	Name it, connect it	A named value is a handle; connected values move together.	The first two abstraction gestures	play ▶
7	Teach it a part	A cluster of shapes can become a word the computer knows.	`to` definitions; teach and open	play ▶
8	Grab and spin	Grab anything — even computed, even rotated — and the program follows honestly.	Direct manipulation; `group`; rotation handles	play ▶

Lesson 1: Read a picture

Every number on the screen tells you what it controls.

Lesson 1 — read a picturelive demo

paper(color: #FAF9F5)
circle(center: (240, 120),
       radius: 70,
       fill: #2A76C6)

Point at any word in the code. A card says what it means, and the picture shows which part of the drawing that word controls.

Back to contents

Lesson 2: Change the numbers

Adjust a program by feel, not by retyping.

Lesson 2 — change the numberslive demo

paper(color: #FAF9F5)
circle(center: (240, 120),
       radius: 70,
       fill: #2A76C6)

Press on the radius number and drag left or right — the circle follows. Click the color to cycle it. Every change is a real edit to the literal.

Back to contents

Lesson 3: Make your own

Go from a blank line to a shape without memorizing anything.

Lesson 3 — make your ownlive demo

paper(color: #FAF9F5)
← pick a part from the palette

Every part shows itself as a picture before you commit. Click a thumbnail: a complete, working line — every argument pre-filled — is inserted and drawn.

Back to contents

Lesson 4: Watch it move

Animation is state changing frame by frame — and you can hold time still.

Lesson 4 — watch it movelive demo

paper(color: #FAF9F5)
state y = 40
state speed = 3

every frame:
  y = y + speed
  if y > 200: speed = 0 - speed
  if y < 30:  speed = 0 - speed
  circle(center: (240, y), radius: 18,
         fill: #2A76C6)

Press play, then drag the slider — you are scrubbing through recorded time. The state panel shows y and speed at exactly the frame you are holding. Frame 137 is always the same frame 137.

Back to contents

Lesson 5: Many at once

A loop is one description that happens many times.

Lesson 5 — many at oncelive demo

paper(color: #FAF9F5)
repeat 5 as i:
  circle(center: (8 + i * 56, 120),
         radius: 14, fill: #7A4EA3)

Drag the count. Below the stage, the iteration grid shows the picture after each pass of the loop — hover a cell to see which circle that pass drew.

Back to contents

Lesson 6: Name it, connect it

A named value is a handle; connected values move together.

Lesson 6 — name it, connect itlive demo

paper(color: #FAF9F5)
circle(center: (140, 120), radius: 20, fill: #2A76C6)
circle(center: (340, 120), radius: 40, fill: #2A76C6)

First name the 20 — it becomes state size = 20 and appears as a handle. Then connect the other radius to it and drag size: both circles move together, by the rule you chose. The picture never changed when the code was reorganized — only when you dragged.

Back to contents

Lesson 7: Teach it a part

A cluster of shapes can become a word the computer knows.

Lesson 7 — teach it a partlive demo

Two plain shapes become to hut(at: p) — and once the hut is a word, its call has a point handle on the stage: drag the hut and the call’s point literal rewrites. Open it back up and the shapes return inline, the picture untouched.

Back to contents

Lesson 8: Grab and spin

Grab anything — even computed, even rotated — and the program follows honestly.

Lesson 8 — grab and spinlive demo

paper(color: #FAF9F5)
group(rotate: 30°, around: (240, 120)):
  rect(left: 318, top: 104,
       width: 44, height: 32, fill: #C46A3D)

Two handles, two different edits. Drag the arc knob at the pivot: the rotate literal turns. Drag the box itself: the pointer is inverted through the rotation matrix back to the box’s own left/top literals — the honest edit, at world coordinates, landing under your finger.

Back to contents

Companion to Programming in a Glass House and Appendix A: The Chalk Language. Part of Grasphouse.