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.
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.
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.
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.
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.
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.
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.
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).
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!
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.
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!
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 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.
Just as I'm about to tap the back button... Boom.
What a delightful surprise. Perhaps the tide really is turning.