Learn drawing and programming at the same time at MozFest 2017

By Caroline Alexiou

This year I am going to be speaking at the Mozilla Festival about how to learn and improve in two different disciplines, traditional art and programming. What I have come to realize -and it is by no means a novel realization- is that the thought processes and strategies to improve in any discipline are rather similar on the high level and also, that, technology can play a big role into giving learners access to the tools and people needed to improve their knowledge, which plays into Web Literacy, one of this year’s core themes for the festival.


I have a formal CS education background and have been working in the industry for the last five years. I have also been drawing ever since I was small using pretty much anything I could get my hands on, with some large breaks where I wasn’t feeling very inspired.

Ever since I started working it had been gnawing on me that I wasn’t getting better at drawing, even though I doodled a lot — merely putting in effort into drawing the same way I had always been, did not magically transform my drawings into drawings that looked right.

At some point I sat down and thought — when I was learning programming, did I just try to arrange lines of code in the terminal and struggle until the program worked?

…Actually, yes. Sometimes I did. But trial and error was only one of many methods I had applied to learn programming. I am actually really grateful to the education system for showing me different ways to learn.

For starters, during university years, we built our knowledge of programming from the ground up. Not trying to create a full-on web application without spending the first couple of years learning the fundamentals of data structures, control structures and basic I/O handling.

When watching educational videos from online art academies (or free on youtube), which is how I decided to get an art education that fits with working full-time, it also dawned on me that I didn’t quite know how to draw a circle, an ellipse, or even divide a line in half properly, and these fundamental things matter the same way that knowledge of how a program works on the low level does.

Building the figure out of more fundamental shapes

What has also frustrated me about drawing is that, because I didn’t and still don’t have a very trained eye, my line art sometimes has mistakes and this affects what comes later, like coloring and shading. But the thing is, one does not have to master one area to be able to make progress in the other. It is just demotivating to even try and shade a crappy drawing.

This is where an idea used in university courses came in: Students can be provided with sample code that is already working, complete with definitions for functions that they need to fill in to add additional functionality. That way they can focus on writing code for just one part, and still have the satisfaction of a working system at the end. This is what is sometimes called the scaffolding method.

As an example, in my last year during my Bachelor’s, I had to write the client code for a peer to peer file sharing system as an exercise. The instructors had already provided the server the clients were supposed to interface with.

Now, how to use this idea in drawing? Some ways are, use a projector to get the line art right on paper. One does not learn to do the line art that way, but they get a template they can color. Tracing is not ‘cheating’ if it helps you learn. Also the dividing the drawing into squares/rectangles method can help get the lines in the correct place, and also help you understand when you are not really judging sizes and angles correctly.

using the grid as a guide

For a period I was using this method so much that I created my own mini graphics program just to create grids out of images exactly the way I wanted them (see picture above) and then copy the grid on paper. It is on github and is built entirely on top of abusing the matplotlib event system.

Another method used by my instructors in university was deliberately giving us trap exercises where we would likely make the most common mistakes and then learn from them. When working I got exposed to pair programming, code reviews and expert feedback and also, on my own, came to realize how to self-review my code and copy good ideas effectively.

All these methods have an equivalent when learning to draw, and can be aided by the use of technology and the Internet. Also one doesn’t wait until they are old enough to go university to start applying these things.

We will go through them with real life examples in my workshop at MozFest in a few weeks. Hope to see you there! In the meantime, if you have ideas or comments, especially if you are a fellow dabbler in several disciplines, you can get in touch with me here.

(The workshop will take place on the weekend of October 27–29, at Ravensbourne College in London)

also hope to see some of those in London