Written By Philip Williams

The Making of - Part 2: Evolution

October 18, 2011 | draw a stickman / app development

As mentioned in my previous post, this is part of a recurring series about the methods and idealogy behind creating the animated stickman project. I had a concept of a stickman coming to life and I had created a prototype which received positive feedback when sharing it with others. Now it was time to take it to the next level.

Ideas Must Evolve

The initial concept seemed good, but where should I go from there? What could I do with an animated stickman? Would he talk? Would he dance? Would there be multiple stick people? How could this become a website? What would users take away from it? Most importantly, how was this going to benefit Hitcents?

For months I wrestled with these questions. I had a brainstorming meeting with the graphic designers here at Hitcents. They were very helpful and creative, but I still didn't have an answer. Should the stickman tell some jokes? Should he give a lecture on web design? There were so many routes, but none of them sounded quite right.

Finally I had an idea. The website would allow users to draw various items such as stickmen, animals, and plants. Each drawing would come to life and explain some aspect of Hitcent's capabilities.

I hurriedly drew up my concept in Photoshop then sent it to various people at Hitcents. The response was very disappointing. “It reminds me too much of an infomercial,” one of the designers said. Back to the drawing boards.

Technology Must Evolve

I still didn't know where this was all going, but I continued to refine the code. Around this time Apple released the iPad. It was the perfect device for drawing a stickman! But of course my stickman wouldn't work on it because my stickman was written in Flash.

It was clear to me that the web was beginning to turn its back on Adobe Flash. I had to find a new way to bring my concept to life. I researched various techniques. The whole world seemed to be excited about HTML5, but HTML5 was still very new and wasn't supported on older browsers. I wanted to create something that would work for everyone on nearly any device.

I finally settled on a Javascript library called Raphael. It allows developers to draw to the screen using SVG. It automatically switches to VML on older versions of Internet Explorer. I did some experiments. I could create reasonably fast animation with Raphael and the animation would run on everything from the iPad, to Chrome, to Internet Explorer, to Firefox. This looked like a good medium to bring my concept to life.

It is very important for a developer to be flexible. Technology is constantly changing and there is no ideal solution that is going to work perfectly for every situation. At Hitcents we have developers working in everything from C# to Perl. It's critical that developers constantly explore new languages and technologies. Every project is unique. Our goal must be to find a technology solution that delivers the perfect experience to the maximum number of users. The beauty of the stickman project is that we were able to utilize some rather old technology in a unique way that came across as cutting edge.

In my next article I will discuss how we came to our final creative ideas.


Share this Article

Related Articles