Category Archives: misc

Slow Circle Drawing

Actionscript:
  1. var canvas:BitmapData = new BitmapData(400,400,false, 0xCCCCCC);
  2. addChild(new Bitmap(canvas));
  3.  
  4. addEventListener(Event.ENTER_FRAME, onLoop);
  5. function onLoop(evt:Event):void {
  6.     canvas.fillRect(canvas.rect, 0xCCCCCC);
  7.    
  8.     var r:Number = Math.abs(200 - mouseX);
  9.     var r2:Number = r * r;
  10.     var inc:Number = 1 / r;
  11.     var xp:Number = .00000001;
  12.     var yp:Number = -r;
  13.     while(yp<r){
  14.           var y:Number = 200 + yp;
  15.           yp += xp * inc;
  16.           xp = Math.sqrt(r2 - yp * yp);
  17.           canvas.setPixel(200 + xp, y, 0x000000);
  18.           canvas.setPixel(200 - xp, y, 0x000000);
  19.      }
  20. }

A slow way to draw circles using setPixel().

Actionscript:
  1. var canvas:BitmapData = new BitmapData(400,400,false, 0xCCCCCC);
  2. addChild(new Bitmap(canvas));
  3.  
  4. addEventListener(Event.ENTER_FRAME, onLoop);
  5. function onLoop(evt:Event):void {
  6.     canvas.fillRect(canvas.rect, 0xCCCCCC);
  7.     var r:Number = Math.abs(200 - mouseX);
  8.     var r2:Number = r * r;
  9.     var inc:Number = 1 / r;
  10.     var xp:Number = .000001;
  11.     var yp:Number = -r;
  12.     while(yp <= 0){;
  13.          var x1:Number = 200 + xp;
  14.          var y1:Number = 200 + yp
  15.          var x2:Number = 200 - xp;
  16.          var y2:Number = 200 - yp;
  17.          canvas.setPixel(x1, y1, 0x000000);
  18.          canvas.setPixel(x1, y2, 0x000000);
  19.          canvas.setPixel(x2, y1, 0x000000);
  20.          canvas.setPixel(x2, y2, 0x000000);
  21.           yp += xp * inc;
  22.           xp = Math.sqrt(r2 - yp * yp);
  23.      }
  24. }

Little better, still slow.

I was brainstorming about a few things today and somehow these two slow circle drawing algorithms popped out. These are pretty useless compared to some of the famous algorithms I've posted in the past. Kind of interesting nevertheless.

Also posted in setPixel | Tagged , | Leave a comment

Save BitmapData to your HD

Actionscript:
  1. import com.adobe.images.JPGEncoder;
  2.  
  3. var jpgEncoder:JPGEncoder = new JPGEncoder(80);
  4. var file:FileReference = new FileReference();
  5. var id:int = 0;
  6.  
  7. var bit:BitmapData = new BitmapData(400, 400, false, 0x000000);
  8. addChild(new Bitmap(bit));
  9.  
  10. stage.addEventListener(MouseEvent.CLICK, onClick);
  11. function onClick(evt:MouseEvent):void{
  12.     // draw some perlin noise
  13.     bit.perlinNoise(200,200, 2, Math.random()*100, true, false,0, true);
  14.     //bit.draw(someClip);
  15.     //bit.draw(someVideo);
  16.     id++;
  17.     file.save(jpgEncoder.encode(bit), "image_" +id+".jpg");
  18. }

This snippet uses the as3corelib which you can download on this page. It uses the JPGEncoder class to save a jpeg image to a users HD. It also makes use of the flash player 10 FileReference.save() method.

I used BitmapData.perlinNoise() to quickly create an arbitrary image.... as the code comments suggest you could easily snapshot a video or other DisplayObject.

Also posted in BitmapData | Tagged , | 3 Comments

ActionScript Wiki

Just wanted to post a link to Joa Ebert's ActionScript Wiki. Looks like there's some great stuff there...

Posted in misc | Tagged , | Leave a comment

more(nesting(functions(graphDrawing)));

Actionscript:
  1. [SWF(width=800, height=600)]
  2.  
  3. var canvas:Graphics;
  4. var graphData:Array = sineData();
  5.  
  6. var graph0:Shape = Shape(addChild(new Shape()));
  7. graph0.x = 50;
  8. graph0.y = 150;
  9.  
  10. var graph1:Shape = Shape(addChild(new Shape()));
  11. graph1.x = 400;
  12. graph1.y = 150;
  13.  
  14. var graph2:Shape = Shape(addChild(new Shape()));
  15. graph2.x = 50;
  16. graph2.y = 400;
  17.  
  18. // use graphData to draw 3 different looking graphs:
  19.  
  20. canvas = graph0.graphics;
  21. axis(lines(graphData));
  22.  
  23. canvas = graph1.graphics;
  24. axis(dots(graphData, 0xFF0000), 0xFFCC00, 2);
  25.  
  26. canvas = graph2.graphics;
  27. axis(dots(dots(lines(lines(graphData, 0xCCCCCC, 20))), 0x0022FF, 0, 4), 0xFF);
  28.  
  29.  
  30. // generate data
  31. function sineData():Array{
  32.     var dat:Array = new Array();
  33.     for (var i:int = 0; i<60; i++){
  34.         dat.push(new Point(i * 4,  (30 + i) * Math.sin(i * 24 * Math.PI/180)));
  35.     }            
  36.     return dat;
  37. }
  38.  
  39. // render lines
  40. function lines(dat:Array, col:uint=0x000000, thick:Number=0):Array{
  41.     canvas.lineStyle(thick, col);
  42.     canvas.moveTo(dat[0].x, dat[0].y)
  43.     for (var i:int = 1; i<dat.length; i++){
  44.          canvas.lineTo(dat[i].x, dat[i].y);
  45.     }
  46.     return dat;
  47. }
  48.  
  49. // render dots
  50. function dots(dat:Array, col:uint=0xFF0000, thick:Number=0, rad:Number=1.5):Array{
  51.     canvas.lineStyle(thick, col);
  52.     for (var i:int = 0; i<dat.length; i++){
  53.          canvas.drawCircle(dat[i].x, dat[i].y, rad);
  54.     }
  55.     return dat;
  56. }
  57.  
  58. // render graph axis
  59. function axis(dat:Array, col:uint=0x000000, thick:Number=0):Array{
  60.     var d:Array = dat.concat();
  61.     d.sortOn("y", Array.NUMERIC);
  62.     var lastIndex:int = d.length - 1;
  63.     var minY:Number = d[0].y;
  64.     var maxY:Number = d[lastIndex].y;
  65.     d.sortOn("x", Array.NUMERIC);
  66.     var minX:Number = d[0].x;
  67.     var maxX:Number = d[lastIndex].x;
  68.     canvas.lineStyle(thick, col, .2);
  69.     canvas.moveTo(minX, 0);
  70.     canvas.lineTo(maxX, 0);
  71.     canvas.lineStyle(thick, col);
  72.     canvas.moveTo(minX, minY);
  73.     canvas.lineTo(minX, maxY);
  74.     canvas.lineTo(maxX, maxY);
  75.     return dat;
  76. }

This is something I've been meaning to post for awhile. Finally had time to write it today... It contains functions that are designed to be nested for the purpose of rendering a small data set in a few different ways...

The upper left image is rendered with axis labels and lines... and it defaults to the color black (line 21):

axis(lines(graphData));

The upper right image is rendered with yellow axis and red dots (line 24):

axis(dots(graphData, 0xFF0000), 0xFFCC00, 2);

etc... (line 27)
axis(dots(dots(lines(lines(graphData, 0xCCCCCC, 20))), 0x0022FF, 0, 4), 0xFF);

Alternatively you could write each function call on one line:

lines(graphData, 0xCCCCCC, 20);
lines(graphData);
dots(graphData);
dots(graphData, 0x0022FF, 0, 4)
axis(graphData, 0xFF);

NOTE: If you think this post is insane, please read the warning page of this site...

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