Isometric Cones (spikes)

[SWF(width = 600, height = 500, backgroundColor=0xFFFFFF)]

var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
addChild(new Bitmap(canvas));

var matrix:Matrix = new Matrix();
var grid:Sprite =   new Sprite();
grid.filters = [new DropShadowFilter(4, 0, 0, 0.05, 20, 10)];
matrix.rotate(Math.PI / 4);
matrix.scale(1, 0.6);
matrix.translate(stage.stageWidth / 2, stage.stageHeight / 2 + 50);
grid.transform.matrix = matrix;

var rowCol:int = 9;
var spikeNum:Number = rowCol * rowCol;
var diameter:Number = 30;
var space:Number  = diameter + 10;
var halfGridSize:Number  = rowCol * space / 2;
var radius:Number;
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
	radius  = diameter / 2;
	grid.y -= 0.9;
	grid.graphics.clear();
	for (var i:Number = 0; i<spikeNum; i++){
	   var xp:Number = i % rowCol;
	   var yp:Number = int(i / rowCol);
	   drawSpike(xp * space - halfGridSize, yp * space - halfGridSize, (xp + yp) / 4, 0, -yp);
	}
	canvas.draw(grid, grid.transform.matrix);
	diameter -= 0.5;
	if (diameter < 3){
		removeEventListener(Event.ENTER_FRAME, onLoop);
	}
}
function drawSpike(xp:Number, yp:Number, rot:Number = 0, xOff:Number=0, yOff:Number = 0):void{
	matrix.createGradientBox(diameter, diameter, rot, xp - radius + yOff, yp - radius + xOff);
	with (grid.graphics){
		beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0x999999], [1,1], [0, 255], matrix, SpreadMethod.PAD);
		drawCircle(xp, yp, radius);
	}
}

This snippet draws some isometric cones. Here are some images created by tweaking a few of the values:

Leave a Reply

Your email address will not be published. Required fields are marked *