Ext JS designer with source code generation

This post was deleted at the request of an Ext JS employee.

An image segmentation experiment in Javascript

Image segmentation is a process in which an image is broken down into a set of segments, or superpixels, which are easier to analyze. This page contains a C++ implementation of technique described in the paper, "Efficient Graph-Based Image Segmentation," which can be found here. I ported it to Javascript as part of a project I'm working on, but, unfortunately, it doesn't quite suit my needs. Still cool, though.

Demo     Source code

Pretty fast Gaussian blur in Javascript

I'm currently porting the image segmentation code described here, and it includes a gaussian blur. The gaussian blur code alone seemed useful enough to warrant a post, so here ya go. It's exponentially faster than the one here, which is the only other Javascript gaussian blur example I could find. Includes improvements by Einar Lielmanis.

Demo     Source code

Professional path smoothing in Javascript (think Inkscape)

Professional svg editors generally allow for smoothing freeform paths, and if a browser-based svg or animation editor ever wants to be competitive, it must have the same capability. Smooth paths are important not only because they look nicer, but also because any animation in which an object follows a path must be smooth. The open source Inkscape project, thankfully, smooths paths very well, and porting the code was fairly straightforward.

A freeform path is made up of line segments so small they don't appear to be lines, but instead make up a jagged curve. We plug this into our smoothing function, which returns points for cubic bezier curves. We can adjust the tolerance, which will influence the amount of smoothing that takes place and, therefore, the amount of path segments left over. In the demo, this value is hardcoded but can be changed easily by editing the source code.


Demo     Source code

Solving the nearest point-on-curve problem in Javascript

I'm currently working on a project that requires quite a bit of geometry, so I downloaded the source code that goes along with the Graphics Gems book. Thankfully, c syntax is very similar to Javascript, so porting the code is easy. The first archive contains nearestpoint.c, which is the example provided for two concepts from the book - "Solving the Nearest Point-on-Curve Problem" and "A Bezier Curve-Based Root-Finder."

Here's the text from the book:

The basic problem can be stated in this manner: given a parametric curve Q and a point P, both in the plane, find the point on the curve closest to P (that is, find the parameter value t such that the distance from P to Q(t) is a minimum). Our approach begins with the geometry observation that the line segment (whose length we wish to minimize) from P to Q(t) is perpendicular to the tangent of the curve at Q(t) as shown in Fig. 1. The equation we wish to solve for t is

[Q(t) - P] * Q'(t) = 0.

Luckily, the example given is for a cubic Bezier curve, which is exactly what I need.

Demo     Source code