Demos

TraceMonkey

• Mix demos with worker threads to show responsive UI.
• Update Schrep's demo.
• Do a side-by-side video demo of how it makes things faster.

Private Browsing

• Need a video demo of Private Browsing and how it works.

Video and Audio

Ideas only at this point. Would love to have a couple of demos that show off what happens when you start mixing video with canvas, svg, etc.

Lyrics Projection Demo

• Lyrics and chords rendered over a full screen video or image backdrop
• Local storage to save lyrics and chords to your computer
• Rot 90 for displaying lyrics in a rotated wide screen monitor
• Horizontal flip for back projection
• Ability to distribute audio with song lyrics and chords

Song Server

Space Shuttle Demo

Take a video of the space shuttle taking off. Through each stage of the liftoff, give the countdown with highlights of various parts of the shuttle on top of it. For example, as the boom is pulled away from the top of the main tank, overlay a link that lets you click on it and load information about it. As the countdown gets closer to zero, use highlights to show what happens during the final minute of the countdown. Off the chance for people to click on parts of the shuttle over the video which will pause the video and load information from other locations.

Cool canvas demo - as the shuttle is taking off, show graphs that include rated power, elevation and lateral distance from the launchpad in real time.

Elements include Canvas, Video, SVG, and HTML.

http://www.0xdeadbeef.com/~blizzard/launch/

TV Show Demo

Take clips from a popular TV show and tell stories about the various characters. Include clips of telling moments that are loaded when someone clicks on a particular character.

Demos

Audio and Video

• http://pad.ma/ - great video preview site - icons as scrubbers that let you jump to the right place in the video
  • Firefox extensions - https://wiki.pad.ma/wiki/FirefoxExtension - lets you edit local video on the site
  • Source code - https://wiki.pad.ma/browser/padma.dev
• http://hyper-metrix.com/misc/jai/ - javascript audio interface - written with canvas, svg and <audio>
• http://apm.ircam.fr/media/tmp/audio-tag/ - real time audio effects with a string quartet

Worker Threads

• http://nerget.com/rayjs-mt/rayjs.html
• http://people.mozilla.com/~bturner/spaceinvaders/backgroundSpaceInvaders.html (requires Beta 2 or later)
• http://people.mozilla.com/~bturner/weaveworker/weaveDecryptor.html (requires Beta 3 or a nightly >= 20090104).
• http://joose-js.blogspot.com/2009/03/offloading-arbitrary-js-objects-to.html

Offline Support

• Need demos from Mark Finkle, Paul and more info from Dave Camp.
• Wordpress: http://trac.wordpress.org/ticket/7262 - has a diff, probably is working code.

Cross-site Scripting

• Would love to be able to show a mashup of data from twitter, flickr or something else.
  • Suggestion: Can we get data from flickr that gives you photo information? Would be fun to mix with one of the canvas/svg demos.
  • Live twitter stream with updates?

3D

• http://gyu.que.jp/jscloth/touch-opera-gecko.html - demo that works in various 3D engines

Canvas, SVG + CSS

• http://azarask.in/projects/algorithm-ink/
• http://benjamin.smedbergs.us/wordmap/wordmap.html
• http://www.pixastic.com/lib/
• http://www.wiicade.com/gameDetail.aspx?gameID=1317 - great game!
• http://www.xs4all.nl/~peterned/3d/
• http://typeface.neocracy.org/
• http://acko.net/blog/projective-texturing-with-canvas
• http://scoundrelspoint.com/polyhedra/shuttle/index.html
• http://scoundrelspoint.com/polyhedra/
• http://www.p01.org/releases/DHTML_contests/files/20lines_twinkle/
• http://www.p01.org/releases/DHTML_contests/files/20lines_hypno_trip_down_the_fractal_rug/
• http://raphaeljs.com/
• http://hyper-metrix.com/burst/BurstEngine_0.2.18/BurstEngine_0_2_18.htm
• http://skuld.bmsc.washington.edu/~merritt/gnuplot/canvas_demos/
• http://gyu.que.jp/jscloth/
• http://bespin.mozilla.com/
• http://box2d-js.sourceforge.net
• http://blog.thejit.org/javascript-information-visualization-toolkit-jit/
• http://glimr.rubyforge.org/cake/canvas.html
• http://kawanet.blogspot.com/2009/03/history-of-javascripts-3d-tech.html
• http://www.tapper-ware.net/devel/js/JS.VideoViz/index.xhtml
• http://blog.nihilogic.dk/2009/03/javascript-canvas-sm2-milkdrop.html
• http://vis.stanford.edu/protovis/
• http://stairwellblog.com/2009/03/is-canvas-the-end-of-flash/
• http://www2.nihilogic.dk/labs/canvas_music_visualization/
  • http://blog.nihilogic.dk/2009/03/music-visualization-with-canvas-and.html
• http://www.p01.org/releases/20_lines_dynamic_hypnoglow/
• http://www.hyper-metrix.com/burst/development/doc/tut/SVGGroups/ burst and svg animation
• http://www.dhteumeuleu.com/ - pretty awesome DHTML rag doll
• http://labs.pimsworld.org/wp-content/uploads/2009/04/demo-content-aware-image-resizing-2/ - content aware image resizing in JS
• http://disruptive-innovations.com/zoo/demos/eyes.html - remove red eye in the browser
• http://www.tapper-ware.net/devel/js/web.video.styleByVideo/index.xhtml - updating the color of balloons based on the video in question
• http://www.tapper-ware.net/2009/05/perspective-texture-with-6-lines-of-svg.html - perspective with svg
• http://nerget.com/fluidSim/ - fluid dynamics with JS - intense!
• http://www.zachstronaut.com/lab/isocube.html - cute with shadows and video on one side
• http://www.zachstronaut.com/projects/rotate3di/ - cards that flip when you mouse over them with css properties!
• http://tapper-ware.net/stable/web.filter.apng.dynamicTexture/index.xhtml - dynamic texturing in 2D
• http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html - spotlight with text-shadow!
• http://www.tapper-ware.net/stable/web.filter.voxels/index.xhtml - exploring a voxel island with SVG filters
• http://www.blahbleh.com/?thread=47 - clocks!

External Demos

• Run a contest that asks people to put together cool demos. Could give away t-shirts, bragging rights, etc.

Fonts

• Huge pile of open fonts: http://openfontlibrary.fontly.org/patrons
• CC licensed Neighborhood fonts: http://www.andychung.ca/work/neighbourhood/
• Great use of fonts + text-shadow: http://opentype.info/demo/webfontdemo.html
• Another great site with open fonts: http://www.fontsquirrel.com/

Other Resources

Open web demos on devmo.