Rough.js – Create SVGs with a hand-drawn, sketchy, appearance

Rough.js is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. To get started first create a rough canvas: const rc = rough.canvas(document.getElementById(‘canvas’)); On that rough canvas you can […]

How Reddit built r/Place

Each year for April Fools’, rather than a prank, we like to create a project that explores the way that humans interact at large scales. This year we came up with Place, a collaborative canvas on which a single user could only place a single tile every five minutes. This limitation de-emphasized the importance of […]

Copycat JavaScript Game

Fun little game in which you control more than one character at once in a level, all bound to the same controls. Using walls and other obstacles you can sync up the locations between characters in order for each character to reach its own target. The game itself is written in β€œvanillaJS”, sans external libraries, […]

Flipboard Engineering: 60fps on the mobile web

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 […]

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 […]

Isomer – An isometric graphics library for HTML5 canvas

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

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 […]