I'm teaching code to a friend. Both of us are graphic designers, so we set out to explore algorithms by making procedural pictures. We're enjoying our sessions a lot. I'm helping her avoid the frustration I felt, during my self-taught journey.
Having to share the logics I learned — empirically, in a long period of time — encourages me to structure my knowledge, speak out my findings. I learn as much as her! Pair programming is wonderful.
So, how do we learn to program? Clearly, tutorials loitering around on the web don't get us far. Learning the syntax doesn't get you anywhere. You need to learn how to decompose one's system complexity.
I come from the world of pictures, where the tools have been perfected for thousands of years. Comparatively, programming tools are... barbaric. It's the square of spokes in wheels. Nothing's immediate, nor visible. One must blindly manipulate symbols.
« Take care of your tools; they'll take care of you. »
For us to think freely, I worked on an environment that requires no installation, no compilation. It's a blank page for programming, and the pen is just there. The difference with the classical text-file is huge. There's still much to do, of course, but it's a start. Thanks, Bret Victor, for letting me stand on your shoulders, and see further.
The game changing details:
- The tool never hangs nor crash. Stop being afraid of infinite loops!
- Numbers can be modified quickly. Drag'em like sliders!
- The API is clear, there's no hidden state, no global state, all parameters are named.
I have so many ideas. Just wait.
I'm very proud of my pupil. We just completed our fifteenth session together, & she's nearly autonomous. Let me recount our journey:
The bare necessities
We learned the miminum of syntax, just to play with loops:
whileand the drawing function
rectangle(), using only
Circles & Rectangles
We added another drawing function:
circle(), and new control blocks:
A loop in a loop
scopeproblems. We flexed our muscles at decomposing pictures, tried to see the repeating pattern, and recreated some of the gorgeous vintage swiss graphics.
We learned to think in x. Meaning: formulate a logic that works in a general case, with a parameter. New syntax:
We talked about percentages. 100% is not equal to
1. Programming teaches you good & solid mathematical foundations.
Pi & Tau
radianterritory... Probably shouldn't have though.
The power of naming
We learned how useful it is to express your intentions in the code. Deciding to write an equation in a form rather than in another, to bring logic to light. Taking the time to chose good
variable names. Avoid magic numbers, create variables to use names in your equations:
The full team
We discovered the two remaining drawing functions:
text(). We played with them, but rectangles & circles are funnier.
Throw a dice
We discovered the wonders of
random()numbers, and how to tame their power.
We learned to decompose complex problems into simpler subproblems. When creating functions, we ask ourselves what would it take for these functions to be useful outside of the current example. The concept of linear interpolation revealed itself to us:
We were tired of making mistakes about loop increments & scopes, so we eased our life with a new syntax:
forloops. It conveniently fuse all loop-related logic in one line.
Mouse & cat
We discovered how to get
inputsfrom the mouse. We played with a new, exciting kind of program: interactive pictures. It got us to think about
We entered the forest of mathematical spirits:
We didn't get to know some essential blocks, and yet we succeded at crafting magnificent procedural pictures and having fun doing it. What's remaining:
- Boolean algebra:
- Compound structures:
Interfaces, etc. All the necessities of creating programs with another order of magnitude.
Go play with this tool, and show us what you can do!
If by chance you're interested in maths, programming & pictures, I'd like to recommend some readings: