Demo 5 — Build a (mental) model
Choc is a tool for thinking powerful thoughts by stepping through code. It is an implementation of several ideas found in Bret Victor's Learnable Programming.
Thinking procedurally is one of the hardest concepts to grasp for the beginning programmer.
Choc is a toolkit for teachers to craft small programs that can be explored interactively.
Choc is different from other "live-coding" environments in that each step of the execution is controled by the learner. The first example above shows the most fundamental features of Choc:
The code is fully editable. This demo uses the Two.js API
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.
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.
Choc helps learners draw pathways from action-ways-of-knowing to symbolic-ways-of-knowing.
Try dragging around the underlined constants above. Can you find the constant that relates to "bounciness"? There are two variables above that relate to the "floor". Can you find them?
Because we're able to play with the symbols and see their effect, our action-knowledge is directly transferrable to symbolic-knowledge.
In the Voxel world, use arrow keys to navigate. Use the space button to jump. Hit space twice to fly. Use shift to move towards the ground.
Choc isn't limited to 2D canvas examples. Above we're interacting with a Voxel.js world.
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.
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:
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.
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.
Thoughts? Comments? Come join the discussion on Hacker News
