share
Stack OverflowStunning graphic effects with javascript
[+54] [22] friol
[2008-10-31 18:58:04]
[ javascript 3d effects ]
[ http://stackoverflow.com/questions/254535/stunning-graphic-effects-with-javascript ] [DELETED]

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

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

(5) community wiki ? - Valentin Rocher
[+33] [2008-10-31 19:08:14] Pat [ACCEPTED]

the javascript parallax is pretty interesting, here is a demo [1]

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

Auto Dial 3D [2]

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

CSS 3D menias [3]

Edit3: Someone using the effect in a great way to tell a story

Hobo Lobo of Hamelin [4]

[1] http://webdev.stephband.info/parallax.html
[2] https://addons.mozilla.org/en-US/firefox/addon/9882
[3] http://www.romancortes.com/ficheros/meninas.html
[4] http://hobolobo.net/tale/

1
[+27] [2008-10-31 19:17:19] asterite
(1) I'm waiting for Doom. After all, they've ported it to basically every other platform, right? - ojrac
(3) I just spent the last half hour on this site. Awesome! - Rontologist
(1) Yeah, I love lemmings! - BoboTheCodeMonkey
(2) @Rontologist You got off easy, I just killed 3 and a half hours. I had to stop when I got to a level that required pixel perfect play, and when I finally got it I blew up a lemming by mistake leaving me with 97 out of the 98 required. -_- - Ari Ronen
2
[+14] [2008-10-31 19:03:44] BoboTheCodeMonkey

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


3
[+14] [2008-10-31 20:18:54] Jimmy

Mario Kart [1]

[1] http://www.nihilogic.dk/labs/mariokart/

amazing ! - Iraimbilanja
4
[+11] [2008-10-31 19:18:51] Ferruccio

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

[1] http://www.worldofsolitaire.com/

Check out the options for card resizing, etc - definitely well done, and generic enough to re-use for other card games as well. - J c
Easily the best solitaire implementation I've ever seen on the Web... - Hexagon Theory
Amazing Implementation !!! - NightCoder
5
[+11] [2008-10-31 19:22:40] friol

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

[1] http://www.chiptune.com/

There is actually another project out there to develop a JS based OS, called the Lively Kernel. - new123456
6
[+7] [2008-10-31 19:26:54] Gabe Hollombe

Antisocial [1] 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.

[1] http://antisocial.demozoo.org/

It's no longer working. - Foreever
Still working for me, @Foreever. - Gabe Hollombe
Sorry, it wasn't working yesterday. - Foreever
7
[+7] [2009-06-02 20:43:53] Nosredna

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

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

[1] http://www.p01.org/releases/20%5Flines%5Fhypno%5Ftrip%5Fdown%5Fthe%5Ffractal%5Frug/?

It works fine in Chromium 3 for me and is at least 5x faster than in Firefox 3.6. - Eli Grey
Yes it works now for me, too. A Chrome update must have fixed it. - Nosredna
8
[+7] [2009-06-02 20:47:23] dtc

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.


9
[+5] [2008-10-31 19:13:39] harpo

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.


Pretty similar to "Google X": googlex.jayssite.com, but good nonetheless. - friol
Ah, I'd never seen that. But the "dock" demo is much smoother, which is why I find it so impressive. - harpo
(2) This one is way smoother: ndesign-studio.com/demo/css-dock-menu/css-dock.html - Pedery
10
[+5] [2008-10-31 19:28:23] Sébastien RoccaSerra

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

Click on the canvas, they're interactive.

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

[1] http://azarask.in/projects/algorithm-ink
[2] http://www.contextfreeart.org/

11
[+5] [2008-10-31 19:54:00] Dalin Seivewright

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

[1] http://script.aculo.us/
[2] http://raphaeljs.com/

12
[+4] [2008-10-31 20:12:31] J c

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 [1]

[1] http://javascript.internet.com/time-date/mousetrailclock.html

13
[+4] [2008-10-31 23:13:55] Thevs

Almost full port of Wolfenstein 3D [1] to Javascript!

[1] http://www.nihilogic.dk/labs/wolf/

damn, beat me to it! - mmcdole
14
[+1] [2009-08-15 22:28:36] nickf

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/


15
[+1] [2009-10-23 05:06:20] Mottie

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.


16
[+1] [2010-03-26 12:33:50] Gregory Pakosz

Shameless plug: Canvas Image Distortion [1].

[1] http://stackoverflow.com/questions/2059130/waving-text-on-canvas/2059219#2059219

17
[0] [2008-10-31 19:44:25] BoltBait

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. :)


18
[0] [2009-01-25 00:32:52] Wilq32

I made myself a few interesting graphical effect in pure javascript (eventually with use of framework, for simplicity).

You can see it here, on mine blog: http://wilq32.blogspot.com/

For ex.:


19
[0] [2009-06-02 20:36:16] user105033

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);


works for images in webpage in firefox not in chrome,but it's funny - mrYogi
20
[0] [2009-08-15 22:11:12] Ari Ronen

high poly 3d duck with shading in 4K [1]

[1] http://wurstcaptures.untergrund.net/duck.html

21
[0] [2010-10-31 19:31:30] joeytwiddle

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

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

[1] http://www.p01.org/releases/512b_jspongy/
[2] http://js1k.com/demos

22