HTML5 Example

It's an endless drawing app.

HTML5 Canvas, CSS3 JQuery UI, Node.js, Websockets (socket.io)

Use your mouse to interact with the particles on the screen!

BE BOLD. Try some crazy stuff. There is much more there than what you might see at first glance.

Hit Spacebar to take a screenshot (then right-click to save)

There's much more to come, this app being a (non-sensical) physics "simulation" there are tons of fun variables to play with, and a lot of functionality "//commented out". I will soon add a simple gui so that the user can play with the gui themselves!

Pure Javascript :D

Explore simultaneously in space and time with GigaPan Time Machine.

Each Time Machine captures a process in extreme detail over space and time, with billions of pixels of explorable resolution. Choose a time machine and manually zoom into the image while simultaneously traveling backwards or forwards through time. Select a Time Warp and the time machine’s authors will take you on a guided space-time tour with text annotations explaining what you are viewing. You can make your own time warps in each time machine, and you can even learn to create your own new time machine.

Browsers are an impressively general programming platform. The great thing about adding new functionality to a browser, like video, is that people can do unexpected things with it. The <img> tag was originally added to HTML to add static images inline with the text of a page. Google Maps took that and did something unexpected -- loading and unloading multiple images and moving them around to give the illusion of a zoomable image with unlimited size. We're doing something very similar now with the <video> tag. While the first application of the <video> tag might have been to including simple video content in a static, we can use the video tag's rich javascript API to give someone the experience of zooming and panning across a video of limitless resolution, while only streaming to the web client the fragments of the overall video needed for the current screenful. On the backend, our work varies depending on the image source -- if it's a GigaPan imager, we optically align the mosaics over both space and time to generate an aligned sequence of gigapixel-scale imagery. Other sources of gigapixel-scale video might not require this step. We then break the images up into overlapping videos at multiple scales of resolution. The web client is smart -- as you pan and zoom small amounts, it simply moves and scales the video currently displayed. As you move more, the client switches to a new video more closely aligned with your viewport. Part of the challenge making this work with browsers is that a seamless transition between videos requires instantiating a new video tag before the old is finished, and then queuing it to align perfectly in time before the swap. Instantiating videos and removing them on the fly initially initially caused browsers to crash; the Chrome team was very responsive to the bugs we reported and what you see now is the result! Other challenges include responding well to DOM requests to move and resize the video (IE9 for example blanks the video for each motion, so it flickers unacceptably) and just being able to have multiple videos at all in the same document (Firefox 4 still fails this test). Between the client's smarts switching between videos and the browser's support for the HTTP/1.1 Range request for seeking, the server only needs to serve static content. This makes the system scale very well -- no need for the server to do any special computation or compression for each client. It also keeps the experience fast and responsive.

I basically just used the sine function a lot...

You can move your mouse around and click to clear the canvas.

dat.gui