Teaching code

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. » - Emmanuel Corno

For us to think freely, I created an environment that requires no installation, no compilation, called Aire de Jeu. 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:

1. The tool never hangs nor crash. Stop being afraid of infinite loops!
2. Numbers can be modified quickly. Drag'em like sliders!
3. 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:

1. The bare necessities

   We learned the miminum of syntax, just to play with loops: let, while and the drawing function rectangle(), using only numbers.

   

2. Circles & Rectangles

   We added another drawing function: circle(), and new control blocks: if & else.

   

3. A loop in a loop

   We discovered scope problems. We flexed our muscles at decomposing pictures, tried to see the repeating pattern, and recreated some of the gorgeous vintage swiss graphics.

   

4. Abstraction

   We learned to think in x. Meaning: formulate a logic that works in a general case, with a parameter. New syntax: function().

   

5. Normalize everything

   We talked about percentages. 100% is not equal to 100, it's 1. Programming teaches you good & solid mathematical foundations.

   

6. Pi & Tau

   We entered radian territory... Probably shouldn't have though.

   

7. 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: width/columns rather than 800/6.

   

8. The full team

   We discovered the two remaining drawing functions: path() & text(). We played with them, but rectangles & circles are funnier.

   

9. Throw a dice

   We discovered the wonders of random() numbers, and how to tame their power.

   

10. Abstraction vol.2

    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: lerp(from,to,t).

    

11. Abstraction vol.3

    We were tired of making mistakes about loop increments & scopes, so we eased our life with a new syntax: for loops. It conveniently fuse all loop-related logic in one line.

    

12. Mouse & cat

    We discovered how to get inputs from the mouse. We played with a new, exciting kind of program: interactive pictures. It got us to think about vectors.

    

13. Mathematical creatures

    We entered the forest of mathematical spirits: sqrt(), sinus(), abs(), etc.

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: [Lists]& {objects}
• Classes, Modules, 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:

• The elements of Euclid, Oliver Byrne — Learn to see maths.
• Stop drawing dead fish, Bret Victor — What the computer is really about
• A Mathematician's Lament, Paul Lockhart — Mathematics is wonderful & easy, but school has ruined it.