Vectorpark Style Hemisphere

Actionscript:
  1. const TWO_PI:Number = Math.PI * 2;
  2. const PI_HALF_PI:Number = Math.PI + Math.PI / 2;
  3. x = stage.stageWidth / 2;
  4. y = stage.stageHeight / 2;
  5.  
  6. var runHemisphere:Function = makeHemisphere(0,0, 100,0xFF0000, 0xFFCC00);
  7. var dx:Number = 0;
  8. var dy:Number = 0;
  9.  
  10. addEventListener(Event.ENTER_FRAME, onLoop);
  11. function onLoop(evt:Event):void {
  12.     dx += (mouseX / 50 - dx) / 4;
  13.     dy += (mouseY - dy) / 4;
  14.     runHemisphere(dx, dy);
  15. }
  16. function makeHemisphere(x:Number, y:Number, size:Number, colA:uint, colB:uint):Function{
  17.     var s:Sprite = Sprite(addChild(new Sprite()));
  18.     s.x = x;
  19.     s.y = y;
  20.     var bg:Sprite = Sprite(s.addChild(new Sprite()));
  21.    
  22.     with (bg.graphics) clear(), beginFill(colA), halfCircle(bg.graphics, 0,0 , size);
  23.     var scol:uint = colB;
  24.     var slice:Sprite = Sprite(s.addChild(new Sprite()));
  25.     return function(theta:Number, rot:Number){
  26.          theta %= TWO_PI;
  27.         if (theta <0){
  28.             theta = TWO_PI - -theta;
  29.         }
  30.         var scale:Number = Math.cos(theta);
  31.         if (theta> 1.57){
  32.             scol = colA;
  33.         } else {
  34.             scol = colB;
  35.         }
  36.         if (theta> Math.PI){
  37.             bg.rotation = 180;
  38.         }else{
  39.             bg.rotation = 0;
  40.         }
  41.         if (theta> PI_HALF_PI){
  42.             scol = colB;
  43.         }
  44.         with(slice.graphics) clear(), beginFill(scol), scaleYcircle(slice.graphics,size, scale);
  45.         s.rotation = rot;
  46.     }
  47. }
  48. // original circle function by senocular (www.senocular.com) from here http://www.actionscript.org/forums/showthread.php3?s=&threadid=30328
  49. function halfCircle(g:Graphics, x:Number,y:Number,r:Number):void {
  50.     var c1:Number = r * (Math.SQRT2 - 1);
  51.     var c2:Number = r * Math.SQRT2 / 2;
  52.     var xr:Number = x + r, yr:Number = y + r;
  53.     var x_r:Number = x - r, yc1:Number = y + c1;
  54.     var yc2:Number = y + c2, xc1:Number = x + c1, xc2:Number = x + c2;
  55.     var x_c1:Number = x - c1;
  56.     g.moveTo(xr, y);
  57.     g.curveTo(xr, yc1, xc2, yc2);
  58.     g.curveTo(xc1, yr, x, yr);
  59.     g.curveTo(x - c1,yr, x - c2, yc2);
  60.     g.curveTo(x_r, yc1, x_r, y);
  61. }
  62. // circle that can be scaled on the y axis
  63. function scaleYcircle(g:Graphics, r:Number, s:Number = 1):void {
  64.     var c1:Number = r * (Math.SQRT2 - 1);
  65.     var c2:Number = r * Math.SQRT2 / 2;
  66.     var rs:Number = r * s, c1s:Number = c1 * s, c2s:Number = c2 * s;
  67.     var x_r:Number =  -r, y_r:Number = -rs, x_c2:Number =  -c2;
  68.     var y_c2:Number =  -c2s, x_c1:Number =  -c1, y_c1:Number =  -c1s
  69.     g.moveTo(r, 0), g.curveTo(r, c1s, c2, c2s);
  70.     g.curveTo(c1, rs, 0, rs), g.curveTo(x_c1,rs, x_c2, c2s);
  71.     g.curveTo(x_r, c1s, x_r, 0), g.curveTo(x_r,y_c1,x_c2,y_c2);
  72.     g.curveTo(x_c1,y_r,0,y_r), g.curveTo(c1,y_r,c2,y_c2);
  73.     g.curveTo(r,y_c1,r,0);
  74. }

The above snippet draws a 3D hemisphere using a technique I first saw at vectorpark.com. Vectorpark.com has been around for years and it's an amazing site... if you've never seen it before I highly recommend spending some time there...

When I decided to post the half-circle snippet yesterday... I knew I would be writing this today. It's one of those things I've always thought about doing, but never gotten around to. I show vectorpark.com to my animation class (almost no coding in that class) and we emulate some of the 3D techniques for simple primitives with pure timeline animation. The above is the first time I've tried to emulate one of these techniques with code.

I was pleasantly surprised when visiting vectorpark.com this morning... Patrick Smith has posted some new work there. Really excellent stuff...

UPDATE:
Katopz converted this to a doc class and put it up on wonderfl...

This entry was posted in 3D, Graphics and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

6 Comments

  1. Posted June 12, 2009 at 8:51 am | Permalink

    wow! This is very cool. Anytime you’re doing math like this I learn so much!

  2. Posted June 12, 2009 at 3:36 pm | Permalink

    Thanks Jon :D glad you like it…

  3. Posted June 12, 2009 at 10:11 pm | Permalink

    result for lazy ppl like me ;)

    http://wonderfl.kayac.com/code/62b8340fc4edf6729746f077b504bb8ef994a972

  4. Posted June 13, 2009 at 5:02 am | Permalink

    thanks for putting that on wonderfl… :)

  5. Posted June 13, 2009 at 6:54 pm | Permalink

    Awesome, Zevan! Thanks for sharing, it could be well used.

  6. Posted June 13, 2009 at 9:39 pm | Permalink

    :)

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*