Category Archives: BitmapData

Another Perlin Texture

By Zevan | July 29, 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,1,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) / (-20|i+xp)>> 8 & 0xFF
  16.     canvas.setPixel(xp, yp, col <<16 | col <<8 | col);
  17. }
  18.  
  19. canvas.applyFilter(canvas, canvas.rect, new Point(0,0), new BlurFilter(4,4,1));
  20. var blur:BitmapData = canvas.clone();
  21. blur.applyFilter(blur, blur.rect, new Point(0,0), new BlurFilter(10,10,1));
  22.  
  23. canvas.draw(blur, null, null, BlendMode.DARKEN);

This is a variation on yesterdays post. I think it's time to optimize this and see how it does in real time...

Here is what this snippet will draw:

Also posted in misc, pixel manipulation, setPixel | Tagged , , | 2 Comments

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 misc, setPixel | Tagged , , | Leave a comment

Quick Pixel Sphere

By Zevan | July 26, 2009
CLICK HERE TO COPY
Actionscript:
  1. var pointNum:int = 20000;
  2. var radius:int = 150;
  3.  
  4. var canvas:BitmapData = new BitmapData(400,400,false, 0x000000);
  5. addChild(new Bitmap(canvas));
  6. var verts:Vector.<Number>  = new Vector.<Number>();
  7. var pVerts:Vector.<Number> = new Vector.<Number>();
  8. var uv:Vector.<Number> = new Vector.<Number>();
  9.  
  10. for (var i:int = 0; i<pointNum; i+=3){
  11.     var xp:Number = Math.random() * 400 - 200;
  12.     var yp:Number = Math.random() * 400 - 200;
  13.     var zp:Number = Math.random() * 400 - 200;
  14.     var dist:Number = Math.sqrt(xp * xp + yp * yp + zp * zp);
  15.     // normalize and scale x,y,z
  16.     verts[i] = xp / dist * radius;
  17.     verts[i+1] = yp / dist * radius;
  18.     verts[i+2] = zp / dist * radius;
  19. }
  20.  
  21. var m:Matrix3D = new Matrix3D();
  22. var dx:Number = 0, dy:Number = 0;
  23. addEventListener(Event.ENTER_FRAME, onLoop);
  24. function onLoop(evt:Event):void {
  25.        m.identity();
  26.        dx += (mouseX - dx) / 4;
  27.        dy += (mouseY - dy) / 4;
  28.        m.appendRotation(dx, Vector3D.X_AXIS);
  29.        m.appendRotation(dy, Vector3D.Y_AXIS);
  30.        m.appendTranslation(200,200,0);
  31.        Utils3D.projectVectors(m, verts, pVerts, uv);
  32.        canvas.fillRect(canvas.rect, 0x000000);
  33.        for (var i:int = 0; i<pVerts.length; i+=2){
  34.          canvas.setPixel(pVerts[i], pVerts[i + 1], 0xFFFFFF);
  35.        }
  36. }

This snippet shows a quick way to randomly place a bunch of xyz coordinates on the surface of a sphere. I saw this trick in an OpenGL book a few years back - dug around my books but couldn't find it... If I find it I'll update this post.

The trick is achieved by normalizing the vector defined by each 3D coordinate...


Have a look at the swf...

Also posted in 3D, Math, matrix, setPixel | Tagged , , | 4 Comments

Sphere of Squares

By Zevan | July 23, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height = 600, backgroundColor=0x000000)]
  2. var squareNum:int  = 1000;
  3. var hw:Number = stage.stageWidth / 2;
  4. var hh:Number = stage.stageHeight / 2;
  5. // verts defines a single square
  6. var verts:Vector.<Number> = Vector.<Number>([-20, 0, 0, 20, 0, 0, 20, 0, 40, -20, 0, 40, -20, 0, 0]);
  7. var cmds:Vector.<int> = Vector.<int>([1,2,2,2,2]);
  8. var tempVerts:Vector.<Number> = new Vector.<Number>();
  9. var newVerts:Vector.<Number> = new Vector.<Number>();
  10. var pVerts:Vector.<Number> = new Vector.<Number>(10 * squareNum);
  11. var uv:Vector.<Number> = new Vector.<Number>(15 * squareNum);
  12. var vectors:Shape = new Shape();
  13. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0x000000);
  14. addChild(new Bitmap(canvas));
  15. var blurred:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0x000000);
  16. var blur:BlurFilter = new BlurFilter(20,20,1);
  17.  
  18. var m:Matrix3D = new Matrix3D();
  19.  
  20. var radius:Number = 200;
  21. // duplicate the verts array a bunch of times
  22. // each time moving the square to a random place on the
  23. // circumference of a sphere
  24. for (var i:int = 0; i<squareNum; i++){
  25.     m.identity();
  26.     var s:Number = Math.random()*.5 + .5;
  27.     m.appendScale(s, s, s);
  28.     m.appendRotation(90,Vector3D.X_AXIS);
  29.     m.appendTranslation(0, 0, radius);
  30.     m.appendRotation(Math.random()*360,Vector3D.X_AXIS);
  31.     m.appendRotation(Math.random()*360,Vector3D.Y_AXIS);
  32.     m.appendRotation(Math.random()*360,Vector3D.Z_AXIS);
  33.     m.transformVectors(verts,tempVerts);
  34.     newVerts = newVerts.concat(tempVerts);
  35.     cmds = cmds.concat(Vector.<int>([1,2,2,2,2]));
  36. }
  37. newVerts.fixed = pVerts.fixed = uv.fixed = true;
  38. var dx:Number = 0, dy:Number = 0;
  39. var pnt:Point = new Point();
  40. addEventListener(Event.ENTER_FRAME, onLoop);
  41. function onLoop(evt:Event):void {
  42.        dx += (mouseX - dx) / 4;
  43.        dy += (mouseY - dy) / 4;
  44.        m.identity();
  45.        m.appendRotation(dx,Vector3D.Z_AXIS);
  46.        m.appendRotation(dy,Vector3D.X_AXIS);
  47.        m.appendTranslation(hw,hh, 0);
  48.        Utils3D.projectVectors(m, newVerts, pVerts, uv);
  49.        with(vectors.graphics){
  50.            clear();
  51.            beginFill(0xFFFFFF);
  52.            drawCircle(hw, hh, radius+10);
  53.            beginFill(0x000000);
  54.            drawPath(cmds, pVerts, GraphicsPathWinding.NON_ZERO);
  55.        }
  56.        canvas.fillRect(canvas.rect, 0x000000);
  57.        canvas.draw(vectors);
  58.        blurred.copyPixels(canvas, canvas.rect, pnt);
  59.        blurred.applyFilter(blurred,blurred.rect, pnt, blur);
  60.        canvas.draw(blurred, null, null, BlendMode.SCREEN);
  61. }

This snippet is similar to yesterdays post but the visual result is rather different. This one does a little more Matrix3D stuff resulting in a sphere made up entirely of squares. This is obscured by the size of the squares and the fact that they overlap and cut each other up. BitmapData a BlurFilter and a BlendMode give the entire thing a slight glow...


Have a look at the swf here...

Also posted in 3D, Vector | Tagged , , , | 12 Comments