Skip to content

I'm experimenting with the most efficient way (in terms of CPU / battery usage) to make a small equalizer animation that will appear multiple times on a page.

I've tried CSS animations, CSS transitions, canvas drawing, and a plain GIF (and more not listed here!). I'd expect the CSS animations and transitions to be completely GPU powered, but Chrome 39.0.2171.99 on my Macbook Air 10.10 uses large amounts of CPU (shown in both the Chrome Task Manager as well as Activity Monitor). I've set layout boundaries via overflow: hidden, checked paint rects, etc.

Here are the different tests:

Keybase proof

I hereby claim:

  • I am kirbysayshi on github.
  • I am kirbysayshi ( on keybase.
  • I have a public key whose fingerprint is 950B 3198 7DB5 59AE 881F 5A0D E5A1 98CF 0A3D 8B01

To claim this, I am signing this object:

// just because requirebin needs something to require...?
var vash = require('vash');
var play = document.createElement('input');
play.type = "button";
play.value = "play/pause";
play.onclick = function(e) {
evolve(null, state)
function imageToCanvas(image, opt_cvs, cb) {
if (!cb) { cb = opt_cvs; }
var cvs = opt_cvs || document.createElement('canvas');
var ctx = cvs.getContext('2d');
cvs.width = image.width;
cvs.height = image.height;
ctx.drawImage(image, 0, 0);
cb(null, cvs);
// Having trouble recitfying descriptive yet short names, since
// there is a Component (data structure initializer), the instance
// of a component (component data) for an entity id, and an entity,
// which is simply an object with an `id` property (for now).
// Other constrains include trying to keep return types consistent
// (always receive an array, or always an object), and providing
// query interfaces so the underlying system can be optimized (as
// opposed to raw Objects where you just insert a string key).
var m =
[0, 1, 0, 0,
1, 0, 1, 1,
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1]
function next(m, cols) {
// up, right, down, left, up/left, up/right, down/right, down/left
var tester = require('stream-tester');
var t2 = require('through2');
function dot() {
return t2.obj()
function key(k) {
return t2.obj(function(obj, _, cb) {
console.log('key ' + k + ' ' + (typeof obj) + JSON.stringify(obj))
var test = require('tape');
test('test', function(t) {
setTimeout(function() {
}, 2000)
var nlp = require('nlp_compromise')
var sentences = nlp.pos('Cats always follow the player');
sentences[0].tokens.forEach(function(part) {
console.log(part.pos.tag, part.pos.description, part.normalised, part.pos_reason)
Something went wrong with that request. Please try again.