kenfrederick: scriptographer/paperjs. lissajous

scriptographer/paperjs. lissajous

I was recently asked by a friend about some line patterns we used on a project a number of years ago. What I've learned since then, is that these beautiful line patterns are known as Lissajous curves as made famous by Jules Antoine Lissajous (and Nathaniel Bowditch). Way back in 2005 we were generating these using the blend tool in illustrator. It wasn't the slowest process, but it wasn't the fastest either so we would save these variations in different files and reference later. Cut to seven years later (I feel old now) instead of digging through my harddrive for these saved files, I whipped up a little script to create these wonderous curves in scriptographer (and sure, why not with paperjs as well).

Lissajous curves are generated by a relatively simple formula

// x = Αsin(at + δ), y = Bsin(bt) // all angles are in radians var a = 3; // amplitude/frequency of x var b = 4: // amplitude/frequency of y var step = 1 * (Math.PI/180); // 1 degree converted to radians var delta = 60 * (Math.PI/180); // phase shift converted to radians for(var angle=0; angle<=(Math.PI*2 + step); angle+=step) { x = Math.sin( angle*a + delta ); y = Math.sin( angle*b ); }

~~There is a glitch that happens every now and then that causes the control handles of the beziér curves to shoot off of the screen. I'm looking into a better way for calculating beziér curves.~~

Try as I might and given my extreme weakness with entry level calculus I couldn't determine the error in the math. Instead I corrected the glitch with a simple function to check whether the control handles of the curve are within an acceptable boundary.

function boundsCheck(pt1, pt2, tolerance) { var brect = new Rectangle(
new Point(-(pt2.x+tolerance.x), -(pt2.y+tolerance.y)), new Point(pt2.x+tolerance.x, pt2.y+tolerance.y) ); return pt1.isInside(brect); };

Phase Shift
the period of the curve

Frequency
frequency ratio across the x & y axes

Stroke Weight
set two different stroke weights and the curve will interpolate from the start to the end weight

Colors
set two colors and the curve will interpolate from the start to the end color

Opacity
set two opacity values and the curve will interpolate from the start to the end opacity

Blend
blend mode of opacity: normal, multiply, screen, etc.

Flyout Menu:
Alternate
colors will alternate every other segement

Blend
colors will blend across segments from start to end

Mouse drag
modulate the frequency (using the input values as maximums), the closer to the origin of the document = 0, the further away the maximum

Mouse drag+shift
modulate the phase shift (mouse x axis) from 0 - 360

The paperjs version is here and works as described above, grab the scripts/source for scriptographer lissajous.js

Labels: paperjs, scriptographer