Category Archives: setPixel

Texture cos(atan2())

By Zevan | December 12, 2008
CLICK HERE TO COPY
Actionscript:
  1. var col:int, i:int, j:int, s:int = 500, div:Number =20, outcoord:Point = new Point(), points:Vector.<Point> = new Vector.<Point>();
  2. for (i = 0; i<5; i++) points.push(new Point(int(Math.random()*s),int(Math.random()*s)));
  3. var canvas:Bitmap = Bitmap(addChild(new Bitmap(new BitmapData(s,s, false, 0xFF0000), "auto", true)));
  4. for (i  = 0; i<canvas.width * canvas.height; i++){
  5.     outcoord= new Point( i % canvas.width, i / canvas.width);
  6.     col = 0;
  7.     for (j= 0; j<points.length; j++) col += Math.max(0,255 * Math.cos(Math.atan2(outcoord.y - points[j].y, outcoord.x - points[j].x)*outcoord.x/div) );
  8.     col /= points.length;
  9.     canvas.bitmapData.setPixel(outcoord.x, outcoord.y,  col <<16 |  col <<8 |  col);
  10. }

This is inspired by some stuff I've been doing with PixelBender. I think I'm going to convert this to processing to see how fast I can get it to run... will post that over at shapevent. People have been asking me to post swfs.... and I plan on starting to that a little bit... but since this one doesn't animate, here are a few jpgs:

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

3D Shape

By Zevan | November 26, 2008
CLICK HERE TO COPY
Actionscript:
  1. stage.frameRate = 30;
  2. var centerX:Number = 200, centerY:Number = 200, zpos:Number, xpos:Number, ypos:Number, depth:Number;
  3. var rotX:Number = 0, rotY:Number = 0, px:Number, py:Number, pz:Number;
  4. var cosx:Number, cosy:Number, sinx:Number, siny:Number;
  5.  
  6. var canvas:BitmapData = new BitmapData(400,400,true,0xFF000000);
  7. addChild(new Bitmap(canvas));
  8.  
  9. addEventListener(Event.ENTER_FRAME, onLoop);
  10.  
  11. function onLoop(evt:Event):void {
  12.     canvas.fillRect(canvas.rect, 0xFF000000);
  13.      rotX += (mouseX / 50 - rotX)/12;
  14.      rotY += (mouseY / 50 - rotY)/12;
  15.      
  16.      cosx = Math.cos(rotX);
  17.      cosy = Math.cos(rotY);
  18.      sinx = Math.sin(rotX);
  19.      siny = Math.sin(rotY);
  20.      for (var a:Number =0; a <6.28; a+=.1){
  21.           for (var b:Number =0; b <6.28; b+=.05){
  22.               px = 100 * Math.cos(a) * Math.cos(b) * Math.cos(b);
  23.               py = 100 * Math.sin(a) * Math.cos(b)
  24.               pz = 100 * Math.sin(b);
  25.               zpos= pz*cosx - px*sinx  ;
  26.               xpos= pz*sinx +px*cosx  ;
  27.               ypos= py*cosy - zpos*siny  ;
  28.               zpos= py*siny+ zpos*cosy ;
  29.               depth = 1/((zpos/340)+1);
  30.               canvas.setPixel((xpos * depth) + centerX, (ypos * depth) + centerY, 0xFFFFFF);
  31.           }
  32.      }
  33. }

Renders a rotating 3D shape.

Also posted in BitmapData | Tagged , , | 5 Comments

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

Also posted in BitmapData, bezier | 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.

Also posted in BitmapData, pixel manipulation | Leave a comment