Category Archives: setPixel

setPixel() Flames Attractor

By Zevan | March 7, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height = 600)]
  2. var a:Number = 0.02;
  3.  
  4. var xn:Object = new Object();
  5.  
  6. var scale:Number = 20;
  7. var iterations:Number = 10000;
  8.  
  9. var canvas:BitmapData = Bitmap(addChild(new Bitmap(new BitmapData(600,600,false,0xEFEFEF)))).bitmapData;
  10.  
  11. addEventListener(Event.ENTER_FRAME, onLoop);
  12. function onLoop(evt:Event):void {
  13.    
  14.     canvas.fillRect(canvas.rect, 0xEFEFEF);
  15.     a = mouseX / 100;
  16.    
  17.     // equations from here: http://www.discretedynamics.net/Attractors/Flames.htm
  18.     // i used object syntax so that I could really reflect the math notation, changing these to
  19.     // 3 variables will significantly improve performance:
  20.     xn["n-1"] =  mouseX / 200;
  21.     xn["n"] =   mouseY / 200;
  22.     xn["n+1"] = 0;
  23.    
  24.     for (var i:int = 0; i<iterations; i++){
  25.          
  26.           xn["n+1"] = ((a * xn["n"]) / (1 + (xn["n-1"] * xn["n-1"]))) - ((xn["n-1"]) / (1 + (xn["n"] * xn["n"])));
  27.          
  28.           canvas.setPixel( 280 + xn["n-1"] * scale, 300 + xn["n"] * scale, 0x000000);
  29.          
  30.           xn["n-1"] = xn["n"];
  31.           xn["n"] = xn["n+1"];
  32.     }
  33. }

This is an attractor that vaguely resembles flames, I wrote this code so that it would be very similar to the math notation to help anyone who wonders how to go from notation to code. You could replace the Object syntax with 3 separate variables for increased performance.

See the equation here:
http://www.discretedynamics.net/Attractors/Flames.htm


This snippet will create something that looks like this and is reactive to the mouse location

Posted in setPixel | Tagged , | Leave a comment

(HSV HSB) to RGB

By Zevan | February 16, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=720,height=360,backgroundColor=0x000000,frameRate=30)]
  2.  
  3. // ported from here:
  4. //http://www.cs.rit.edu/~ncs/color/t_convert.html
  5.  
  6. function hsv(h:Number, s:Number, v:Number):Array{
  7.     var r:Number, g:Number, b:Number;
  8.     var i:int;
  9.     var f:Number, p:Number, q:Number, t:Number;
  10.      
  11.     if (s == 0){
  12.         r = g = b = v;
  13.         return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  14.     }
  15.    
  16.     h /= 60;
  17.     i  = Math.floor(h);
  18.     f = h - i;
  19.     p = v *  (1 - s);
  20.     q = v * (1 - s * f);
  21.     t = v * (1 - s * (1 - f));
  22.    
  23.     switch( i ) {
  24.         case 0:
  25.             r = v;
  26.             g = t;
  27.             b = p;
  28.             break;
  29.         case 1:
  30.             r = q;
  31.             g = v;
  32.             b = p;
  33.             break;
  34.         case 2:
  35.             r = p;
  36.             g = v;
  37.             b = t;
  38.             break;
  39.         case 3:
  40.             r = p;
  41.             g = q;
  42.             b = v;
  43.             break;
  44.         case 4:
  45.             r = t;
  46.             g = p;
  47.             b = v;
  48.             break;
  49.         default:        // case 5:
  50.             r = v;
  51.             g = p;
  52.             b = q;
  53.             break;
  54.     }
  55.     return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  56. }
  57.  
  58.  
  59. //
  60. //  -- test it out by drawing a few things
  61. //
  62.  
  63. var canvas:BitmapData = new BitmapData(720, 360, false, 0x000000);
  64.  
  65. addChild(new Bitmap(canvas));
  66.  
  67. canvas.lock();
  68. var size:int = canvas.width * canvas.height;
  69. var xp:int, yp:int, c:Array, i:int;
  70.  
  71. for (i = 0; i<size; i++){
  72.     xp = i % 360;
  73.     yp = i / 360;
  74.     c =  hsv(xp, 1, yp / 360);
  75.     canvas.setPixel(xp, yp, c[0] <<16 | c[1] <<8 | c[2]);
  76. }
  77.  
  78. var dx:Number, dy:Number, dist:Number, ang:Number;
  79.  
  80. for (i = 0; i<size; i++){
  81.     xp = i % 360;
  82.     yp = i / 360;
  83.     dx = xp - 180;
  84.     dy = yp - 180;
  85.     dist = 1 - Math.sqrt((dx * dx) + (dy * dy)) / 360;
  86.     ang = Math.atan2(dy, dx) / Math.PI * 180;
  87.     if (ang <0){
  88.         ang += 360;
  89.     }
  90.     c =  hsv(ang, 1, dist);
  91.     canvas.setPixel(360 + xp, yp, c[0] <<16 | c[1] <<8 | c[2]);
  92. }
  93. canvas.unlock();

This is one of those things I've been meaning to play with for awhile. The above demos a function called hsv() which takes 3 arguments: angle (0-360), saturation(0-1) and value(0-1). The function returns an array of rgb values each with a range of (0-255).

There's some room for optimization here, but for clarity I left as is. Even just playing with HSV (also know as HSB) for a few minutes, I see some interesting potential for dynamically generating color palettes for generative style experiments.

I looked around for the most elegant looking code snippet to port in order to write this... I eventually stumbled upon this great resource.

If you test the above on your timeline it will generate this image:

I usually only post one snippet a day... not sure why I decided to post two today.

Also posted in BitmapData, color, graphics algorithms, pixel manipulation | Tagged , , | 6 Comments

Visualizing Binary Numbers Part 2

By Zevan | February 4, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=900,height=390,backgroundColor=0x000000,frameRate=30)]
  2.  
  3. var canvas:BitmapData=new BitmapData(4,8,false,0xFFFFFFFF);
  4. var pixNum:int = canvas.width * canvas.height;
  5.  
  6. var frame:Bitmap = Bitmap(addChild(new Bitmap(canvas)));
  7. frame.scaleX = frame.scaleY = canvas.width * 10;
  8. frame.x = stage.stageWidth / 2 - frame.width / 2;
  9. frame.y =20;
  10.  
  11. var txt:TextField = TextField(addChild(new TextField()));
  12. txt.autoSize = TextFieldAutoSize.LEFT;
  13. txt.defaultTextFormat = new TextFormat("Verdana", 8, 0xFFFFFF);
  14. txt.x = frame.x - 3;
  15. txt.y = frame.y + frame.height + 10;
  16.  
  17. var s:String, a:Number = 0, d:Number = 0;
  18. var r:Number = 0xFFFFFFFF / (stage.stageWidth-20) ;
  19.  
  20. addEventListener(Event.ENTER_FRAME, onLoop);
  21. function onLoop(evt:Event):void {
  22.      a  += (d - a) / 8;
  23.      
  24.      d = (mouseX-10) * r;
  25.      
  26.      s = Math.max(0,Math.min(0xFFFFFFFF, a)).toString(2);
  27.    
  28.      if (s.length <pixNum){
  29.         while(s.length-1 <pixNum){
  30.             s = "0" + s;
  31.         }
  32.      }
  33.      
  34.      txt.text = s;
  35.    
  36.     canvas.lock();
  37.     canvas.fillRect(canvas.rect, 0xFFFFFF);
  38.     for (var i:int = 0; i<pixNum; i++){
  39.         if (s.charAt(i) == "0"){
  40.             canvas.setPixel(i % 4,  i / 4, 0x000000);
  41.         }
  42.     }
  43.     canvas.unlock();
  44. }

Similar to yesterdays post... this snippet visualizes binary numbers. Move your mouse left and right to change the value of the number that's being displayed.

Here are a few stills:

This code uses the mouse position to choose which binary number to display. Going all the way to the left of the screen will set this number to 0 and going all the way to the right will set it to 4294967295... that number may look arbitrary unless you see it in in binary 11111111111111111111111111111111 or in hexadecimal 0xFFFFFFFF.

Also posted in BitmapData | Tagged , | Leave a comment

Point.polar() Stars

By Zevan | January 23, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=700, height=400, backgroundColor=0x000000, frameRate=30)]
  2.  
  3. var points:Array = new Array();
  4. var index:int = -1;
  5. function polar(thetaInc:Number, radius:Number):Point{
  6.     index++;
  7.     if (!points[index]) points[index] = 0;
  8.     return Point.polar(radius, points[index] += thetaInc)
  9. }
  10. ///////////////////////////////////////////////////
  11. // test it out:
  12.  
  13. var canvas:BitmapData = new BitmapData(700, 400, false, 0xFFFFFF);
  14.  
  15. addChild(new Bitmap(canvas, "auto", true));
  16.  
  17. var p0:Point = new Point(200, 200);
  18. var p1:Point = new Point(500, 200);
  19.  
  20. addEventListener(Event.ENTER_FRAME, onLoop);
  21. function onLoop(evt:Event):void {
  22.    
  23.     var rad:Point = polar(.05, 4);
  24.      
  25.     for (var i:int= 0; i<100; i++){
  26.        
  27.         // reset index;
  28.         index = -1;
  29.        
  30.         p0 = p0.add(polar(.025, 2).add(polar(-.05,rad.x)));
  31.         canvas.setPixel(p0.x, p0.y, 0x000000);
  32.        
  33.         p1 = p1.add(polar(.025, 2).add(polar(-.05,rad.x).add(polar(.1, rad.y))));
  34.         canvas.setPixel(p1.x, p1.y, 0x000000);
  35.     }
  36. }

This is pretty much the same as yesterdays... I just changed the way I use the polar() function to draw two more shapes:

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