All entries in topic: canvas

Franz Enzenhofer has cobbled together a whole bunch of tech to create the “unofficial Google Image Search by Drawing” service. He’s also made the source available on Github, what a nice chap.

Drag and drop a photo onto this demo and it’s broken up into little particles that swarm around 3 points like they’re black holes.

At kathack.com is one of the coolest bookmarklet hacks I’ve seen. Here’s how it works according to the authors:

• Splits all the text on the page into words/spans. (StickyNodes::addWords)
• Builds a grid data structure so that intersections with elements can be found quickly (StickyNodes::finalize). Essentially grid[floor(x / 100)][floor(y / 100)] is a list of elements in a 100×100 pixel block. This should probably be an R-tree, but the hot-spot in this program is definitely in the rendering.
• The ball and stripes are drawn in a canvas that gets moved around the page (i.e. position: absolute; left: x; top: y;). See PlayerBall::drawBall.
• When an element is attached to the katamari, a clone is made. The original element is hidden. The new element is moved around by setting -webkit-transform. The transform rotates the element about the rolling axis of the katamari and scales the element to make it look like it’s coming out of the page.

When starting this website I never thought I’d write a title as awesome as that about anything as awesome but useless as a PDP-1 emulator written in JavaScript. I could happily retire this website right now and never write about another experiment. Go check it out. It really is the original 1962 Spacewar! game code running on a PDP-1 emulator in JavaScript.

Ever get the feeling that you’re being watched? Here’s a canvas and JavaScript experiment that my kids loved. Kooky and fun!

Microsoft really seem to be getting into the HTML5 vibe. Not surprising really considering how crap IE8 is compared to every other modern browser out there; they really have to catch up or be left behind. This site is an IE9 promotion site, but since it’s really a canvas element demo site it can be viewed in all supporting browsers, complete with framerate readout. It’s slick, fun and worth checking out. Personally, I’m very excited about IE9 and the browser landscape in general. Exciting times.

If it’s not cubes then it’s ripple effects! Almer’s is pretty good though and he’s made it into a library you can use on your own site. An interesting factoid from his blog post: Firefox 4 runs it best, even better than Chrome.

WebGL, canvas and JavaScript are the ingredients that have produced this hypnotically beautiful demo. Don’t bother with anything but Chrome. The future of the Web is bright!

Using the three.js library, Rob has created a spinning globe. Of course you’ll need a browser that can display WebGL; Chrome does fine. There are some real nice touches like the star field backdrop, eclipse-like glow, and FPS display. Very cool. There’s a video if your browser of choice lets you down. It might be slow to load the textures, but give it time it’s worth it.

It’s these kind of experiments I built this site for. Eirik has encoded all the HTML for his web page into an image file. He uses RGB value to store ASCII values, and then decodes them using JavaScript and the HTML5 canvas element. Think about how useful this technique could be.