# Triangle Ripple - RealWorld forums

## Triangle Ripple

PAEz
on November 8th 2013

Code
Configuration

``````Configuration.AddSlider("xAmplitude", "X Amplitude", "", 0, 30, 5);
Configuration.AddSlider("yAmplitude", "Y Amplitude", "", 0, 30, 5);
Configuration.AddSlider("xWavelength", "X Wavelength", "", 1, 50, 16);
Configuration.AddSlider("yWavelength", "Y Wavelength", "", 1, 50, 16);``````

Execution

``````// Joel Besada
// Plus PAEz touch here and there

function getBilerpixel(l, x, y, w, h) {
var corner = [];
var xi, yi, xip, xip1;
var yip, yip1;

xi = ~~x;
yi = ~~y;
xip = Math.max(Math.min(xi, w - 1), 0);
xip1 = Math.max(Math.min(xi + 1, w - 1), 0);
yip1 = Math.max(Math.min(yi + 1, h - 1), 0);
yip = Math.max(Math.min(yi, h - 1), 0);

corner[0] = l.GetPixel(xip, yip, 0, 0); //this.layers[l].data32[xip + yip];
corner[1] = l.GetPixel(xip1, yip, 0, 0); //this.layers[l].data32[xip1 + yip];
corner[2] = l.GetPixel(xip, yip1, 0, 0); //this.layers[l].data32[xip + yip1];
corner[3] = l.GetPixel(xip1, yip1, 0, 0); //this.layers[l].data32[xip1 + yip1];

return cosineInterpolate(corner, (x - xi), (y - yi));
}

function cosineInterpolate(v, x, y) {
var f1, f2, mf1, mf2, g0, g1, g2, g3;
var color, r, g, b;
mf1 = (1 - Math.cos(x * Math.PI)) * 0.5;
mf2 = (1 - Math.cos(y * Math.PI)) * 0.5;
var f1 = 1 - mf1;
var f2 = 1 - mf2;
var g0 = f1 * f2;
var g1 = mf1 * f2;
var g2 = f1 * mf2;
var g3 = mf1 * mf2;

color = ((v[0] & 255) * g0 + (v[1] & 255) * g1 + (v[2] & 255) * g2 + (v[3] & 255) * g3);
color = color | ((((v[0] >> 8 & 255) * g0 + (v[1] >> 8 & 255) * g1 + (v[2] >> 8 & 255) * g2 + (v[3] >> 8 & 255) * g3) & 255) << 8);
color = color | ((((v[0] >> 16 & 255) * g0 + (v[1] >> 16 & 255) * g1 + (v[2] >> 16 & 255) * g2 + (v[3] >> 16 & 255) * g3) & 255) << 16);
color = color | ((((v[0] >> 24 & 255) * g0 + (v[1] >> 24 & 255) * g1 + (v[2] >> 24 & 255) * g2 + (v[3] >> 24 & 255) * g3) & 255) << 24);
return color;
}
transformFilter = function(inputData, outputData, transformInverse, width, height) {
var out = [];
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
transformInverse.apply(this, [x, y, out]);
var srcX = out[0];
var srcY = out[1];

var w = width - 2;
var h = height - 2;
var direction = 1;

while (srcX < 0 || srcX > w) {
if (srcX > w) {
srcX = w - (srcX - w);
direction = -1;
}
if (srcX < 0) {
srcX *= -1;
direction = 1;
}
}
while (srcY < 0 || srcY > h) {
if (srcY > h) {
srcY = h - (srcY - h);
direction = -1;
}
if (srcY < 0) {
srcY *= -1;
direction = 1;
}
}

//var srcX2=srcX+direction;
//var srcY2=srcY+direction;

var rgba = getBilerpixel(inputData, srcX, srcY, width - 1, height - 1);

outputData.SetPixel(x, y, 0, 0, rgba);
}
}
}

mod = function(a, b) {
var n = parseInt(a / b);
a -= n * b;
if (a < 0) {
return a + b;
}
return a;
}
triangle = function(x) {
var r = this.mod(x, 1);
return 2 * (r < 0.5 ? r : 1 - r);
}

filter = function(xAmplitude, yAmplitude, xWavelength, yWavelength) {
var input = Document.RasterImage;
var width = input.sizeX;
var height = input.sizeY;

var clone;
clone = Document.Duplicate();
clone = clone.RasterImage;
var transInverse = function(x,y,out){
var nx = y/xWavelength;
var ny = x/yWavelength;
var fx = triangle(nx,1);
var fy = triangle(ny,1);
out[0] = x + xAmplitude * fx;
out[1] = y + yAmplitude * fy;
}
transformFilter(clone, input, transInverse, width, height);
}

var xAmplitude = Configuration.xAmplitude;
var yAmplitude = Configuration.yAmplitude;
var xWavelength = Configuration.xWavelength;
var yWavelength = Configuration.yWavelength;
filter(xAmplitude, yAmplitude, xWavelength, yWavelength);``````
Page views: 1681       Posts: 1
Software support
Select background
I wish there were...