The New Olio

HTML5 Canvas Particles Revisisted — With Physics!

Posted by Tim in Code

While I wrote a few years ago about HTML5 canvas particle effects, I’ve gotten a lot of questions about the effect I have on my new personal site. No, not the crazy swirling thing on the left—we’ll go over that another time—but the fun little bouncy ball thing. Go ahead and check it out. I’ll wait. Pretty cool, right? It’s written entirely without any framework or library like jQuery or D3.js or Three.js. While they’re pretty handy for compatibility, data visualization, and comprehensive 3D graphics rendering (respectively), I didn’t have…read more

AJAX Uploading with HTML5′s File API

Posted by Tim in Code

Prior to HTML5 and its File API, getting media from a user was a somewhat sordid affair. You generally either had a static page with an <input> element of a <form> posting to a processing file or utilized some third party script that relied on a Flash bridge or <iframe> shenanigans to asynchronously get the file where it needed to go. This leads to things like this demo and how you can drag ‘n drop (‘n upload) files with Gmail. Seeing as how I was tired of doing the aforementioned…read more

May.10

HTML5 Video Player For WebKit

Posted by Tim in Code

I had to play some videos in Chrome recently, but the player had to be custom for the project. Rather than tinker with some pre-made solutions out there, I instead decided to do this myself and see what I could accomplish (disclaimer: I’ve actually written something like this a few times before, but I never got around to writing about it). Looking Good The end goal was to achieve something that looks like this (in a modal overlay): The main challenge I could see would be the progress bar. Being…read more

Apr.20

Using Three.js and JigLibJS Together

Posted by Tim in Code

For whatever reason, one of my projects at my current employer led me to a need for doing some 3D work in HTML5′s canvas element. After a few hack-ish, amateur attempts at repurposing what I’d done for Mega Hovertank Wars, I decided to use something with a community behind it and found three.js from Mr.doob, a man you may have heard of through his work on Arcade Fire’s HTML5 experiment “The Wilderness Downtown.” There are plenty of other options out there (including some that use WebGL rather than a pure…read more

Mar.08

Jan.19

HTML5 Canvas Particle Animation

Posted by Tim in Code

UPDATE: yes, I know some people out there will see some flickering when viewing the demo. This is because a) I didn’t implement a double buffer, and b) there is no built-in canvas support for double buffering. There is a very simple solution, but I’ll save that for another time. Having never really been a user of Apple products, I guess it’s not all that surprising that I’ve never been to the MobileMe website. However, after Googling something like the lines of “most popular e-mail providers,” I came across its…read more