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 wordpress.com 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 “_“.
Code // Comment 