Wavy

/* Original source in Processing by Jared "BlueThen" C */

s.rect(0, 0, width, height).attr({fill: '#eeeeee'})

/* Variable a is used for determining the shape's y position, coupled with the distance they are from the center. */
/* amount of radians the height of our boxes changes */
var a = getRandomArbitary(-Math.PI, Math.PI);

/*
These are our loops.
We loop through 14 rows (-7 through 7) for the x axis, and within each row, we loop through 14 collumns for the z axis
(x,z) is the ground, while y is verticle)
*/
for (var x = -7; x < 7; x++) {
 for (var z = -7; z < 7; z++) {
  /*
  The y variable is set to determine the height of the box.
  We use formula radius * cos(angle) to determine this.
  Since cosine, when graphed, creates a wave, we can use this to have the boxes transition from small to big smoothly.

  The radius pretty much stands for our range. cosine alone will return values between -1 and 1, so we multiply this by
  24 to increase this value. The formula will return something in between -24 and 24.

  The angle is in radians. An entire loop (circle) is 2pi radians, or roughly 6.283185.
  Distance is used to create the circular effect. It makes the boxes of the same radius around the center similar.
  The distance ranges from 0 to 7, so 0.55 * distance will be between 0 and 3.85. This will make the highest and lowest
  box a little more than half a loop's difference. a is added on, (subtracted if you want to be technical, since a is negative), to
  provide some sort of change for each frame. If we don't include '+ a' in the algorithm, the boxes would be still.
  */
  var y = (24 * Math.cos(0.55 * distance(x, z, 0, 0) + a));

  // These are 2 coordinate variations for each quadrilateral.
  // Since they can be found in 4 different quadrants (+ and - for x, and + and - for z),
  // we'll only need 2 coordinates for each quadrilateral (but we'll need to pair them up differently
  // for this to work fully).

  // width of box
  var spaceApart = 13;
   
  var xm = x * spaceApart - (spaceApart/2);
  var xt = x * spaceApart + (spaceApart/2);
  var zm = z * spaceApart - (spaceApart/2);
  var zt = z * spaceApart + (spaceApart/2);

  /* We use an integer to define the width and height of the window. This is used to save resources on further calculating */
  var halfw = width / 2;
  var halfh = height / 2;

  /*
  Here is where all the isometric calculating is done.
  We take our 4 coordinates for each quadrilateral, and find their (x,y) coordinates using an isometric formula.
  You'll probably find a similar formula used in some of my other isometric animations. However, I normally use
  these in a function. To avoid using repetitive calculation (for each coordinate of each quadrilateral, which
  would be 3 quads * 4 coords * 3 dimensions = 36 calculations).

  Formerly, the isometric formula was ((x - z) * cos(radians(30)) + width/2, (x + z) * sin(radians(30)) - y + height/2).
  however, the cosine and sine are constant, so they could be precalculated. Cosine of 30 degrees returns roughly 0.866, which can round to 1,
  Leaving it out would have little artifacts (unless placed side-by-side to accurate versions, where everything would appear wider in this version)
  Sine of 30 returns 0.5.

  We left out subtracting the y value, since this changes for each quadrilateral coordinate. (-40 for the base, and our y variable)
  These are later subtracted in the actual quad().
  */
  var isox1 = (xm - zm + halfw);
  var isoy1 = ((xm + zm) * 0.5 + halfh);
  var isox2 = (xm - zt + halfw);
  var isoy2 = ((xm + zt) * 0.5 + halfh);
  var isox3 = (xt - zt + halfw);
  var isoy3 = ((xt + zt) * 0.5 + halfh);
  var isox4 = (xt - zm + halfw);
  var isoy4 = ((xt + zm) * 0.5 + halfh);

  /* The side quads. */
  fill(2);
  quad(isox2, isoy2 - y, isox3, isoy3 - y, isox3, isoy3 + 40, isox2, isoy2 + 40);
  fill(4);
  quad(isox3, isoy3 - y, isox4, isoy4 - y, isox4, isoy4 + 40, isox3, isoy3 + 40);

  /*
  The top quadrilateral.
  y, which ranges between -24 and 24, multiplied by 0.05 ranges between -1.2 and 1.2
  We add 4 to get the values up to between 2.8 and 5.2.
  This is a very fair shade of grays, since it doesn't become one extreme or the other.
  */
  fill(4 + y * 0.05);
  quad(isox1, isoy1 - y, isox2, isoy2 - y, isox3, isoy3 - y, isox4, isoy4 - y);
 }
}

var currentFillColor;
function fill(g){
  currentFillColor = Snap.hsb(0, 0, g/6);
}

function quad(x1, y1, x2, y2, x3, y3, x4, y4){
  s.polygon(x1, y1, x2, y2, x3, y3, x4, y4).attr({strokeWidth: 0.5, stroke: '#eeeeee', fill: currentFillColor})
}

function distance(x, y, cx, cy) {
  return Math.sqrt(Math.pow((cx - x), 2) + Math.pow((cy - y), 2));
}