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 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.
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.
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.
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 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.
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.
74 comments
[ 3.9 ms ] story [ 144 ms ] threadEveryone can be Green Lantern!
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.
(Dicks holding dicks. Always funny.)
You know the rule: those who live by the sword will be shot by those who don't.
@latch - i think you're right about the kids angle. Having a truly interactive story like this would be awesome for kids!
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.
http://www.crayonphysics.com/
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!
This really makes me want to dive into some of this new web hotness :)
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.
Just as I'm about to tap the back button... Boom.
What a delightful surprise. Perhaps the tide really is turning.
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?
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 ;)
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.