Stunning graphic effects with javascript

Question

Seeing the full javascript rotating 3d cube, I was wondering,

What are the most stunning javascript-only effects you've ever seen?

Answer 1

Here's a bunch of "processing" graphics: http://ejohn.org/blog/processingjs/ demos are located near the bottom.

I think my favorite would be http://ejohn.org/apps/processing.js/examples/custom/substrate.html

Although this snake guy is pretty cool and interactive: http://ejohn.org/apps/processing.js/examples/custom/snake.html

Answer 2

the javascript parallax is pretty interesting, here is a demo

Edit: I just found a Firefox add-on that uses this effect for the new tab page.

Auto Dial 3D

Edit2: And someone doing it without javascript at all (just css)

CSS 3D menias

Answer 3

I thought this was pretty impressive:

http://safalra.com/web-design/javascript/mac-style-dock/demonstration.html

With an admittedly "cursory" investigation, these demos confirm that Chrome beats Firefox and IE for Javascript-heavy apps.

Answer 4

Remember lemmings? :-)

http://www.elizium.nu/scripts/lemmings/

Answer 5

This site has a pretty nice implementation of solitaire, including card animation, all in JavaScript.

Answer 6

This site has an entire OS (an old one, btw :) in javascript: chiptune.com.

Answer 7

Antisocial is definitely the best js graphics demo I've seen. Don't miss the 'play with the demo tool' link (after watching the demo, of course).

Enjoy.

Answer 8

I like Algorithm Ink a lot. It's a javascript port & extension of Context Free by Aza Raskin.

Click on the canvas, they're interactive.

And click on Edit, and change the pattern generation algorithm live.

Answer 9

Not really graphical, but still stunning (even if I do say so myself)...

A long time ago, I wrote an HTML editor in HTML/Javascript.

You can download it here: http://www.boltbait.com/htmleditor/

One of these days, I'll update it for CSS. :)

Answer 10

I've always loved everything that script.aculo.us allows you to do. Update: raphaeljs also looks like a great framework!

Answer 11

This is a "mouse follow" javascript animation from 2002 or earlier, the smoothness and accuracy makes for a pleasing effect. I could only find a version that ran in IE, but it is worth firing up IE or IETab and taking a look:

Link: Mouse Trail Clock

Answer 12

Mario Kart

Answer 13

Almost full port of Wolfenstein 3D to Javascript!

Answer 14

This is a small glimpse into what I'm trying to do.

Very Versatile Electronic Document - VVED

A few more bugs to remove before I release ver1.0rc.

Small demo in FULL DEBUG mode showing the playframes method being used to scatter the frames of a image. Normally, you can use playFrames to play a series of iamges as a movie but I found this very slow, using a tiled sheet imcrases performance drmatically, even compared with background image solutions that appear to be inconsistent over browsers.

FPS shows the system stats. Tween shows the tweener internal states. Debug - well.. (seperated 1 for static calls, the other to poll single variables)

Demo features key sequences: D,B,G - debug toggle T,W,N - tween toggle F,P,S - fps toggle A,L,L - toggle all

http://www.novatvmedia.com/vved

tested on IE5.5+, Firefox 2+, Safari, Chrome, Opera 9+

Answer 15

This isn't necesarily amazing, but it's fun: paste into browser bar.

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)x4+x5)+"px"; DIS.top=(Math.cos(Ry1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

Answer 16

Hypno trip down the fractal rug - for the 20 lines JavaScript contest - Zoom by Mathieu 'p01' Henri

(Doesn't work well on IE or Chrome.) Update: It now works great on Chrome.

Answer 17

The coolest JavaScript effects I've seen are the Google Chrome experiments. http://www.chromeexperiments.com/

Obviously they will work best with Google Chrome browser, but some work in other browsers.

Answer 18

high poly 3d duck with shading in 4K

Answer 19

The JS909 drum sequencer. Written without using a JS library, and even the sounds are done by Javascript

http://www.themaninblue.com/experiment/JS-909/

Answer 20

I've found these two sites quite facinating:

Using Canvas: http://9elements.com/io/projects/html5/canvas/

and

plain old javascript: http://www.uize.com/index.html, if nothing else, I find the 33 different image transitions available worth looking at this one.

Answer 21

Shameless plug: Canvas Image Distortion.

Answer 22

http://wiioperasdk.com - 3D Graphics library for the Nintendo Wii's browser.

Answer 23

I was most impressed by this 512 byte Menger sponge: JSpongy

There are also a lot of interesting effects in the js1k competition results. The other day I was beaten by 1023 bytes of chess.