Category Archives: Vector

Sierpiński Glitch Texture #2

By Zevan | August 20, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(frameRate=60, backgroundColor=0x000000, width=500, height=500)]
  2. var canvas:BitmapData = new BitmapData(500,500,false, 0x000000);
  3. addChild(new Bitmap(canvas));
  4. var clone:BitmapData = new BitmapData(500,500,false, 0x000000);
  5. var canvasRect:Rectangle = canvas.rect;
  6. var w:int = canvas.width;
  7. var w2:Number = 1/w;
  8. var w10:Number = 1/(w * 80);
  9. var convert:Number = Math.PI/180;
  10. var size:int = canvas.width * canvas.height;
  11. var pix:Vector.<uint> = new Vector.<uint>(size, true);
  12. var gray:ColorMatrixFilter = new ColorMatrixFilter([1, 0.55, 0.55, 0,0,0.55, 0.9, 0.55, 0,0,0.55, 0.55, 0.550,0, 0,0,0,1,0]);
  13. var m:Matrix = new Matrix();
  14. m.scale(1,-1);
  15. m.translate(0,canvas.height);
  16. var sin:Number = 0, cos:Number = 0;
  17. var dx:Number = 0, dy:Number = 0;
  18. var pnt:Point = new Point();
  19. var blur:BlurFilter = new BlurFilter(10,10,1);
  20. addEventListener(Event.ENTER_FRAME, onLoop);
  21. function onLoop(evt:Event):void {
  22.     canvas.lock();
  23.     dx += (mouseX * 10 - 3000 - dx) / 8;
  24.     dy += (mouseY * 4 - dy) / 8;
  25.     for (var i:int = 0; i<size; i++){
  26.         var xp:int = i % w;
  27.         var yp:int = int(i * w2);
  28.         var xp2:int = xp <<1;
  29.         var t:Number;
  30.         t = ((yp|(xp + yp)) * (xp + dx) *w10) % 6.14687;
  31.         //compute sine
  32.         // technique from http://lab.polygonal.de/2007/07/18/fast-and-accurate-sinecosine-approximation/
  33.         // by Michael Baczynski
  34.         if (t<0) {
  35.             sin=1.27323954*t+.405284735*t*t;
  36.         } else {
  37.             sin=1.27323954*t-0.405284735*t*t;
  38.         }
  39.         // compute cosine
  40.         t = (xp2|(yp+xp/dx) + dy) * convert % 6.28;
  41.         t+=1.57079632;
  42.         if (t>3.14159265) {
  43.             t-=6.28318531;
  44.         }
  45.         if (t<0) {
  46.             cos=1.27323954*t+0.405284735*t*t;
  47.         } else {
  48.             cos=1.27323954*t-0.405284735*t*t;
  49.         }
  50.         var c1:int = 31 * (sin - cos);
  51.         if (c1 <0) c1 = 256 - c1;
  52.         c1 = (c1>>1  | c1) ;
  53.         pix[i] = c1 <<17 | c1 <<8 | c1;
  54.     }
  55.     canvas.setVector(canvasRect, pix);
  56.     clone.copyPixels(canvas, canvasRect, pnt);
  57.     canvas.draw(clone, m, null, BlendMode.SUBTRACT);
  58.     clone.copyPixels(canvas, canvasRect, pnt);
  59.     clone.applyFilter(clone, canvasRect, pnt, blur);
  60.    
  61.     canvas.draw(clone, null, null, BlendMode.LIGHTEN);
  62.     canvas.applyFilter(canvas, canvasRect, pnt, gray);
  63.     canvas.unlock();
  64. }

More texture experimentation...

Have a look at the swf over at wonderfl.net...

Also posted in BitmapData, Operators, pixel manipulation | Tagged , , | Leave a comment

Interesting Texture #3 (animated)

By Zevan | August 18, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(frameRate=60, backgroundColor=0x000000, width=500, height=500)]
  2. var canvas:BitmapData = new BitmapData(500,500,false, 0x000000);
  3. addChild(new Bitmap(canvas));
  4. var clone:BitmapData = new BitmapData(500,500,false, 0x000000);
  5. var canvasRect:Rectangle = canvas.rect;
  6. var w:int = canvas.width;
  7. var w2:Number = 1/w;
  8. var w10:Number = 1/(w * 80);
  9. var convert:Number = Math.PI/180;
  10. var size:int = canvas.width * canvas.height;
  11. var pix:Vector.<uint> = new Vector.<uint>(size, true);
  12. var gray:ColorMatrixFilter = new ColorMatrixFilter([1, 0.55, 0.55, 0,0,0.55, 0.9, 0.55, 0,0,0.55, 0.55, 0.550,0, 0,0,0,1,0]);
  13. var m:Matrix = new Matrix();
  14. m.scale(1,-1);
  15. m.translate(0,canvas.height);
  16. var sin:Number = 0, cos:Number = 0;
  17. var dx:Number = 0, dy:Number = 0;
  18. var pnt:Point = new Point();
  19. var blur:BlurFilter = new BlurFilter(10,10,1);
  20. addEventListener(Event.ENTER_FRAME, onLoop);
  21. function onLoop(evt:Event):void {
  22.     canvas.lock();
  23.     dx += (mouseX * 10 - 3000 - dx) / 8;
  24.     dy += (mouseY * 4 - dy) / 8;
  25.     for (var i:int = 0; i<size; i++){
  26.         var xp:int = i % w;
  27.         var yp:int = int(i * w2);
  28.         var xp2:int = xp <<1;
  29.         var t:Number = (yp * (xp2 + dx) * w10) % 3.14687;
  30.         //compute sine
  31.         // technique from http://lab.polygonal.de/2007/07/18/fast-and-accurate-sinecosine-approximation/
  32.         // by Michael Baczynski
  33.         if (t<0) {
  34.             sin=1.27323954*t+.405284735*t*t;
  35.         } else {
  36.             sin=1.27323954*t-0.405284735*t*t;
  37.         }
  38.         // compute cosine
  39.         t = (xp2 + dy) * convert % 6.28;
  40.         t+=1.57079632;
  41.         if (t>3.14159265) {
  42.             t-=6.28318531;
  43.         }
  44.         if (t<0) {
  45.             cos=1.27323954*t+0.405284735*t*t;
  46.         } else {
  47.             cos=1.27323954*t-0.405284735*t*t;
  48.         }
  49.         var c1:int = 31 * (cos - sin);
  50.         if (c1 <0) c1 = 256 - c1;
  51.         c1 = (c1 <<2 | c1) ;
  52.         pix[i] = c1 <<15 | c1 <<9 | c1;
  53.     }
  54.     canvas.setVector(canvasRect, pix);
  55.     clone.copyPixels(canvas, canvasRect, pnt);
  56.     canvas.draw(clone, m, null, BlendMode.SUBTRACT);
  57.     clone.copyPixels(canvas, canvasRect, pnt);
  58.     clone.applyFilter(clone, canvasRect, pnt, blur);
  59.     canvas.draw(clone, null, null, BlendMode.ADD);
  60.     canvas.applyFilter(canvas, canvas.rect, new Point(0,0), gray);
  61.     canvas.unlock();
  62. }

This snippet creates an interactive animated texture. Originally this texture wasn an unoptimized messy code snippet (see the original post here) - I went through and did a few optimizations to get it running in real-time and this is the result:

Check out the swf over at wonderfl.net...

Also posted in BitmapData, color, pixel manipulation | Tagged , , | Leave a comment

Perlin Outlines

By Zevan | July 31, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height=600, backgroundColor=0xCCCCCC, frameRate=24)]
  2. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x000000);
  3. var blur:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x000000);
  4. addChild(new Bitmap(canvas, "auto", true));
  5.  
  6. var w:int = canvas.width
  7. var hw:int = w / 2;
  8. var size:int = w * w;
  9. var seed:Number = Math.random()*100;
  10. var pnt:Point = new Point();
  11. var dy:Number = 0, dx:Number = 0;
  12. var blr:BlurFilter = new BlurFilter(10,10,1);
  13. addEventListener(Event.ENTER_FRAME, onLoop);
  14. function onLoop(evt:Event):void {
  15.    
  16.     dx += (mouseX - dx) / 4;
  17.     dy += (mouseY - dy) / 4;
  18.     canvas.lock();
  19.     canvas.perlinNoise(hw,hw,2,seed,false, false, 1, true, [new Point(dx, dy), new Point(-dx, -dy)]);
  20.     var pix:Vector.<uint> = canvas.getVector(canvas.rect);
  21.     for (var i:int = 0; i<size; i++){
  22.         var col:uint = 255 - pix[i] <<4 & 0x00FF00;
  23.         pix[i] = col <<8 | col | col>> 8;
  24.     }
  25.     canvas.setVector(canvas.rect, pix);
  26.     blur.copyPixels(canvas, canvas.rect, pnt);
  27.     blur.applyFilter(blur, blur.rect, pnt, blr);
  28.     canvas.draw(blur, null, null, BlendMode.DIFFERENCE);
  29.     canvas.draw(canvas, null, null, BlendMode.INVERT);
  30.     canvas.unlock();
  31. }

This is actually an optimized variation on some recent posts that made use of perlin noise. You can get a wide range of effects by changing just the BlendMode values alone.... I particularly like this combination of BlendModes because it reminds me a bit of a terrain map...

Have a look at the swf...

Also posted in BitmapData, pixel manipulation | Tagged , , | Leave a comment

Wave Trick

By Zevan | July 26, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=800, height=600)]
  2. var dupes:int = 5
  3. var pntNum:int = 180;
  4.  
  5. var hh:Number = stage.stageHeight / 2;
  6. var points:Vector.<Number> = new Vector.<Number>();
  7. var vel:Vector.<Number> = new Vector.<Number>();
  8. var cmds:Vector.<int> = new Vector.<int>();
  9. var vectors:Vector.<Shape> = new Vector.<Shape>();
  10.  
  11. for (var i:int = 0; i<dupes; i++){
  12.     vectors[i] = Shape(addChildAt(new Shape(),0));
  13.     vectors[i].x = 10 * i;
  14.     vectors[i].y = -10 * i;
  15. }
  16. var index:int = 0;
  17. for (i = 0; i<pntNum; i++){
  18.     points[index++] = 10 + i * 4;
  19.     points[index++] = hh;
  20.     cmds[i] = 2;
  21.     vel[i] = 0;
  22. }
  23. cmds[0] = 1;
  24. addEventListener(Event.ENTER_FRAME, onLoop);
  25. function onLoop(evt:Event):void {  
  26.    index = 1;
  27.    points[index] += (mouseY - points[index]) / 12;
  28.    for (var i:int = 3; i<points.length; i+=2){
  29.          points[i] += vel[index];
  30.          vel[index] += ((points[i] - points[i - 2]) * -0.16 - vel[index]) / 4;
  31.          index++;
  32.    }
  33.    for (i = 0; i<dupes; i++){
  34.        var c:uint =  255 - 255 / i;
  35.        with (vectors[i].graphics){
  36.            clear();
  37.            lineStyle(0,c <<16 | c <<8 | c);
  38.            drawPath(cmds, points);
  39.        }
  40.    }
  41. }

This snippet uses elasticity to create an interesting wave effect. I first stumbled upon this technique back in my director days...


Have a look at the swf here...

Also posted in Graphics, motion | Tagged , , | Leave a comment