Tag Archives: actionscript

Sierpiński Glitch Texture #2

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

Posted in BitmapData, Operators, Vector, pixel manipulation | Also tagged , | Leave a comment

Sierpiński Glitch Texture #1

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) * (xp + dx) *w10) % 6.14687;
  31.        
  32.         //compute sine
  33.         // technique from http://lab.polygonal.de/2007/07/18/fast-and-accurate-sinecosine-approximation/
  34.         // by Michael Baczynski
  35.         if (t<0) {
  36.             sin=1.27323954*t+.405284735*t*t;
  37.         } else {
  38.             sin=1.27323954*t-0.405284735*t*t;
  39.         }
  40.         // compute cosine
  41.         t = (xp2 + dy) * convert % 6.28;
  42.         t+=1.57079632;
  43.         if (t>3.14159265) {
  44.             t-=6.28318531;
  45.         }
  46.         if (t<0) {
  47.             cos=1.27323954*t+0.405284735*t*t;
  48.         } else {
  49.             cos=1.27323954*t-0.405284735*t*t;
  50.         }
  51.         var c1:int = 31 * (sin - cos);
  52.         if (c1 <0) c1 = 256 - c1;
  53.         c1 = (c1 <<3 | c1) ;
  54.         pix[i] = c1 <<15 | c1 <<8 | c1;
  55.     }
  56.     canvas.setVector(canvasRect, pix);
  57.     clone.copyPixels(canvas, canvasRect, pnt);
  58.     canvas.draw(clone, m, null, BlendMode.SUBTRACT);
  59.     clone.copyPixels(canvas, canvasRect, pnt);
  60.     clone.applyFilter(clone, canvasRect, pnt, blur);
  61.     canvas.draw(clone, null, null, BlendMode.ADD);
  62.     canvas.unlock();
  63. }

More strange real-time texture generation. This one is particularly glitchy looking with hints of Sierpiński.


Check out the swf at wonderfl.net...

Posted in Uncategorized | Also tagged , | 4 Comments

Interesting Texture #3 (animated)

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

Posted in BitmapData, Vector, color, pixel manipulation | Also tagged , | Leave a comment

QuickBox2D Unicycler

Actionscript:
  1. import com.actionsnippet.qbox.*;
  2. import Box2D.Common.Math.*;
  3. import Box2D.Dynamics.Joints.*;
  4. [SWF (backgroundColor=0x000000, width=700, height=600, frameRate=60)]
  5. var sim:QuickBox2D = new QuickBox2D(this, {debug:false,gravityY:10, renderJoints:false});
  6. sim.setDefault({fillColor:0xCC0000,lineAlpha:0});
  7. sim.createStageWalls();
  8.  
  9. for (var i:int = 0; i<20; i++){
  10.     sim.addCircle({x:1+i * 0.8, y:1, radius:0.1+Math.random()*0.1, restitution:0.3});
  11. }
  12.  
  13. sim.setDefault({fillColor:0xEFEFEF, fillAlpha:0.5, lineColor:0xFFFFFF, groupIndex:-2});
  14. var ancA:QuickObject = sim.addCircle({x:20, y:12, radius:0.5, density:0, skin:"none"});
  15. var ancB:QuickObject = sim.addCircle({x:20, y:2, radius:0.5, density:0, skin:"none"});
  16. var head:QuickObject = sim.addCircle({x:0, y:-0.6, radius:0.5});
  17. var neck:QuickObject = sim.addBox({x:0, y:1, width:0.5, height:2});
  18. var spindle:QuickObject = sim.addBox({x:0, y:3, width:0.1, height:2})
  19. spindle.userData.visible = false;
  20. var top:QuickObject = sim.addGroup({objects:[head, neck, spindle], x:10, y:5, fixedRotation:true});
  21. var upperLegA:QuickObject = sim.addBox({x:10, y:7.5, width:0.25, height:1.5});
  22. var lowerLegA:QuickObject = sim.addBox({x:10, y:9, width:0.25, height:1.5});
  23. var wheel:QuickObject = sim.addCircle({x:10, y:9, radius:1});
  24. var upperLegB:QuickObject = sim.addBox({x:10, y:7.5, width:0.25, height:1.5});
  25. var lowerLegB:QuickObject = sim.addBox({x:10, y:9, width:0.25, height:1.5});
  26. var upperArmA:QuickObject = sim.addBox({x:10.7, y:5.25, width:1.5, height:0.25});
  27. var lowerArmA:QuickObject = sim.addBox({x:11.8, y:5.25, width:1.2, height:0.25});
  28. var upperArmB:QuickObject = sim.addBox({x:9.5, y:5.25, width:1.5, height:0.25});
  29. var lowerArmB:QuickObject = sim.addBox({x:8.4, y:5.25, width:1.2, height:0.25});
  30. var anchor:b2Vec2 = new b2Vec2();
  31. function connect(a:QuickObject, b:QuickObject, lower:Number, upper:Number, offX:Number=0, offY:Number = 0):QuickObject{
  32.      var min:Number = Math.min(a.y, b.y);
  33.      var max:Number = Math.max(a.y, b.y);
  34.      anchor.y = min + (max - min) * 0.5 + offY;
  35.      min = Math.min(a.x, b.x);
  36.      max = Math.max(a.x, b.x);
  37.      anchor.x = min + (max - min) * 0.5 + offX;
  38.      return sim.addJoint({type:"revolute", a:a.body, b:b.body, x1:anchor.x, y1:anchor.y, lowerAngle:lower, upperAngle:upper});
  39. }
  40. sim.addJoint({type:"revolute", a:wheel.body, b:top.body, x1:wheel.x, y1:wheel.y});
  41. sim.addJoint({type:"revolute", a:lowerLegA.body, b:wheel.body, x1:lowerLegA.x, y1:lowerLegA.y + 0.7});
  42. sim.setDefault({enableLimit:true});
  43. connect(top, upperArmA, 0, 3, -.3, .1);
  44. connect(upperArmA, lowerArmA, -2.5, -1, 0, 0);
  45. connect(top, upperArmB, -3, 0, .3, .1);
  46. connect(upperArmB, lowerArmB, -2.5, -1, 0, 0);
  47. sim.addJoint({type:"distance", a:lowerArmA.body, b:ancA.body, frequencyHz:0.3});
  48. sim.addJoint({type:"distance", a:lowerArmB.body, b:ancB.body, frequencyHz:0.3});
  49. sim.setDefault({enableLimit:true});
  50. connect(top, upperLegA, -6.28, 6, 0, 0.8);
  51. connect(upperLegA, lowerLegA, .1, 6);
  52. wheel.angle = Math.PI;
  53. connect(top, upperLegB, -6.28, 6, 0, 0.8);
  54. connect(upperLegB, lowerLegB, .1, 6);
  55. sim.setDefault({enableLimit:false, type:"revolute"});
  56. sim.addJoint({a:lowerLegB.body, b:wheel.body, x1:lowerLegB.x, y1:lowerLegB.y + 0.7});
  57.  
  58. sim.start();
  59. sim.mouseDrag();
  60.  
  61. var sd:Number = 5, s:Number = 0, t:Number = 0;
  62. addEventListener(Event.ENTER_FRAME, function():void{
  63.     top.angle = Math.cos(t += 0.05) * 0.2;
  64.     if (top.x> 19) sd = -5
  65.     if (top.x <5) sd = 5;
  66.     s += (sd - s) / 8;
  67.     wheel.body.SetAngularVelocity(s);
  68. });

This chunk of code uses QuickBox2D to create a simple looking character riding a unicycle...

Have a look at the swf...

Posted in Box2D, QuickBox2D, motion | Also tagged , , , | 9 Comments