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

Feb.16

Ember and Django Get Friendly

Posted by Tim in Code

Like a turducken or cherpumple, we’re going to stick Ember right into the guts of Django. Let’s get this out of the way: this is not ideal. Doing something like having Django power just the API through the Django REST Framework and then having Ember do all user-facing things would be smarter. Having the separation is easier for maintenance and clearly defines responsibilities. Unfortunately, real life is rarely ideal. Your website may have some static pages that necessarily need to be served away from the monolithic stature of Ember, but…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