Archive for the ‘interactive’ Category

Turns out, Google’s charts making service allows for some pretty inspired work. The following is basically a line chart with some math geekery:

chart art

      I’m always trying to be a better communicator, and visual aids can be very helpful. If you happen to be one of the one of the 99.99999% or so of the people without fancy chart making tools and even the thought of having to draw a straight line has you a little intimidated (thank you downgrading-of-art-education-in-the-public-system), perhaps Google Chart Tool is a good, free, and open way to produce clear, useful, information visuals. Or art. Of course, I’m sure there is a greater number of people who are more intimidated by funny computer code than pen and ink. But it’s not all just code. Also, perhaps the tool is an easily accessible way to give some computery stuff a try and see some instant results.

      As cool (and minimal, really) as all the art stuff is, I’m just trying to get to know the API better (link to Google Chart API Docs here). So rather than dive head first into some visual display of quantitative analysis, I had some fun comparing the Dallas Cowboys and everybody’s hero, Manny Pacquiao (disclaimer: only sports fans will really get this chart):


What attracted me most to study the kind of work I get to do is the ability to make ideas happen. It sounds pretty trite when said that way but it’s true. You can be walking down the street or looking at some picture and start going down the path of, “I wonder what it would look like if…”

      So, trying to keep that hope alive, I spent an evening putting the below together.

Get Adobe Flash player

      While making the above, I actually saw some details that I hadn’t noticed but picked up while try to recreate it. The most glaring detail (don’t know how I didn’t notice it before) is that the men in the painting are arranged in a grid pattern. When I translated it over to an animated version, I felt a random pattern looked better to me. So that’s what I did. Hey, it’s my bastardization of a classic. Also in the original artist’s spirit of irreverence and incongruity, I paired it with the only piece of music that makes sense (Canada’s gift to great novelty songs).

1 Comment »

This might be old news to some, but Sita Sings The Blues is a feature length animated movie by Nina Paley based around an ancient Indian legend. Definitely worth a watch and a it’s a free download in glorious HD.

      The movie and animation are good enough that the interest in this project could stop there. But there’s more. Despite the relatively (it’s no Avatar) enormous personal cost of producing the movie, it was actually done on an insanely low budget and was a labour of love rather than art for profit. The final kicker is that the project was made with, and is available as, open source material. With a few exceptions, all the third party materials Nina Paley used are available for free to folk just like you and me ( was a popular source for this material. It also has a nice library of the old Superman cartoons).

      Of even more interest for me is that all her source files are almost entirely Flash (.fla) files available for free download at with a CC Share Alike license. So I downloaded a few files and saw what I could do with them through ActionScript. The jump below will take you to an animation where Sita’s mouth should move when you speak into a microphone. I suggest you keep a little distance from the mic, and even then you’ll probably need to play around with the mic settings.

Download my source files here.

      I can post the pertinent parts of the code if anyone requests, otherwise, just give me a shout if you have any questions.

Note: Nina’s Flash source files are generally a little hard to work with in terms of a programming environment. It’s all timeline animations and the assets aren’t necessarily crafted to be easily targeted for programming purposes. It’s nothing but hand-made love.

No Comments »

As many of you may know, the image below is a famous demonstration of a visual trick. What appears to be a photograph of Albert Einstein becomes a photo of Marilyn Monroe if you view it from further away. This is done by playing around with detailed edges and blurred areas. The person who put this image together utilized an understanding of how most humans pick up images and interpret them. This plays on our ability and preference for focus. Apparently, our tendency to take in and process lines and areas was honed by evolution (“Is that a tiger over there? Who cares, I see stripes, I’m outa here.” We are selected to see obvious details first). It seems many of the art world’s masters knew of this trait and how to exploit it.

      I tried to demonstrate this using Flash. Although I’m using scale and compression as opposed to distance and actual focusing of our eyes, I think the effect is the same. That is, accentuating the sharp details (by being close to the image, which is analagous to having a large/high-res image ) or accentuating the blurry parts (far away, which is analagous to small or low-res). Try playing around with the Flash dealy below:

Get Adobe Flash player

      Artists such as Paul Klee made this a feature of their work, which is why a Klee painting can have very different effects depending on the viewing distance.

Paul Klee's Zaubergarten. Try moving away from the screen.

Paul Klee's Zaubergarten. Try moving away from the screen.

      Whereas Klee made visual focus a feature of his work, Mark Rothko made it his subject of interest:

Mark Rothko's Yellow and Orange. No lines at all, but there are definite shapes, ie. the rectangles.

Mark Rothko's Yellow and Orange. No lines at all, but there are definite shapes, ie. the rectangles.

      I think I finally get Rothko (somewhat). I think the weirdness of his paintings is that he gives you nothing to focus on. We know there are basically two rectangles, yellow, and orange. This is easy. But everything is soft and undefined. No lines, and the colours aren’t solid. Not exactly my favourite painting or my idea of a good time, but it’s an interesting idea and it really makes you think.

      So how crazy can this get? Da Vinci crazy. He took it to another level by building it into the Mona Lisa’s face. Some details of the face are soft, some are more well defined. He is playing around with and controlling how we focus on his painting. To me, this is more evident when you move towards and away from the painting. The key areas I think are the shadows on the outside corners of the eyes (which affect the shape of the eyes and therefore her expression), and the shadow on the corner of the left side of her smile. By playing around with our perceptions, Leonardo changes the degree of the smile. So I think, there is no real answer to what kind of smile it is, because it depends on where we are standing when we look at the painting. Try it out for yourself:

Get Adobe Flash player

No Comments »

The little triangle thingy below is an interactive version of the Love-Growth-Cash Triangle by Jack Cheng. It’s a graph to visualize the totality of career/life decisions based on personal enjoyment, personal growth, and paying the bills. Or so I think. I think his idea was to demonstrate how much of the triangle you might be missing if you weight your life decisions too heavily on one of those criteria. I thought it could also show how much of the total you’ve got covered. Not a perfect representation (and yes, it’s all relative) but I thought it could at least assist in clarifying things.
      My good friend Thomas sent the link to me (rather topical at the time and still is at the time of this posting) and I wanted to see how quickly I could knock out an interactive version. It just looked ripe for some dynamic behaviour.
      Click and drag the coloured circle below.

No Comments »

Better Tag Cloud