Adventures in Cubism
The artwork speaks for itself..
I’m finding it hard to write a post about making a program. What is there to say? The code speaks for itself… right? I’m going to articulate something that is right there in the code plain as day? Is it a bad or good sign that I’m having these thoughts. Maybe I’m getting better at coding? I don’t know…
It becomes easier when I think about the adventure of solving the problem and not the resulting program as a whole. Perhaps it’s because of I’m terrible at programming, but I’m definately thinking about what I WANT long before considering HOW I’m going to do it. Maybe I’m rediscovering the scientific method idk, but it definately feels like a journey when I start to think about where the bodies are buried along the way. I’m sure that to a professional programmer these are just n00b mistakes, or maybe I’m going through the transformation into a ‘programming mindset.’ Either way, I’m approaching this blog post the same way - I know that I want to talk about making my mondrian git repository, I’m just not sure how to go about it. Perhaps the beginning is the best place…
Make a painting and watch it change!
I had visualized my goal long before I’d figured out how to do it. After several conversations about how to explain ‘version control’ to artists and librarians with @mminkova, overlaying that against past experience of enjoying Bob Ross, and visits to the Tate Modern, I knew that if I could show changing colors over time in a simple painting it would be a useful visualation for understanding version control. Visualizations usually work for me at least. :)
I like the geometrey of Mondrian paintings and from a beginner’s perspective they seem the easiest to replicate, so a good place to start. If I’m going to demo version control for a group I want it to be accessible, so that means it has to be online. I already know how to host web pages on github (this blog) so it’s easy enough to extend that for the project, the first step is to figure out how to draw a painting!
Search engines got me to HTML5 canvas object with a basic demo.
1. Create a basic html page.
2. Insert a <canvas> tag.
3. Insert a <script> tag with geometry that modifies the canvas you want to draw.
Simple enough! I was able to draw a basic mondrian painting with a single html page!
Now that I’ve created a picture the rest should be easy! - Create some sort of slider that represents changes over time. (i.e. a point in the commit history) - Determine how to use the github API to pull the contents of a git log entry. - Modify the visual canvas displayed when the slider moves.
The good news is that my outline encompasses all the major tasks I needed to achieve to get it to work. The bad news is it wasn’t as simple as all that!
I’m not going to go into every road bump I hit (you can go browse through the repos commit history if you really want to see the whole journey p.s. I need to get better at writing commit messages) but here are some of the major things that I wasn’t expecting when I started: 1. Script tags don’t clean themselves up in the DOM, so if you are trying to debug and don’t remove them there will be a bunch of garbage filling up your debugger. 2. Javascript is weird. It feels more inflexible than python and I felt like I was spending alot of time researching simple things. For example, why doesn’t the length of an array change when you remove an element. What the hell? Maybe I’m just in love with python. Alternatively, maybe I’m just a baby and need python kid-gloves. :) 3. Github returns the ‘next result’ when there are multiple pages as an HTTP response header and Javascript doesn’t easily parse the link headers. I think the way I’ve implemented this is probably not best practice, but it works. I have re-read the JSON-P method for doing this several times and my head is still blowing off, so I guess I don’t have a javascript mind-set yet. 4. The way you insert elements into an HTML page, the DOM (Document Object Model), is really not intuitive coming from a networking background. Figuring out how to create a dynamic table in the DOM through the script took 110% of my brain that night.
You can find the result at http://whatupmiked.com/mondrian/index.html and the repo is on my github http://github.com/whatupmiked/mondrian.
I am very happy with the result of my first javascript project, it’s exactly what I visualized.
Get to your target fast!
I think there are probably many optimizations I could still make, but I’m happy with the get it working philosophy of learning right now. Mastery and expertise can come later.
Getting over the finish line feels very good. And that’s the method of learning that’s working best for me right now. After I finish something I feel inspired to go back and tweak and perfect it, after all I’ve got something to show no matter what now!
Excitement about the project and the outcome is my goal, once I’ve got that enthusiam then I’m motivated to go back and sort out the little things… like finding out Mondrian’s style is actually called De Stijl and not Cubism. :)