Category Archives: misc

Overexposed Perlin Texture

By Zevan | July 28, 2009
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData = new BitmapData(1200,1200,false, 0x000000);
  2. addChild(new Bitmap(canvas));
  3.  
  4. scaleX = scaleY = 0.5;
  5. var w:int = canvas.width
  6. var hw:int = w / 2;
  7. var hhw:int = hw / 2;
  8. var size:int = canvas.width * canvas.width;
  9.  
  10. canvas.perlinNoise(hhw,hhw,2,Math.random()*100,false, false, 1, true);
  11.  
  12. for (var i:int = 0; i<size; i++){
  13.     var xp:int = i % w;
  14.     var yp:int = int(i / w);
  15.     var col:uint =  canvas.getPixel(xp, yp) / (xp+yp-w)>> 8 & 0xFF
  16.     canvas.setPixel(xp, yp, col <<16 | col <<8 | col)
  17. }
  18.  
  19. var blur:BitmapData = canvas.clone();
  20. blur.applyFilter(blur, blur.rect, new Point(0,0), new BlurFilter(10,10,1));
  21.  
  22. canvas.draw(blur, null, null, BlendMode.ADD);

I was playing around awhile back and created this snippet, it will draw something that looks like this:

this is one of those snippets that can produce vastly different looking images with minor changes to the code... for instance, try changing the blendMode to darken and line 15 to this:

var col:uint = canvas.getPixel(xp, yp) / (xp|yp-w) >> 5 & 0xFF;

and you'll end up with this:

...take the original snippet and change the blendMode to subtract:

etc...

Also posted in BitmapData, setPixel | Tagged , , | Leave a comment

Summarize Contents of Array

By Zevan | July 24, 2009
CLICK HERE TO COPY
Actionscript:
  1. var a:Array = [true, true, true, false, false, true, true, true, false];
  2.  
  3. var counter:int = 0;
  4. var prev:Boolean;
  5. var summary:Array = [];
  6. for (var i:int = 1; i<a.length; i++){
  7.     prev = a[i - 1]
  8.     counter++;
  9.     if (prev != a[i]){
  10.         if (prev){
  11.             summary.push("true: "+ counter);
  12.         }else{
  13.             summary.push("false: "+ counter);
  14.         }
  15.         counter = 0;
  16.     }
  17. }
  18. summary.push(a[i-1].toString()+": "+ (counter+1));
  19.  
  20. trace(summary);
  21.  
  22. /** outputs:
  23. true: 3,false: 2,true: 3,false: 1
  24. */

This is a handy way to summarize the contents of an array of boolean values.

Also posted in arrays | Tagged , , | 8 Comments

Recursive 2D Structure

By Zevan | July 21, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height = 700, frameRate=24)]
  2. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
  3. addChild(new Bitmap(canvas));
  4.  
  5. var maxBranches:int = 600;
  6. var branches:int = 0;
  7. var startX:Number = 300
  8. makeBranch(startX,690,30,-60, 60);
  9.  
  10. function makeBranch(xp:Number, yp:Number, step:Number, min:Number, max:Number):void {
  11.     var vectors:Shape = Shape(addChild(new Shape()));
  12.     var cX:Number, cY:Number, eX:Number, eY:Number
  13.     var dcX:Number=xp, dcY:Number=yp, deX:Number=xp, deY:Number=yp;
  14.     var theta:Number = (min + Math.random()*(max-min) - 90) * Math.PI / 180;
  15.     cX = xp + step * Math.cos(theta);
  16.     cY = yp + step * Math.sin(theta);
  17.     theta = (min + Math.random()*(max-min)-90) * Math.PI / 180;
  18.     eX = cX + step * Math.cos(theta);
  19.     eY = cY + step * Math.sin(theta);
  20.     var run:Function = function():void{
  21.          dcX +=  (cX - dcX) / 2;
  22.          dcY +=  (cY - dcY) / 2;
  23.          deX +=  (eX - deX) / 8;
  24.          deY +=  (eY - deY) / 8;
  25.          with(vectors.graphics){
  26.               clear();
  27.               beginFill(0xFFFFFF,0.8);
  28.               lineStyle(0,0x000000,0.8);
  29.               moveTo(startX, yp);
  30.               lineTo(xp, yp);
  31.               curveTo(dcX, dcY, deX, deY);
  32.               lineTo(startX, deY);
  33.          }
  34.          if (Math.abs(dcX - cX) <1 && Math.abs(deX - eX) <1 && Math.abs(dcY - cY) <1 && Math.abs(deY - eY) <1){
  35.              canvas.draw(vectors);
  36.              removeChild(vectors);
  37.              if (branches <maxBranches){
  38.                  setTimeout(makeBranch, 10, deX, deY, step - Math.random(), -90, 90);
  39.                  branches++;
  40.                  if (int(Math.random()*2) == 1){
  41.                     setTimeout(makeBranch, 10, deX, deY, step - Math.random()*3, -90, 90);
  42.                     branches++;
  43.                  }
  44.              }
  45.          }else{
  46.              setTimeout(arguments.callee,  1000 / 24);
  47.          }
  48.     }();
  49. }

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...

Also posted in BitmapData, bezier, functions, motion | Tagged , , | 7 Comments

Isometric Cones (spikes)

By Zevan | July 19, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height = 500, backgroundColor=0xFFFFFF)]
  2.  
  3. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
  4. addChild(new Bitmap(canvas));
  5.  
  6. var matrix:Matrix = new Matrix();
  7. var grid:Sprite =   new Sprite();
  8. grid.filters = [new DropShadowFilter(4, 0, 0, 0.05, 20, 10)];
  9. matrix.rotate(Math.PI / 4);
  10. matrix.scale(1, 0.6);
  11. matrix.translate(stage.stageWidth / 2, stage.stageHeight / 2 + 50);
  12. grid.transform.matrix = matrix;
  13.  
  14. var rowCol:int = 9;
  15. var spikeNum:Number = rowCol * rowCol;
  16. var diameter:Number = 30;
  17. var space:Number  = diameter + 10;
  18. var halfGridSize:Number  = rowCol * space / 2;
  19. var radius:Number;
  20. addEventListener(Event.ENTER_FRAME, onLoop);
  21. function onLoop(evt:Event):void {
  22.     radius  = diameter / 2;
  23.     grid.y -= 0.9;
  24.     grid.graphics.clear();
  25.     for (var i:Number = 0; i<spikeNum; i++){
  26.        var xp:Number = i % rowCol;
  27.        var yp:Number = int(i / rowCol);
  28.        drawSpike(xp * space - halfGridSize, yp * space - halfGridSize, (xp + yp) / 4, 0, -yp);
  29.     }
  30.     canvas.draw(grid, grid.transform.matrix);
  31.     diameter -= 0.5;
  32.     if (diameter <3){
  33.         removeEventListener(Event.ENTER_FRAME, onLoop);
  34.     }
  35. }
  36. function drawSpike(xp:Number, yp:Number, rot:Number = 0, xOff:Number=0, yOff:Number = 0):void{
  37.     matrix.createGradientBox(diameter, diameter, rot, xp - radius + yOff, yp - radius + xOff);
  38.     with (grid.graphics){
  39.         beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0x999999], [1,1], [0, 255], matrix, SpreadMethod.PAD);
  40.         drawCircle(xp, yp, radius);
  41.     }
  42. }

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

Also posted in 3D, BitmapData | Tagged , , | Leave a comment