Algorithms, Flex, Source Code,
8/20/07
Here’s the code driving the cardinal spline function I mentioned in the post last week on visual prototyping with Flex. ActionScript already has a bezier drawing method called “curveTo,” but it obliges you to specify a control point for every anchor point you add to the curve. This is great for precision, but sometimes you just want to run a smooth curve through a bunch of points without having to figure out where all the control points should be.
That’s what’s great about the cardinal spline—the next and previous points on the curve function as the control points. (This means you need to add an extra point to the beginning and end of the curve, as you can see in the diagram accompanying the Wikipedia entry for c-splines.) You also get a “tension” parameter which allows you to set how taut the curve is between points.
I’ve included my current incarnation of this routine below. Here’s how to use it:
If you’re using the function to set the location of a sprite, then you’ll need to maintain two lists of values (one for x position, one for y position) and call the function once for each list as you’re iterating through each segment of the curve.
Update: Here’s an .fla example that uses the function to draw a curved line through twenty random points.
Here’s the source for the function itself:
/**
* Returns a value at the given step on the cardinal spline between two other values.
*
* @param prevVal The point just prior the curve segment we are evaluating.
* @param startVal The starting point of the curve segment we are evaluating.
* @param endVal The ending point of the curve segment we are evaluating.
* @param nextVal The point just after the curve segment we are evaluating.
* @param numSteps Number of steps in the curve segment.
* @param curStep The current step in the curve segment.
* @param easing Type of interpolation to be applied to the curve segment.
* @param tension How taut the curve is (0 = straight, 1 = curvy)
*/
function getCardinalSplinePoint(prevVal:Number, startVal:Number, endVal:Number, nextVal:Number, numSteps:Number, curStep:Number, easing:String, tension:Number):Number {
var t1:Number;
var t2:Number;
switch (easing) {
case “easeinout”:
t1 = endVal - prevVal;
t2 = nextVal - startVal;
break;
case “noease”:
t1 = 0;
t2 = 0;
break;
case “easein”:
t1 = 0;
t2 = nextVal - startVal;
break;
case “easeout”:
t1 = endVal - prevVal;
t2 = 0;
break;
}
t1 *= tension;
t2 *= tension;
var s:Number = curStep / numSteps;
var h1:Number = (2 * Math.pow(s,3)) - (3 * Math.pow(s,2)) + 1;
var h2:Number = -(2 * Math.pow(s,3)) + (3 * Math.pow(s,2));
var h3:Number = Math.pow(s,3) - (2 * Math.pow(s,2)) + s;
var h4:Number = Math.pow(s,3) - Math.pow(s,2);
var value:Number = (h1 * startVal) + (h2 * endVal) + (h3 * t1) + (h4 * t2);
return value;
}
Making music out of the data of interplanetary exploration.
Making music out of the data of interplanetary exploration.
Here’s a list of links to works cited in my recent talk “Storytelling in the Age of Divided Screens” at Gallaudet University.
I’m very happy to announce the launch of “Timeframing: The Art of Comics on Screens,” a new website that explores what comics have to teach us about creative communication in the age of screen media.
To celebrate the launch of Upgrade Soul, here’s a screen shot of an eleven year old prototype I made that sets artwork from Will Eisner’s “The Treasure of Avenue ‘C’” (a story from New York: The Big City) in two dynamically resizable panels.
Algorithms
Animation
Announcements
Authoring Tools
Comics
Digital Humanities
Electronic Literature
Events
Experiments
Exemplary Work
Flash
Flex
Fun
Games
Graphic Design
Interactive Design
iPhone
jQuery
LA Flash
Miscellaneous
Music
Opertoon
Remembrances
Source Code
Typography
User Experience
Viewfinder
Wii
July 2018
May 2018
February 2015
October 2014
October 2012
February 2012
January 2012
January 2011
April 2010
March 2010
October 2009
February 2009
January 2009
December 2008
September 2008
July 2008
June 2008
April 2008
March 2008
February 2008
January 2008
November 2007
October 2007
September 2007
August 2007
July 2007
June 2007