Demo 2 —
Make the flow visible

In the example above, each frame that executes displays a
dot. By organizing program execution in time, we can relate to the execution flow geometrically. Seeing spatial patterns in execution give us a stronger intution about how our programs run.

Choc provides a framework to teach programming on a computer. That sounds silly, but code is often pasted flatly into documents and this provides us no advantage over paper.

By showing the flow of a program explicitly we can build new intellectual structures for thinking about how procedures execute.

Demo 3 —
Show the state

Click on the slider and then use the arrow keys to step through the code.

As we show the flow
structure
we can also show step
content.

Looking at the code above, the
triangle.fill
line is impossibly dense.
If you were reading the code, you might be able to tell that we're setting the
fill
of a
triangle
to a string that is an RGB value that changes with
i
.
But the code gives no insight into what color that actually is.

In the timeline the cells display rich information such as
rotation
,
shape
, or
color
.
Choc provides hooks that allow us to annotate
any library
with custom descriptions and timeline rendering.

In this example, we're building a tower by
drawing a circle
and repeating that process on the y-axis.

We don't have to build a
"brick"
tower though. Try changing the first line to
"grass"
or
"bark"
. Try dragging the
radius
or
height
.

There is a bug in the above code that causes the tower to look funny. Can you find it? The
Math.sqrt
function returns some long numbers for
z
that don't feel right. I wonder, what would happen if we used
Math.round
to smooth them out?

A goal of Choc is to encourage both exploration and reflection. The hope is to give learners the ability to explore ideas without a bug being "wrong", "bad", or "a mistake". Hopefully as one learns to explore the properties of a microworld, they'll learn to transfer habits of exploration into the rest of their lives.

Create your own

Choc lessons should be captured in mind-sized bites. That is, each Choc
should be crafted around teaching a single concept that can be
explored. We hope you'll find Choc a useful tool for teaching.

We've tried to make Choc easy to include into other sites. To that end, here are a few JSFiddle examples you can look at:

Contribute

Certainly, this version falls short of Bret Victor's original design and, ultimately, the tool it could be. This demo is an early version and there are many bugs to be worked out. That said, even in it's current form we feel it can be really helpful for both novice and experienced programmers. If you'd like to contribute, Choc is open-source and MIT licensed.

Choc is split into two projects:
choc
contains the core for stepping through code and generating readable descriptions
choc-explore
contains this website and the examples.

Get notified about new demos

We built Choc to help teach programming and there are many lessons left to write. If you'd like to keep up-to-date with what's happening in the Choc community, sign up for the newsletter below (low volume: no more than one email per week). We'll send you some of the best examples of how-to-teach-programming on the web.