Bring a stick man to life. | Hacker News Reader

Bring a stick man to life.

drawastickman.com

862 pointskgthegreat64 comments

I tapped this link on my iPad, dunno why. I get there and see a loading screen, and assume it's some placeholder waiting for Flash that's never going to load.

Just as I'm about to tap the back button... Boom.

What a delightful surprise. Perhaps the tide really is turning.

Works on iPhone too, although it's so small I could barely even draw anything.

It's a shame that few people mention the book that seemed to inspire this genre: "Harold and the Purple Crayon" (http://en.wikipedia.org/wiki/Harold_and_the_Purple_Crayon) -- originally published in 1955. It's still a classic in my mind. Max & the Magic Marker and Crayon Physics are also excellent.

Excellent book. I read to my son about once a week.

People who like this will probably also like the game 'Max & the Magic Marker' — a side-scrolling platformer where reified stick-drawings are your main tool.

http://maxandthemagicmarker.com

I played it on the iPad, for which the game seems perfectly matched, but it's available on Mac/Windows/iPhone as well.

Yup. That is my favorite game on Windows Phone.

Another puzzle game you control with drawings:

http://www.crayonphysics.com/

This game is amazing with the Wii remote.

That was highly entertaining.

I think the best part was that I really had no clue what was coming next.

I wish some of the animations moved a bit quicker though. Other than that....bravo.

Longer legs = faster progress. I made super tiny legs first and nearly died of age while waiting for him to walk.

Yea, I drew a (somewhat imperfect) circle and it didn't move at all. It kept wobbling but didn't move an inch.

I tried it on an old laptop, and the only animation that really bogged down was the latter half of the rain part (before the next segment).

Wonder how much effort/time it takes. Seems like a huge potential for something like this geared towards children..especially on iPads.

This. Imagine a piece of educational software set up like this--something where the child draws objects but has to use reasoning about what would be most appropriate. Maybe have multiple modules of 15 minutes apiece.

Everyone can be Green Lantern!

I love stuff like this. Im hearing the raphaelJS name a lot so it's nice to see what can be done with it. I just assumed the library was for drawing charts? But I guess it's more for vectors.

Anyway - what I'm really looking forward to is realtime multiplayer / multiuser versions of all these great demos. Just think of the viral/network effect. I'm sure it's all quite possible now that we have node.js?

Raphael is for generating SVG, so you can draw anything with it. Oh, and multiplayer browser games were possible long before Node.js appeared, there's no new magic there.

OK so this was done with vector graphics <forehead slap>.

I was thinking they were doing some sort of bitmap-grid skewing & stretching, but it seemed way too precise & neat.

Thank you for stating the (what probably should have been) obvious ;)

You're welcome, but I made a similar mistake too until I noticed Raphael being mentioned in the comments ;-)

Creative and very entertaining. Definitely a good way to break up work for 10 minutes.

@latch - i think you're right about the kids angle. Having a truly interactive story like this would be awesome for kids!

Love it! For web-based animation, does anyone know how Raphael.js differs from processing.js? Why would I choose one over the other? Trying to differentiate the two.

(Very limited experience but...)

Processing has a loop that runs every frame, in which you redraw the whole scene each time. So for a Tetris game, on each frame you'd draw all the blocks in their correct position. You maintain the game state however you like, you just tell processing what to draw each frame.

In Raphael, its more like a traditional game engine. You might for instance make a new Circle (or Monster, or Hero..), and give it properties and events. The redrawing would be handled for you.

Hope that helps/makes some amount of sense. My experience here is very limited, so its possible I'm misrepresenting one or both of the libraries.

This is really awesome.

Reminds me of a game a friend and I back in college for stylus tablets that was essentially Pokemon, but where you had to draw your Pokemon before you could battle with them. This was for a class in pen stroke recognition, so we spent all our time inferring the "skeletons" and "body features" of your Pokemon, and never actually made it to the "game" part. It was cool, though! Once you had the skeleton, you could animate the monsters in fairly cool ways (to simulate attacks, dodging, etc.). You could also infer the "stats" of the monster based on how fat its limbs were, how much armor it had vs. how many spiky bits, etc.

Might be a cool project for someone, now that this kind of thing is possible on the web (and now that touch interfaces are ubiquitous).

This is really impressive.

Does anyone here know what was used to produce this? I'm guessing HTML5 canvas trickery, but I'm not a web-dev so I'm really curious if that's the case.

However it was made, this is one of the best web-demos I've seen in a long time. Thanks for sharing!

Whoa. I just assumed it was Flash.

it's certainly not flash, it's canvas/svg/JS, check out the source (View->Source or Tools->Web Developer->Page Source)

Cool. I checked the source, but wasn't sure what I was looking at. Thanks for confirming(ish) my guess!

This really makes me want to dive into some of this new web hotness :)

The actual JS source is minified which makes it almost impossible to read (but if someone has the time to pick over it and post an 'autopsy of a stickman' blog post I'm sure the karma will flow readily!).

Often, a quick right-click will be enough to expose flash; JS/canvas/html5 will give you the normal context menu, flash normally produces its own unhelpful context menu. That's a good indicator.

If you have to go back to the source, what you're looking for in determining if something is flash or not is an <embed> or <object> in the main HTML. That's not always a sure indicator - it could be being added in JS. Likewise the presence of a <canvas> element is a good indicator that it's JS.

In this case, the huge number of .js includes is the biggest hint - 18 <script src=...> elements, including telltale file names like 'stickman.js', 'animation.js', etc.

It's using Raphaël, http://raphaeljs.com/

Is this the only post on HN that is above 600 points? http://news.ycombinator.com/over?points=600. The next highest is like 558 which was posted a month ago..

There is a time limit on that query - there have been plenty that have breached that count just not in recent times.

For example one I posted a while back: http://news.ycombinator.com/item?id=2098247

"Things hackers like" obviously mean silly web gimmicks.

I wonder how many peoples keys ended up looking like penises...

Many it seems. And the penis slaying dragon.

I would really like to be able to share my stickmen.

Actually I think the fact that it's one-time use drawings increases creativity, because you don't have to bother with perfection.

Really awesome. I wonder the complexity of the algorithm used behind it to identify the objects. It works fine, except when the length of the legs are too small or the angle between them is too wide, it walks like a retarded. But that's fine. Really awesome work!

Reminds me of Winky Dink and You (http://en.wikipedia.org/wiki/Winky_Dink_and_You).

Outstanding! I've been thinking about doing some HTML5/Javascript stuff for a while. What kind of dev environment do you guys use? I was thinking of Eclipse ...

I use Notepad++ and do debugging with Chrome

Drawing a really little key breaks it.

Drawing just a circle for the stickman is very funny. Drawing a vertical line for the stickman breaks it.

I wish there was more of this on the Internet.

Very nice. Made me smile. Me and a pal, both in early twenties were arguing for the best stickman.

Awesome work, very fun and well made. This is the kind of content that really shines on the web.

Made me smile, thanks for sharing.

Amazing work that made me smile, especially when I looked at the source!

Loved it. You should let the player move the stickman as well

Doesn't work for me, the site takes eternity to load.

Sword of Omens and Lakitu saved my life!

"Be... sure.... to drink.... your Ovaltine?"

Fcking brilliant! Never seen it.

That was wonderfully fun and indeed creative.

This is great! I drew penises each time and it made it 10 times as good

Lol: http://i.imgur.com/4t98S.png

Ha, I realize it is ridiculously immature, but I did that initially instead of the stick guy and died laughing the whole time.

Anybody who says they didn't is lying.

(Dicks holding dicks. Always funny.)

I didn't do it (i'm lying btw).

On the first screen it will let you draw anything in place of a stick man.

Heh heh http://i.imgur.com/p2VJ2.png

Bravo. Much funnier than a penis joke, IMHO.

And I was just about to post... "I bet it was less than 30 seconds before the first penis was drawn.=..."

I did draw an AK-47 instead.

You know the rule: those who live by the sword will be shot by those who don't.

I just don't get why people think this is outrageously funny. I was going through a canvas tutorial on HTML5Rocks once upon a time, and there's a multi-user anonymous drawing sample program. While I was messing around with it, about 10 people showed up, drew a dick, then logged out. It's not even offensive, just stupid. It's like listening to a 5 year old who has one joke he tells over&over&over to everyone within earshot until you want to duct tape his mouth shut.

NSFW

What is this? Reddit?

Reply on news.ycombinator.com