the other dell

The Nature Of Code

Jan 15, 2016

A friend introduced me to Daniel Shiffman’s Nature Of Code book and course. My copy arrived this week. The introduction suggests the book can be used as the syllabus for a 14-week course, so I’ll aim for that. It’ll force me to do the work. My aim is to follow the book as-is and also re-implement the examples in JavaScript rendering to either HTML5 & CSS or Canvas. I’m aware there is a JavaScript implementation of Processing which would make this easier, but I want the practice at using Canvas directly and also in seeing which features and patterns I used often enough to start thinking about a helper library.

The courses uses the Processing language and environment. I’m going to follow along with that as I don’t know Processing or Java too well and will benefit from the exposure. I’ll also reimplement tutorial examples and exerices in JavaScript because this will teach me things I can apply directly to my freelance/contracting work in the future. I don’t have a formal method for this yet and will aim to develop one as I go. The first step will be a simple HTML document with CSS and JavaScript embedded. I’m going to aim to keep my usual coding style, and may migrate to ES2015 later on.

HTML5 includes the <canvas> element which provides a number of drawing contexts with associated APIs. The contexts allow immediate-mode drawing in 2d and 3d/WebGL. I’ve used the 2d context before at the CreativeJS course I attended in 2014. I also looked into it when I worked with 4th Screen Advertising (now part of Opera Mediaworks).

Notes

If I’m going to do the course as suggested, I feel I need a bit of preparation. The last time I even looked at Processing was 2008 and I didn’t spend much time in it even then. There are examples to download and my own project folders to set up.

  • Downloaded Processing (v3.something)
  • Run it and discover that I remember very little about Processing.
  • Go through “hello” and “shapes” in Getting Started.
  • This is a web-based tutorial, even the examples are done in the browser. That’s nice, but I want to find out the basics of running code in the Processing environment, because I expect I’ll be doing that for the remainder of the book.
  • start writing these notes, in my main blog rather than making a special documentation project
  • create a calendar
  • Go through “color” from the tutorial. Interesting to read that stroke and fill are functions run to modify what is drawn next, as when doing plain Canvas code. I don’t know if that’s Processing’s paradigm (although I assume it is) or the tutorial’s.
  • Go through “interact”: setup and draw loop. Skipping over types. Ah-ha! size(), and setup() and draw() give my Processing sketch the parts it didn’t have in line with the browser editor.

I’ve often wondered why we clear the screen and re-draw it each frame. It seems like so much work. I know it’s not, both from theory (I know games exist, for example), and practice (I’ve written the code that does it). The tutorial reminded me about clearing previous drawings so as to avoid trails… but that’s usually felt like a different issue to me1. The flash of inspiration I had (or realisation, or appreciation) is that paper and film-based animations, and even zoetropes, also and always “clear the screen”. Film works in frames - each frame is a complete scene rendered in the medium - one can take a frame out from a film and call it a photograph; and then do the same with the next, and the next.

This reminds me of Coldcut or perhaps FSOL in the amazing Equinox documentary about 90s rave culture talking about computer animation being 25 frames of art per second.

Further work

Daniel mentions these (amongst many others) projects and businesses that seem worth looking into:

  • Fathm/Fathem/Fatham Design in Boston - data vis peeps
  • The Green Isle - design studio in berlin made MIT’s logo for them
  • D-Dress by mary wang (whang?) - sketch a dress to automate pattern creation
  • Patterns srchitecture studio in SF - Georgia Olhick & Marcello Spina

Footnotes

  1. I'm sure there's a model of animation that would allow for redrawing without trails and without screen clearing