Tag Archives: actionscript

Recursive 2D Structure

By Zevan | July 21, 2009

Actionscript:

[SWF(width = 600, height = 700, frameRate=24)]
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
addChild(new Bitmap(canvas));
 
var maxBranches:int = 600;
var branches:int = 0;
var startX:Number = 300
makeBranch(startX,690,30,-60, 60);
 
function makeBranch(xp:Number, yp:Number, step:Number, min:Number, max:Number):void {
    var vectors:Shape = Shape(addChild(new Shape()));
    var cX:Number, cY:Number, eX:Number, eY:Number
    var dcX:Number=xp, dcY:Number=yp, deX:Number=xp, deY:Number=yp;
    var theta:Number = (min + Math.random()*(max-min) - 90) * Math.PI / 180;
    cX = xp + step * Math.cos(theta);
    cY = yp + step * Math.sin(theta);
    theta = (min + Math.random()*(max-min)-90) * Math.PI / 180;
    eX = cX + step * Math.cos(theta);
    eY = cY + step * Math.sin(theta);
    var run:Function = function():void{
         dcX +=  (cX - dcX) / 2;
         dcY +=  (cY - dcY) / 2;
         deX +=  (eX - deX) / 8;
         deY +=  (eY - deY) / 8;
         with(vectors.graphics){
              clear();
              beginFill(0xFFFFFF,0.8);
              lineStyle(0,0x000000,0.8);
              moveTo(startX, yp);
              lineTo(xp, yp);
              curveTo(dcX, dcY, deX, deY);
              lineTo(startX, deY);
         }
         if (Math.abs(dcX - cX) <1 && Math.abs(deX - eX) <1 && Math.abs(dcY - cY) <1 && Math.abs(deY - eY) <1){
             canvas.draw(vectors);
             removeChild(vectors);
             if (branches <maxBranches){
                 setTimeout(makeBranch, 10, deX, deY, step - Math.random(), -90, 90);
                 branches++;
                 if (int(Math.random()*2) == 1){
                    setTimeout(makeBranch, 10, deX, deY, step - Math.random()*3, -90, 90);
                    branches++;
                 }
             }
         }else{
             setTimeout(arguments.callee,  1000 / 24);
         }
    }();
}

This snippet uses a technique similar to what you might use to create a recursive tree. A bit of additional logic is added for bezier branches, filled shapes and animation.

WARNING: may run slow on older machines

Have a look at the swf...

Posted in BitmapData, bezier, functions, misc, motion | Also tagged as3, flash | 7 Comments

Smudge Tool #1

By Zevan | July 20, 2009

CLICK HERE TO COPY

Actionscript:

[SWF(backgroundColor = 0xCCCCCC)]
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,true, 0xFFFFFFFF);
addChild(new Bitmap(canvas));
 
var loader:Loader = new Loader();
loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
function onComplete(evt:Event):void{
    canvas.draw(loader);
}
 
var brush:Shape = new Shape();
var diameter:Number = 120;
var radius:Number = diameter / 2;
var matrix:Matrix = new Matrix();
 
var brushAlpha:BitmapData = new BitmapData(diameter, diameter, true, 0x00000000);
drawRadial();
brushAlpha.draw(brush);
 
var xp:Number = 0, yp:Number = 0, px:Number = 0, py:Number = 0;
var dx:Number, dy:Number;
 
stage.addEventListener(MouseEvent.MOUSE_MOVE, onLoop);
function onLoop(evt:Event):void {
    xp = mouseX - radius;
    yp = mouseY - radius;
    dx = xp - px;
    dy = yp - py;
    canvas.copyPixels(canvas,
                    new Rectangle(px, py, diameter, diameter),
                    new Point(xp, yp), brushAlpha, new Point(0,0), true);
    px = xp;
    py = yp
}
 
function drawRadial():void{
    matrix.createGradientBox(diameter, diameter, 0, 0, 0);
    with (brush.graphics){
        beginGradientFill(GradientType.RADIAL, [0xFFFFFF, 0xFFFFFF], [1,0], [0, 255], matrix, SpreadMethod.PAD);
        drawCircle(radius, radius, radius);
    }
}

This is a quick snippet I wrote while thinking about how to create a smudge tool using BitmapData... it isn't perfect, but it's a good first step. It still needs some linear interpolation and I may need to do some pixel pushing to prevent a strange alpha anomaly that causes the brush to get darker than expected....

Here is the swf...

Posted in BitmapData | Also tagged as3, flash | 1 Comment

Isometric Cones (spikes)

By Zevan | July 19, 2009

CLICK HERE TO COPY

Actionscript:

[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:

Posted in 3D, BitmapData, misc | Also tagged as3, flash | Leave a comment

Cut Image into Squares (copyPixels)

By Zevan | July 14, 2009

CLICK HERE TO COPY

Actionscript:

[SWF(width=650, height=650)]
var loader:Loader = new Loader();
loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
 
var w:Number;
var h:Number;
var rows:Number = 20;
var cols:Number = 20;
var tiles:Vector.<BitmapData> = new Vector.<BitmapData>();
var locX:Vector.<Number> = new Vector.<Number>();
var locY:Vector.<Number> = new Vector.<Number>();
var rX:Vector.<Number> = new Vector.<Number>();
var rY:Vector.<Number> = new Vector.<Number>();
var sX:Vector.<Number> = new Vector.<Number>();
var sY:Vector.<Number> = new Vector.<Number>();
function onLoaded(evt:Event):void{
    w = evt.target.width;
    h = evt.target.height;
    var image:BitmapData = Bitmap(evt.target.content).bitmapData;
    var tileWidth:Number = w / cols;
    var tileHeight:Number = h / rows;
    var inc:int = 0;
    var pnt:Point = new Point();
    var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
    for (var i:int = 0; i<rows; i++){
        for (var j:int = 0; j<cols; j ++){
             var currTile:BitmapData= new BitmapData(tileWidth, tileHeight, true, 0x00000000);
             rect.x = j * tileWidth;
             rect.y = i * tileHeight;
             currTile.copyPixels(image, rect, pnt, null, null, true);
             tiles[inc] = currTile;
             rect.x += 25;
             rect.y += 25;
             sX[inc] = rect.x;
             sY[inc] = rect.y;
             locX[inc] = rX[inc] = -rect.width * 2
             locY[inc] = rY[inc] =  Math.random() * stage.stageHeight;
             setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y);
             inc++;
        }
    }
}
 
function startAnimation(index:int, dx:Number, dy:Number):void{
    var interval:Number;
    var animate:Function = function(index:int):void{
        locX[index] += (dx - locX[index]) / 4;
        locY[index] += (dy - locY[index]) / 4;
        if (Math.abs(locX[index] - dx) <1 && Math.abs(locY[index] - dy)<1){
            locX[index] = dx;
            locY[index] = dy;
            clearInterval(interval);
        }
    }
   interval = setInterval(animate, 32, index);
}
 
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
addChild(new Bitmap(canvas));
 
var loc:Point = new Point();
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
      canvas.fillRect(canvas.rect, 0xFFFFFF);
      for (var i:int = 0; i<tiles.length; i++){
            var tile:BitmapData= tiles[i];
            loc.x = locX[i];
            loc.y = locY[i];
            canvas.copyPixels(tile, tile.rect, loc, null, null, true);
      }
}

This snippet cuts a dynamically loaded image into a series of smaller BitmapData instances. These BitmapData instances are then drawn to a canvas BitmapData using copyPixels. The BitmapData.copyPixels() method is extremely fast - so this has some advantages over yesterdays post (which did basically the same thing with Sprites). I used setInterval and setTimeout to do a simple demo animation, but I recommend using TweenLite on a real project.

Posted in BitmapData, Vector | Also tagged as3, flash | 10 Comments

Tag Archives: actionscript

Recursive 2D Structure

Smudge Tool #1

Isometric Cones (spikes)

Cut Image into Squares (copyPixels)

Search

Pages

Recent Posts

Categories

Archives

RSS Feeds