Awesome But Useless

Talk about getting caught with your pants down…

Andrew — Wed, 04 Jan 2012 04:55:59 +0000

Scored a link on Hacker News and haven’t updated the site for 6+ months!

Just hope everyone understands that the name is tongue-in-cheek.

unofficial Google Image Search by Drawing

Andrew — Wed, 04 Jan 2012 04:49:51 +0000

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.

How much time takes your browser to boot Linux ?

Andrew — Sat, 21 May 2011 22:27:27 +0000

This is an interesting question posed by French programmer Fabrice Bellard, who then attempted to answer the question by creating a JavaScript PC (x86) emulator to run Linux. It runs in FireFox 4, Chrome 10, Opera 11.11 and IE9. Oh and he also wrote his own JavaScript terminal, you know, for fun.

Paul Hayes Creates a Sphere with 3D CSS

Andrew — Fri, 22 Apr 2011 11:11:21 +0000

Paul describes the recipe for making cool 3D shapes using a dash of CSS3 and a crap load of HTML elements. The recipe includes the -webkit-transform-style: preserve-3d; statement which I hadn’t seen before. Apparently it makes sure that an element’s children share the same 3D space as their parent, instead of being flattened. Not that I have any real understanding of what that means or anything.

text-align: centaur;

Andrew — Tue, 29 Mar 2011 10:58:47 +0000

Cameron Daigle has created a masterpiece. Does what is says on the box, no mess, no fuss. Paul Irish has even written a polyfill for it (source). Go forth and conquer your text with the noble but mighty centaur, king of mythical creatures.

Photo Particles WebGL Demo by Paul Lewis

Andrew — Tue, 22 Mar 2011 11:20:36 +0000

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.

Windows 7 x64 MS Paint EXE Interpereted as Audio Data

Andrew — Tue, 22 Mar 2011 10:33:41 +0000

Had to invent a whole new category for this one. Random Davis has taken the Windows 7 x64 MS Paint EXE file and fed the binary data into Adobe Audition. The result is surprising!

The Letter Heads Turning Heads

Andrew — Tue, 22 Mar 2011 10:13:08 +0000

One of the demos on Mozilla’s Web O’(pen) Wonder is The Letter Heads by Simurai. It’s a wonderfully whimsical use of CSS3 text shadows and JavaScript. There’s also some subtle audio. It’ll bring a smile to your face guaranteed.

Turn any page into Katamari Damacy!

Andrew — Tue, 15 Mar 2011 10:41:44 +0000

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.

Gorgeous WebGL Fractals at fractal.io

Andrew — Mon, 07 Mar 2011 11:50:53 +0000

fractal.io is a web app for generating 2D and 3D fractals using WebGL. You can fly all around and through the generated structures. It has to be seen to be believed.

nDoom: Doom Ported to the TI-Nspire Calculator

Andrew — Mon, 07 Mar 2011 11:26:57 +0000

Shutup and just watch the damn video.

The Evil Side of CSS3

Andrew — Fri, 04 Mar 2011 21:43:13 +0000

Tom Robinson and others have created evil.css. It’s a dastardly collection of CSS rules to mess with a user’s mind if you can inject this CSS file into the browser session. It can flip images upside down, make the page blurry, blink headings, cause elements to fade away and so on. It’s hilarious!

The Dark Side of CSS3

Andrew — Fri, 04 Mar 2011 21:20:48 +0000

Kris Triplett has created the haunting spectre of Darth Vader’s head out of nothing but HTML and CSS3. It’s really a whole bunch of div elements with some crafty use of border radius and CSS transforms.

The Original Spacewar Binary Code Running on a PDP-1 Emulator Written in JavaScript Displayed Using the HTML 5 Canvas Element

Andrew — Thu, 03 Mar 2011 10:18:37 +0000

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.

Koalas to the Max!

Andrew — Tue, 01 Mar 2011 08:20:24 +0000

If you love pointillism and koalas, Vadim Ogievetsky has just made your day. I’ll avoid ruining the surprise, but if you break all those bubbles to their smallest size, there’s a treat in store!

Daniel Rapp’s Canvas Eyes

Andrew — Mon, 28 Feb 2011 11:33:51 +0000

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

WebGL Depth of Field Experiment by Martins Upitis

Andrew — Sun, 27 Feb 2011 08:42:11 +0000

As pretty as a Christmas tree, Martin’s demo is mesmerising. You can spend ages moving around and exploring the different angles. It will also heat up your CPU causing your laptop fan to spin up draining your battery in front of your eyes!

Neven Mrgan’s Pixelfari: Browse like it’s 1989

Andrew — Sat, 26 Feb 2011 11:09:54 +0000

This is safari in 8-bit glory. I’m at a loss for words here, the awesome is off the scale. Why don’t we let Mr Mrgan explain:

Ladies and gents, fellow humans — presenting Pixelfari, a pixely, 8-bitty version of everyone’s favorite browser. Enjoy chunky fonts, blocky graphics, and a general sense of giddy inefficiency. Spearheaded by yours truly and developed by a very clever friend. Free+fun!

Divya Manian’s Bokeh Effects with CSS3 Gradients

Andrew — Sat, 26 Feb 2011 10:31:14 +0000

If it’s not cube-related, it’s water ripple effects. If it’s not ripples, it’s bokeh effects! CSS3 can do it all. In this article Divya explains how to use CSS3 radial gradients to achieve a pretty bokeh effect on a web page background.

Microsoft Release Framerate Fest Demo Site

Andrew — Thu, 24 Feb 2011 20:17:10 +0000

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.

Almer’s Water Ripple Effect with Canvas and JavaScript

Andrew — Thu, 24 Feb 2011 11:38:52 +0000

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.

Aleksandar Rodic’s Amazing WebGL Jellyfish

Andrew — Tue, 22 Feb 2011 11:47:27 +0000

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!

Lea Verou Makes Background Patterns with CSS3 Gradients

Andrew — Tue, 22 Feb 2011 11:32:35 +0000

Here’s a neat trick. You take a background colour and then, with some CSS3 magic, add a background gradient. The trick involves something about repeating colour stops that alternate between transparent and semi-transparent. Checkout Lea’s post to see the variety of patterns you can generate.

David Walsh Explodes His Own Face

Andrew — Tue, 22 Feb 2011 10:35:30 +0000

In this nifty demo David, manipulates some CSS3 animation properties using a dash of JavaScript to created an exploding image effect. He based it on an exploding text example created by Ryan Florence who also wrote the JavaScript animation library David’s demo uses.

Rob Hawkes Creates a 3D Spinning Globe with WebGL

Andrew — Sun, 20 Feb 2011 12:05:41 +0000

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.