Notes:
If you enjoyed our Swimmy Circles optical illusion, you may have wondered about the algorithm that determined the angles and placements of the light and dark 'shadows' on the blue dots. We used a topographical mapping stolen from a Calculus book to get a ripply-type pattern. Each 'z' value was used as an angle to determine the offset positions of the light and dark disks. That image is shown above.
Features:
| Comments: |
Used an array of colors and some 'helper' functions to pull off this design. |
|---|---|
| Even More: |
function drawMyDesign() {
//colors and shades information
var colors = new Array(red, orange, gold, yellow,
green, medGreen, deepBlue, blue, hotPink, maroon, purple, navy);
var shades = new Array(black, darkGray, lightGray, offWhite, white);
var numColors = colors.length;
//special points/components
var radius = .25;
var zmax = -10000;
var zmin = 10000;
for (var x = XMIN; x <= XMAX; x += .5) {
for (var y = YMIN; y <= YMAX; y += .5) {
var z = topoEqn(x, y);
if (z < zmin) zmin = z;
if (z > zmax) zmax = z;
}
}
console.log("zmin = " + zmin);
console.log("zmax = " + zmax);
for (var x = XMIN; x <= XMAX; x += .5) {
for (var y = YMIN; y <= YMAX; y += .5) {
var center = new TNTPoint(x, y);
var z = topoEqn(x, y);
var ndx = getColorIndex(z, zmin, zmax, numColors);
if (ndx < 0) {
var theColor = black;
} else {
var theColor = colors[ndx];
}
//console.log(theColor);
var sqr = new TNTSquare(center, 2 * radius, theColor, null, 0);
sqr.drawTNTSquare(context);
}
}
} //end function drawMyDesign
//------- additional functions here------------------
function getColorIndex(z, zmin, zmax, numColors) {
var step = (zmax - zmin) / numColors;
var ndx = Math.round(z / step);
return ndx;
}//end getColorIndex
function topoEqn(x, y) {
return 360 * Math.sin(.002 * (x * x + y * y));
}//end function topoEqn
|