
Bring a stick man to life. - kgthegreat
http://drawastickman.com
======
danilocampos
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.

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

------
neovive
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.

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

------
gojomo
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.

~~~
gokhan
Another puzzle game you control with drawings:

<http://www.crayonphysics.com/>

------
scottkrager
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.

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

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

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

~~~
scarmig
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!

------
krmmalik
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?

~~~
5hoom
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 ;)

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

------
Zaronian
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!

------
ExceptionRaiser
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.

~~~
qeorge
(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.

------
ender7
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).

------
5hoom
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!

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

~~~
5hoom
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 :)

~~~
user24
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.

------
madiator
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..

~~~
elliottcarlson
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>

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

~~~
dfischer
Many it seems. And the penis slaying dragon.

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

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

------
abhishekdelta
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!

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

------
xedarius
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
...

~~~
mihaifm
I use Notepad++ and do debugging with Chrome

------
Vivtek
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.

------
pat2man
I wish there was more of this on the Internet.

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

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

------
derwildemomo
Made me smile, thanks for sharing.

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

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

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

------
golgo13
Sword of Omens and Lakitu saved my life!

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

------
vladsanchez
Fcking brilliant! Never seen it.

------
wavephorm
That was wonderfully fun and indeed creative.

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

------
lulzzz54
Lol: <http://i.imgur.com/4t98S.png>

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

~~~
jwpeddle
Heh heh <http://i.imgur.com/p2VJ2.png>

~~~
losvedir
Bravo. Much funnier than a penis joke, IMHO.

