# POINT DISTORTION FILTERS

These are a couple of functions I’ve just wrote to transform points. They work on a single point basis, an array of points needs to be looped.

The Ripple function transforms the points into sine waves. (Man, I’m really lousy at explaining what the heck it does.) It takes five arguments:

*point* – The point you wish to transform, [point]

*periodX* – The length of the x period, [number]

*periodY* – The length of the y period, [number]

*amplitudeX* – The amplitude of the x sine wave, [number]

*amplitudeY* – The amplitude of the y sine wave, [number]

function Ripple(point, periodX, periodY, amplitudeX, amplitudeY){ return point + new Point(Math.sin(2 * Math.PI * point.y / periodX), Math.sin(2 * Math.PI * point.x / periodY)) * (amplitudeX, amplitudeY) }

Next up, and better-looking, is the Twirl function. It sucks the points down the drain in a whirlpool kinda style. This produces more coherent results compared to the Ripple function although a high enough angle value will render the final outcome rather messy.

*point* – Still, the point in question to be altered, [point]

*center* – This is the center of the “whirlpool”, [point]

*angle* – The rotational angle of the point, [number]

*radius* – The size of the “whirlpool”, [number]

function Twirl(point, center, angle, radius){ var delta = point - center var distance = delta.length var beta = Math.atan2(delta.y, delta.x) + angle.toRadians() * ((radius - distance) / radius) return distance <= radius ? center + new Point(Math.cos(beta), Math.sin(beta)) * distance : point }

The best thing about these functions is that the effect is cumulative. One can create an array of points and the run the through both filters to produce something really strange, such as this…

The Bulge function bends the points like a lens.

*point* – The point, [point]

*center* – The center, [point]

*radius* – The size of the “lens”, [number]

*strength* – How much will the “lens” bend the points (usually between -1 & 1), [number]

function Bulge(point, center, radius, strength){ var distance = (point - center).length point -= center return distance <= radius ? point * (1 + ((radius - distance) / radius) * strength) + center : point + center }

Back to Scripts