Saturday, May 31, 2008

Fun with visualizations

Looking through MacResearch, I saw NodeBox, "...a Mac OS X application that lets you create 2D visuals (static, animated or interactive) using Python programming code and export them as a PDF or a QuickTime movie." A bit of a hobbyist math geek, I checked it out a bit and realized that a lot of the Python source code used with NodeBox looks rather similar to JavaScript interacting with the canvas HTML5 element.

So I took a few and wrote a quick library to behave similarly to NodeBox, albeit for JavaScript to run in a browser. I just looked at the parametric equation examples for something easy to start off with, and wrote a few examples. The first, extremely simple example more or less just draws a circle within certain bounds:

function CircleEquation(dt, steps, r) {
 Frozen.Chart.Equation.call(this, steps, dt);
 this.r = r;
}
CircleEquation.prototype = new Frozen.Chart.Equation;
CircleEquation.prototype.next = function() {
 this.x = Math.cos(this.t) * this.r;
 this.y = Math.sin(this.t) * this.r;
 return Frozen.Chart.Equation.prototype.next.apply(this);
};

function circleTest1() {
 chart.clear();
 chart.map.lineWidth = 0.5;
 chart.renderEquation(new CircleEquation(4.5, 75, 95));
}

This results in the following visualization:

A spiral design made up of thin lines making up a 100 pixel circle

You can see it in action, along with a couple of slightly more interesting examples. NodeBox can do a lot more than simple charting, this part of its functionality just inspired a fun exercise in web+math geekery.

Labels: , ,

0 Comments:

Post a Comment

Links to this post:

Create a Link

<< Home