setPixel() Cubic Bezier

By Zevan | October 30, 2008
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData=new BitmapData(280,280,false,0x000000);
  2. addChild(new Bitmap(canvas, PixelSnapping.AUTO, true));
  3.  
  4. var color:uint;
  5.  
  6. // anchor x1, anchor y1,
  7. // control-handle x2, control-handle y2,
  8. // anchor x3, anchor y3, control-handle x4,
  9. // control-handle y4, [resolution incremental value between 0-1]
  10. function cubicBezier(x1:Number, y1:Number, x2:Number, y2:Number,
  11.                           x3:Number, y3:Number, x4:Number, y4:Number, resolution:Number=.03):void {
  12.    
  13.     var b:Number,pre1:Number,pre2:Number,pre3:Number,pre4:Number;
  14.     for (var a = 0; a <1; a+=resolution) {
  15.         b=1-a;
  16.         pre1=(a*a*a);
  17.         pre2=3*(a*a)*b;
  18.         pre3=3*a*(b*b);
  19.         pre4=(b*b*b);
  20.         canvas.setPixel(pre1*x1 + pre2*x2 + pre3*x4 + pre4*x3 ,
  21.                          pre1*y1 + pre2*y2 + pre3*y4 + pre4*y3, color);
  22.     }
  23. }
  24.  
  25. // draw a few
  26.  
  27. color = 0xFFFFFF;
  28.  
  29. cubicBezier(100,100,
  30.                     150, 50,
  31.                     200, 100,
  32.                     150, 150);
  33.  
  34. color = 0xFF0000;
  35.  
  36. cubicBezier(10,10,
  37.                     150, 10,
  38.                     200, 200,
  39.                     250, 150,
  40.                 .01);
  41. /*
  42. WARNING: This code was written for fun. Use at your own risk.
  43. */

This draws cubic bezier curves with setPixel. I'm pretty sure I picked up the original math from somewhere on the processing forums in '03 or '04...

Posted in BitmapData, bezier, setPixel | Tagged | Leave a comment

Readable Radial Gradient

By Zevan | October 28, 2008
CLICK HERE TO COPY
Actionscript:
  1. var size:Number = 400;
  2. var halfSize:Number = size / 2;
  3. var canvas:BitmapData = new BitmapData(size, size,false, 0x000000);
  4. addChild(new Bitmap(canvas, PixelSnapping.AUTO, true));
  5.  
  6. var rings:Number = 40;
  7. var color:uint, theta:Number, dx:Number, dy:Number;
  8.  
  9. for (var i:int = 0; i<canvas.width; i++){
  10.     for (var j:int = 0; j<canvas.height; j++){
  11.         // distance from center of canvas to current x, y coord
  12.         dx = i - halfSize;
  13.         dy = j - halfSize;
  14.         theta = Math.sqrt((dx * dx)+(dy * dy)) * rings;
  15.         color = (100 + 100  * Math.sin(theta * Math.PI/180)) <<16;
  16.         canvas.setPixel(i,  j, color);
  17.     }
  18. }
  19.  
  20. /*
  21. WARNING: This code was written for fun. Use at your own risk.
  22. */

This is the previous post written in a readable way. Draws a radial gradient using pythagorean theorem and sine.

Posted in BitmapData, pixel manipulation, setPixel | Leave a comment

setPixel() Radial Gradient

By Zevan | October 28, 2008
CLICK HERE TO COPY
Actionscript:
  1. // add a BitmapData object to the stage in one line:
  2. addChild(new Bitmap(new BitmapData(200,200,false,0x00000)));
  3.  
  4. // draw a radial gradient
  5. for (var i:int = 0; i<200; i++) for (var j:int = 0; j<200; j++)
  6. Bitmap(getChildAt(0)).bitmapData.setPixel( i, j, 100 + 100 * Math.sin(Math.sqrt(Math.pow(i - 100, 2)+Math.pow(j - 100, 2)) * 40 * Math.PI/180) <<16 );
  7.  
  8. /*
  9. WARNING: This code was written for fun. Use at your own risk.
  10. */

Next I'll post a readable version, just wanted to see how compact I could get this...

This was inspired by all the pixel bender stuff that I've seen. I did the same thing with setVector() - will post about setVector() in the future.

Posted in BitmapData, pixel manipulation, setPixel | Tagged , , | Leave a comment

MovieClip Random Frame

By Zevan | October 28, 2008
CLICK HERE TO COPY
Actionscript:
  1. myClip.gotoAndStop(int(Math.random() * myClip.totalFrames + 1));

An easy way to make a MovieClip go to a random frame. In the future I may post a demo of this technique.

Posted in MovieClip, random | Leave a comment