Tag Archives: flash

Tooth Curve (modified Bicuspid)

By Zevan | April 5, 2009
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData=new BitmapData(400,400,false,0xCCCCCC);
  2. addChild(new Bitmap(canvas));
  3.  
  4. var a:Number=-1.21;
  5. var r:Rectangle=new Rectangle(0,0,3,5);
  6. var halfWidth:Number=canvas.width/2;
  7. var halfHeight:Number=canvas.height/2;
  8.  
  9. render();
  10.  
  11. function render():void{
  12.     for (var x:Number = -2; x<=2; x+=.05) {
  13.         for (var y:Number = -2; y<=2; y+=.05) {
  14.    
  15.             // equation from : http://en.wikipedia.org/wiki/Bicuspid_curve
  16.             //(x^2 - a^2) * (x - a)^2 + (y^2 - a^2) * (y^2 - a^2) = 0
  17.    
  18.             // unpoptimized:
  19.             // var e:Number = (x*x - a*a) * (x-a)*(x-a) + (y*y-a*a) * (y*y-a*a);  
  20.             // optimized:
  21.             var x_a:Number=x-a;
  22.             // factoring: x^2 - a^2 = (x + a) * (x - a)
  23.             var y2_a2:Number =  (y + a) * (y - a);
  24.             var e:Number = (x + a) * x_a * x_a * x_a +  y2_a2 * y2_a2;
  25.    
  26.             // tolerance beetween .7 & -.1;
  27.             if (e<.7&&e>-.1) {
  28.                 r.x=halfWidth+y*50;
  29.                 r.y=halfHeight-x*100;
  30.                 canvas.fillRect(r, 0x000000);
  31.             }
  32.         }
  33.     }
  34. }

I've been looking for a single math equation to draw a tooth for sometime.... today I stumbled upon this... and realized it could probably be changed to look more like a tooth.

This snippet will draw this:

I'm using a graphing method here that allows me to use the Cartesian form of the equation and not the parameteric... I'll explain a bit more about this in a later post.

Posted in BitmapData, Math | Also tagged | 1 Comment

Slider Navigation

By Zevan | April 5, 2009
CLICK HERE TO COPY
Actionscript:
  1. var thumbNum:Number = 20;
  2. var spacing:Number = 10;
  3. var thumbs:MovieClip = new MovieClip();
  4. addChild(thumbs);
  5. for (var i:int = 0; i<thumbNum; i++){
  6.     var t:MovieClip = new MovieClip();
  7.     with(t.graphics) beginFill(0x666666), drawRect(0,0,100,50);
  8.     t.x = i * (t.width + spacing);
  9.     t.y = 5;
  10.     t.buttonMode = true;
  11.     thumbs.addChild(t);
  12. }
  13. var minX:Number = stage.stageWidth - thumbs.width - spacing;
  14. var destX:Number = thumbs.x = spacing;
  15. var velX:Number = 10;
  16. var stageThird:Number =  stage.stageWidth / 3;
  17. var right:Number = stageThird * 2;
  18. var left:Number  = stageThird;
  19. addEventListener(Event.ENTER_FRAME, onLoop);
  20. function onLoop(evt:Event):void {
  21.     if (mouseX> right){
  22.        destX -= velX;
  23.     }
  24.     if (mouseX <left){
  25.         destX += velX;
  26.     }
  27.     if (destX <minX){
  28.         destX = minX;
  29.     }
  30.     if (destX> spacing){
  31.         destX = spacing;
  32.     }
  33.     thumbs.x += (destX - thumbs.x) /4;
  34. }

This snippet shows a technique for a common type of navigation.

Posted in UI, motion | Also tagged | Leave a comment

BitmapData Snapshot Grid

By Zevan | April 4, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=600,height=650)]
  2. var canvas:BitmapData=Bitmap(addChild(new Bitmap(new BitmapData(600,300,false,0xCCCCCC),"auto",true))).bitmapData;
  3. var stills:BitmapData=Bitmap(addChild(new Bitmap(new BitmapData(600,380,false,0xAAAAAA),"auto",true))).bitmapData;
  4. getChildAt(1).y=300;
  5.  
  6. var c:Shape = new Shape();
  7. var m:Matrix = new Matrix();
  8. m.createGradientBox(40, 40, 0, 0, 0);
  9. c.graphics.beginGradientFill(GradientType.RADIAL, [0xCC0000, 0xCC0000],  [1, 0], [0, 255], m);
  10. c.graphics.drawCircle(20,20,20);
  11.  
  12. addEventListener(Event.ENTER_FRAME, onLoop);
  13. function onLoop(evt:Event):void {
  14.     c.x=mouseX-c.width/2;
  15.     c.y=mouseY-c.height/2;
  16.     canvas.draw(c, c.transform.matrix);
  17. }
  18.  
  19. var spacing:Number = 10;
  20. var cols:Number = 4;
  21. var max:Number = cols * cols;
  22. var size:Number = 1/(canvas.width/((canvas.width / cols) - spacing));
  23. var st:Matrix = new Matrix();
  24. st.scale(size, size);
  25. var w:Number = canvas.width * st.d  + spacing;
  26. var h:Number = canvas.height * st.d + spacing;
  27. var timer:Timer=new Timer(500);
  28. timer.start();
  29. timer.addEventListener(TimerEvent.TIMER, onCapture);
  30. function onCapture(evt:TimerEvent):void {
  31.     var inc:int = timer.currentCount - 1;
  32.     st.tx = (inc% cols) * w+ spacing / 2;
  33.     st.ty = int(inc / cols) * h + spacing;
  34.     stills.draw(canvas, st);
  35.     if (timer.currentCount==max) {
  36.         timer.reset();
  37.         timer.start();
  38.     }
  39. }

Take snapshots of a given BitmapData and arrange them in a grid. I wrote this snippet quickly in response to a question so it could probably use a little clean up...

You'll need to move your mouse over the large canvas bitmap (drawing to it) to see anything...

Posted in BitmapData | Also tagged | Leave a comment

Slow Circle Drawing

By Zevan | April 3, 2009
CLICK HERE TO COPY
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().

CLICK HERE TO COPY
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.

Posted in misc, setPixel | Also tagged | Leave a comment