Isometric Waves

Isometric Waves
Whilst looking into some processing demos over at openprocessing.org I ran into this isometric wave sketch. Each isometric tile’s height is determined by the distance it is from the center of the grid fitted to a sine curve. Animation is achieved by adding time to the distance. All I did was convert this to actionscript and add in some parameters to control the animation. The performance is not great. I have seen a modification of this on openprocessing that draws¬†many more isometric tiles without the performance hit that actionscript takes when making all those draw calls. The amount of code is minimal which makes this an excellent base demo for testing performance in other languages. I intend to try this one out in python, javascript and java in the future.

Parameters

  • Period: The period of the sine wave
  • Speed: The magnitude of the time-shift of the sine curve
  • Base: The depth of the base of all isometric tiles
  • Size: The width and depth of the demo specified in tiles
  • Block Size: The size of each isometric tile

The reason the Size is capped at 10 is for performance reasons.

Code

private function render(e:Event):void
{
	var zt:Number, zm:Number, xt:Number, xm:Number;
	var y:int;

	a -= settings.speed;
	bmp.bitmapData.fillRect(bmp.bitmapData.rect, 0xFFFFFF);
	for (var x:int = -settings.size; x < settings.size; x++)
	{
		for (var z:int = -settings.size; z < settings.size; z++) 		{ 			y = 24 * Math.cos(settings.period * distance(x, z, 0, 0) + a); 			 			xm = x * settings.blockSize - (settings.blockSize >> 1);
			xt = x * settings.blockSize + (settings.blockSize >> 1);
			zm = z * settings.blockSize - (settings.blockSize >> 1);
			zt = z * settings.blockSize + (settings.blockSize >> 1);

			iso1.x = xm - zm + halfw;
			iso1.y = (xm + zm) * .5 + halfh;
			iso2.x = xm - zt + halfw;
			iso2.y = (xm + zt) * .5 + halfh;
			iso3.x = xt - zt + halfw;
			iso3.y = (xt + zt) * .5 + halfh;
			iso4.x = xt - zm + halfw;
			iso4.y = (xt + zm) * .5 + halfh;

			bmp.bitmapData.draw(quad(iso2.x, iso2.y - y, iso3.x, iso3.y - y, iso3.x, iso3.y + settings.base, iso2.x, iso2.y + settings.base, 0, c2));
			bmp.bitmapData.draw(quad(iso3.x, iso3.y-y, iso4.x, iso4.y - y, iso4.x, iso4.y + settings.base, iso3.x, iso3.y + settings.base, 0, c3));

			c1 = combineARGB(1, (210 + y) / 255);
			bmp.bitmapData.draw(quad(iso1.x, iso1.y - y, iso2.x, iso2.y - y, iso3.x, iso3.y - y, iso4.x, iso4.y - y, 0, c1));
		}
	}
}