Instagram has been nudging me to take a programming course for a couple of months. Not that I frequently act on Instagram ads…. though there is this silly keyboard that I use, worthless earplugs, fake liquor, fake cocktails, a gaudy puzzle that we’ve yet to start…. OK… I’m a sucker, but I like excuses to make pretty pictures. I signed up for Making Visuals with JavaScript when Domestika offered it on sale for $10.

Domestika offers arty courses, presumably for less-technically inclined people. The course looks to be aimed at less-experienced programmers, but I am interested in low-barrier projects to experiment with visually.

Here are some notes from my first afternoon listening to the first course unit and messing around on my iPad.

Writing Code on an iPad

The rap on iPads that they are difficult to create new product certainly seems well-deserved, at least for writing code. To start, Chrome for iPad seems brain-dead in comparison to the desktop, and even Android version; the relevant complaint here is that there is no “Developer Tools” pane to inspect the console, inspect or edit document elements, or to experiment with code…. I’ll save the rest of my Chrome-for-iPad rant for later.

The text-editor iPad app genre seems to be barren. Maybe there’s less motivation to use a text editor when it’s difficult to aim a browser at a local file or directory even. The experimentation cost, like most iPad apps, is substantial, with the dearth of free apps at the App Store.

I did end up finding a workable solution in JavaScript Anywhere, which bundles a stripped-down text editor, a browser suitable for previewing your work, and a web server– mostly for use to copy your work to another machine. The side-bar ads are annoying and the syntax highlighting and auto indent don’t work, but it’s an OK solution if you’re just looking to experiment. One nice feature is the starter templates, which, for example, create file stubs to quickly bundle your mark-up, code, and style files.

For further coursework, I will move on to the desktop.

JavaScript Canvas

The course begins by using the JavaScript Canvas as motivation to use variables, arrays, and loops. The presentation is a little breezy with respect to explaining how to access the browser document and the difference between declaring a function and assigning a closure to a variable, but it’s enough to get a motivated student hacking.

Below are some quick demonstrations for drawing an arc and filling a rectangle. The basic pattern seems to be:

• Get the graphic context from the document canvas. (Only use one canvas in a div, unless you know what you’re doing.)
• Set your fill style, line width, etc.
• Issue context beginPath().
• Draw your shape using the context object methods.
• Issue context stroke().

More-programmatic Drawing

The course concludes with practices to parameterize your image to allow for experimentation and dynamic fitting. One tool, not demonstrated here, is canvas-sketch, which sets up a web server to watch your files and update active browsers, as well as handling dimensions.

Below I’ve messed around with the lecture demo by adding jitter to the square placement and looping painting to better demonstrate the probabilistic layout.

Earlier this week I spent a morning listening to Ron Evan’s introduction to computer vision with Go course through Safari. Following my belief that every course should should have at least one project, I hacked up an application to deface images and webcam streams with hats: Lotsohats.

The course walked through several GoCV example applications to apply filters to images and use deep-learning packages with pre-trained models for image classification. To me, it seemed like an obvious easy assignment was mimic a certain alcohol-advertising crowd-cam app used at the local hockey arena and drop hats on people in images.

It was my first experience with Go, but the proof of concept took a morning to hack something together, learning Go unit testing and exploring the GoCV and Standard Go Library APIs along the way, and this morning was spent polishing, tweaking, and documenting. The Donovan and Kernighan Go book is also a good resource.