Flipboard Engineering: 60fps on the mobile web

scrolling

Since earlier this week Flipboard now is a website too. As they wanted to mimic their mobile apps, it would sport lots of animations. During their first tests, they found the DOM being too slow (although that’s not entirely true, see this video and its description for example). And then, an epiphany:

Most modern mobile devices have hardware-accelerated canvas, so why couldn’t we take advantage of this? HTML5 games certainly do. But could we really develop an application user interface in canvas?

And so they did. They’ve built react-canvas for this, “high performance <canvas> rendering for React components”. Reminds me of Letterpress, which is an optimized OpenGL scene, and acko.net, which is a WebGL layer which renders the site.

60fps on the mobile web — Flipboard Engineering →
react-canvas →

Realtime Audio-Visualizations with JavaScript

window.onload = function() {
  var ctx = new AudioContext();
  var audio = document.getElementById('myAudio');
  var audioSrc = ctx.createMediaElementSource(audio);
  var analyser = ctx.createAnalyser();
  // we have to connect the MediaElementSource with the analyser 
  audioSrc.connect(analyser);
  // we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
 
  // frequencyBinCount tells you how many values you'll receive from the analyser
  var frequencyData = new Uint8Array(analyser.frequencyBinCount);
 
  // we're ready to receive some data!
  // loop
  function renderFrame() {
     requestAnimationFrame(renderFrame);
     // update data in frequencyData
     analyser.getByteFrequencyData(frequencyData);
     // render frame based on values in frequencyData
     // console.log(frequencyData)
  }
  audio.start();
  renderFrame();
};

Web Audio API + Canvas + Some math. I would have chosen a different track though 😉

How to create Audio-Visualizations with JavaScript & HTML →
Realtime Audio-Visualizations (Demo) →

Isomer – An isometric graphics library for HTML5 canvas

isomer

var Shape = Isomer.Shape;
var Point = Isomer.Point;

iso.add([
  Shape.Prism(Point.ORIGIN, 3, 3, 1),
  Shape.Pyramid(new Point(0, 0, 1)),
  Shape.Pyramid(new Point(0, 2, 1)),
  Shape.Pyramid(new Point(2, 0, 1)),
  Shape.Pyramid(new Point(2, 2, 1))
]);

Did somebody out there recreate Monument Valley using this yet?

Isomer →

Export Flash Pro CC to HTML5 Canvas

HelpQuestions_Flash-01

With its latest update, Flash Professional CC empowers the open web ecosystem by providing native support for HTML5. You can now natively author and publish HTML5 Canvas content from within Flash Pro.

Powered by CreateJS. Also comes with a AS3 to JS converter.

Adobe Flash CC: What’s New →
Flash Professional Help: Creating and publishing an HTML5 Canvas document →

console.snapshot

687474703a2f2f692e696d6775722e636f6d2f6531455575684d2e706e67

Output snapshots and screenshots of canvas elements directly in the console of the Chrome Dev Tools

var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");

// ...
//draw
// ...

console.screenshot(canvas, 0.8); //Snapshot it and scale the output to 80% of the original size

Resulting output is the image picture above. Also supports creating a snapshot which outputs the canvas context call stack and state changes to the console.

console.snapshot →

Ejecta – Open Source JavaScript, Canvas & Audio Implementation for iOS

Ejecta is like a Browser without the Browser. It’s specially crafted for Games and Animations. It has no DIVs, no Tables, no Forms – only Canvas and Audio elements. This focus makes it fast.

Neat! And by the looks of it blazingly fast too!

Ejecta →