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

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