Category Archives: Javascript

Dynamic Image Distortion in the Browser from one HTML5 Canvas to another (with UI via KineticJS and KnockoutJS)

Update: KineticJS upgraded from 4.1.2 to 5.0.1. Now Kinetic.Polygon is Kinetic.Line with closed:true, points must be flat arrays of coordinates, and the API for making things draggable is a bit improved.

HTML5 Canvas is a drawing interface that provides primitives for shapes, paths, transformations, and — most important for today — direct access to pixel data in the browser. Lately, I have wanted to display warped versions of dynamic browser graphics, and this is a perfect fit. In this article, I explore deforming a single triangle, essentially via barycentrically interpolated “texture mapping” from one HTML5 Canvas to another.

If you want to immediately see the UI in action, go look at it right here. I cannot use Javascript or iframes directly due to limitations, but it looks like this:


This article has four parts: The input controls, the output controls, the pixel pushing, and the math. The input and output are basic combinations of KineticJS and KnockoutJS, the pixel pushing is done via low-level HTML5 Canvas methods, and the math appendix describes barycentric coordinates and texture mapping very briefly. I also make free use of jQuery and Underscore aka “$” and “_“.

Continue reading

Tagged , , , , , , ,

Functional Reactive Programming Concepts in Javascript on top of Backbone

Functional Reactive Programming, or FRP, is an elegant approach to “purely functional” event-driven programming with values that change over time. It is a change of perspective from the usual meaning of “event driven” in Javascript, and it is very, very cool.

There already exists a from-first-principles implementation of FRP in Javascript via the Flapjax compiler, a lot of related ideas are in knockout.js, and Asana says their Luna framework was inspired by FRP. But I want to demonstrate how simple it is to get a naive implementation of FRP off the ground by using the event-handling API provided by Backbone. Since we are in Javascript, the semantic work that has gone into FRP is pretty much out the window anyhow.

Let’s dive in; here’s the HTML shell I’m going to use:

Continue reading

Tagged , , ,