Dec 12 2012
12 Comments
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 wordpress.com limitations, but it looks like this:

image-distortion-full-demo

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 , , , , , , ,
Nov 13 2012
3 Comments
Python

Call Diagram of Django Tastypie Resource get_list method

Tastypie is a Django-based framework for building a REST API. It is most effective as a direct wrapper on Django models, resulting in extremely concise code to expose models as REST resources (using the now-standard terminology where resource means a collection of similar objects). This broad overview can be diagramed something like the following.

Tastypie Overview

But Tastypie is applicable even for more complex REST API designs, using non-Django data sources, or doing elaborate things to the Django models before sending them back to the client.

Continue reading →

Tagged , , ,
Sep 01 2012
8 Comments
Tools

Search Query Suggestions using ElasticSearch via Shingle Filter and Facets

ElasticSearch is a zero-configuration, real-time, clustered search-oriented JSON data store built on top of Apache Lucene. In fact, there is configuration but it is optional and available via ElasticSearch’s REST API. This post is a quick demonstration of the basics of configuring ElasticSearch to analyze documents for search suggestions, and the query you use to extract them.

Continue reading →

Tagged
May 04 2012
Leave a comment
Scala

How Scala implicits provide underscore.js / jQuery-style augmentations

Scala implicits allow one to write libraries like jQuery or underscore.js that add methods to existing classes without the syntactic overhead. This is very quick to demonstrate.

Consider the useful pluck method that underscore.js adds to Javascript arrays, used like so:

> _([{foo: 'baz'}, {foo: 'bizzle'}]).pluck("foo")
["baz", "bizzle"]

The underscore function sort of lets us “pretend” that pluck is a method of arrays of objects. Here is a similar method addition in Scala using implicits.

object Pluck {
  implicit def withPluck[T](ms: Seq[Map[String, T]]) = new {
    def	pluck(field: String) = ms.map(_.get(field))
  }
}

And here’s how you use it:

$ sbt console
scala> import Pluck._
scala> Seq(Map("foo" -> "baz"), Map("foo" -> "bizzle")) .pluck("foo")
res0: Seq[Option[java.lang.String]] = List(Some(baz), Some(bizzle))

In Scala, you can trivially “add” a method to an existing class without modifying that class or adding syntactic overhead. One may debate whether this is a good idea to do very often, of course, but clearly underscore.js is simply adding methods one really would expect an array to have.

Tagged , ,
Mar 11 2012
Leave a comment
Scala

Heterogeneous Maps and Keys with Phantom Types in Scala

The term “heterogeneous collection” captures a few different ideas, most popularly a set or list where the elements may have different types. This post is not about those, but about a map (or dictionary, or key-value mapping, or whatever else you’d like to call it) where the values may be of different types, but the program does not lose that type information.

I’ve made a preliminary library from these code snippets at https://github.com/kennknowles/scala-heterogeneous-map. Let’s jump right in and do our imports…

Continue reading →

Tagged
Jan 08 2012
Leave a comment
Javascript

Behave.js: less-than-pure Functional Reactive Programming for Javascript

Following up my first experiments with FRP in Javascript I put together a separate github project and demo/tutorial page. Check it out:

http://kennknowles.github.com/behave.js/

Tagged ,
Dec 28 2011
3 Comments
Javascript

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 , , ,
Dec 20 2011
Leave a comment
Scala

Type Classes in Scala

Type classes are an idea originally from Haskell that you can implement in Scala via implicit parameters. This is not new or obscure, but the technique is so useful that another post just demonstrating the basics can’t hurt. I will keep this brief — I have a lot to say about type classes, but first the fundamentals need to be extremely solid.

Let’s get imports out of the way….

Continue reading →

Tagged , ,