Category Archives: 3D

Torus 3D

By Zevan | March 22, 2009
CLICK HERE TO COPY
Actionscript:
  1. stage.frameRate = 30;
  2. const TWO_PI:Number = Math.PI * 2;
  3. var centerX:Number = 200;
  4. var centerY:Number = 200;
  5. var p:Array = new Array();
  6. var zpos:Number;
  7. var xpos:Number;
  8. var ypos:Number;
  9. var depth:Number;
  10. var canvas:BitmapData = new BitmapData(400,400,true,0xFF000000);
  11. addChild(new Bitmap(canvas));
  12.  
  13. var dy:Number = 0
  14. var dx:Number = 0;
  15.  
  16. addEventListener(Event.ENTER_FRAME, onLoop);
  17. function onLoop(evt:Event):void {
  18.     canvas.fillRect(canvas.rect, 0xFF000000);
  19.      
  20.      dx += (mouseX / 100 - dx)/12;
  21.      dy += (mouseY / 100 - dy)/12;
  22.      var xp:Number, yp:Number, zp:Number;
  23.      
  24.      canvas.lock();
  25.      for (var a:Number =0; a <TWO_PI; a+=.08){
  26.           for (var b:Number =0; b <TWO_PI; b+=.08){
  27.               xp = (70 + 40 * Math.cos(a)) * Math.cos(b) ;
  28.               yp = (70 + 40 * Math.cos(a)) * Math.sin(b);
  29.               zp =  40 * Math.sin(a);
  30.               calc3D(xp, yp, zp, dx, dy);
  31.               convert3D();
  32.               canvas.setPixel(p[0], p[1], 0xFFFFFF);
  33.           }
  34.      }
  35.      canvas.unlock();
  36. }
  37. function calc3D(px:Number, py:Number, pz:Number, rotX:Number=0, rotY:Number=0):void {
  38.     // I first learned this from code by Andries Odendaal - www.wireframe.co.za
  39.     zpos=pz*Math.cos(rotX)-px*Math.sin(rotX) ;
  40.     xpos=pz*Math.sin(rotX)+px*Math.cos(rotX) ;
  41.     ypos=py*Math.cos(rotY)-zpos*Math.sin(rotY) ;
  42.     zpos=py*Math.sin(rotY)+zpos*Math.cos(rotY);
  43. }
  44. function convert3D():void {
  45.     depth = 1/((zpos/200)+1);
  46.     p[0] =  xpos * depth + centerX;
  47.     p[1] =  ypos * depth + centerY;
  48. }

This code draws a rotating 3D torus using setPixel().

Also posted in BitmapData | Tagged , | Leave a comment

Parallax Displacement Map w/BlendMode

By Zevan | January 20, 2009
CLICK HERE TO COPY
Actionscript:
  1. var blends:Array = [BlendMode.ADD, BlendMode.DARKEN, BlendMode.DIFFERENCE, BlendMode.HARDLIGHT, BlendMode.INVERT, BlendMode.LIGHTEN, BlendMode.MULTIPLY, BlendMode.OVERLAY, BlendMode.SCREEN, BlendMode.SUBTRACT];

and a little later...

CLICK HERE TO COPY
Actionscript:
  1. displace.perlinNoise(150,150, 3, 30, true, false,0,true);
  2. var currentBlend:String = blends[ blendCount % blends.length];
  3. displace.draw(radial, null ,null, currentBlend);
  4. blendCount++;

The above are excepts from a recommendation I made in the comments of yesterdays post...


Try some different blend modes.... take a look at the swf here.

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

Parallax Displacement Map

By Zevan | January 19, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=500, height=500, backgroundColor=0xCCCCCC, frameRate=30)]
  2.  
  3. var canvas:BitmapData = new BitmapData(500, 500, true, 0xFF000000);
  4. addChild(new Bitmap(canvas));
  5.  
  6. // create a radial gradient
  7. var radial:Shape = new Shape();
  8. var m:Matrix = new Matrix()
  9. m.createGradientBox(500,500,0,0,0);
  10. radial.graphics.beginGradientFill(GradientType.RADIAL, [0xFFFFFF, 0x000000], [1, 1], [0, 200], m, SpreadMethod.PAD);
  11.  
  12. radial.graphics.drawRect(0,0,500,500);
  13. radial.x = radial.y = 0;
  14.  
  15. var displace:BitmapData = new BitmapData(500, 500, false,0xFF000000);
  16. displace.perlinNoise(150,150, 3, 30, true, false,0,true);
  17.  
  18. // try different blendmodes here
  19. displace.draw(radial, null ,null, BlendMode.LIGHTEN);
  20.  
  21. var displacementMap:DisplacementMapFilter = new DisplacementMapFilter(displace, new Point(0,0), 1, 1,  0, 0, DisplacementMapFilterMode.WRAP);
  22.  
  23. var scale:Number = 50 / stage.stageWidth;
  24.  
  25. addEventListener(Event.ENTER_FRAME, onLoop);
  26. function onLoop(evt:Event):void {
  27.  
  28.     canvas.copyPixels(displace, canvas.rect, new Point(0,0));
  29.      
  30.     displacementMap.scaleX = 25 - mouseX  * scale ;
  31.     displacementMap.scaleY = 25 - mouseY  * scale ;
  32.    
  33.     canvas.applyFilter(canvas, canvas.rect, new Point(0,0), displacementMap);
  34. }

This one is hard to describe, so take a look at the swf first.

I think displacement maps are underused - they're very powerful. In this snippet I use a DisplacementMapFilter to create a parallax effect on some perlin noise and a radial gradient. The result is an abstract texture that looks 3D.

I got the idea from a demo for the alternative game engine. The first time I saw this demo I had no idea how they were doing it... but after looking at it a few times, I noticed some distortion around the neck area of the model... at that point I recognized it as a displacement map and whipped up a demo (using a drawings as the source image). The alternativa demo also has some color stuff happening to simulate lighting... I'm assuming that's done with a ColorMatrixFilter or two, but I'm not sure.

As in the alternativa demo, this technique could be used with 2 images... one depth map rendered out from your favorite 3D app and one textured render....

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

Isometric to Cartesian

By Zevan | January 2, 2009
CLICK HERE TO COPY
Actionscript:
  1. var centerX:Number=stage.stageWidth/2;
  2. var centerY:Number=stage.stageHeight/2;
  3. // 1 to 2 ratio
  4. // try others 1 / 1.5 etc...
  5. var theta:Number = Math.atan(1 / 2);
  6.  
  7. var cosX:Number=Math.cos(theta);
  8. var sinX:Number=Math.sin(theta);
  9. var pnt:Point = new Point();
  10.  
  11. function iso3D(x:Number, y:Number, z:Number):Point {
  12.     pnt.x = centerX + (x-z) *  cosX;
  13.     pnt.y = centerY -  (x+z) * sinX - y;
  14.     return pnt;
  15. }
  16.  
  17. var p:Point = iso3D(0,0,0);
  18.  
  19. graphics.beginFill(0x000000);
  20. graphics.drawCircle(p.x, p.y, 2);
  21.  
  22. // x axis positive
  23. trace("x = red");
  24. for (var i:int = 1; i<10; i++){
  25.     graphics.beginFill(0xFF0000);
  26.     p = iso3D(i*10, 0, 0);
  27.     graphics.drawCircle(p.x, p.y, 2);
  28. }
  29.  
  30. // y axis positive
  31. trace("y = green");
  32. for (i= 1; i<10; i++){
  33.     graphics.beginFill(0x00FF00);
  34.     p = iso3D(0, i * 10, 0);
  35.     graphics.drawCircle(p.x, p.y, 2);
  36. }
  37.  
  38. // z axis positive
  39. trace("z = blue");
  40. for (i= 1; i<10; i++){
  41.     graphics.beginFill(0x0000FF);
  42.     p = iso3D(0, 0, i * 10);
  43.     graphics.drawCircle(p.x, p.y, 2);
  44. }

The above code demos a conversion from isometric coordinates to cartesian coordinates. It draws out part of the x, y and z axis using the iso3D() function.

I've always faked isometric conversion by just tweaking numbers. A few years ago I created some strange isometric engines (here's another example). The other day when I wrote the isometric voxels snippet I just created the iso3D() function with a little trial and error. As you'll see it's not exactly the same as the one here. This new conversion is the result of some googling. The updated conversion is pretty close to the one that I wrote for the voxel post, but has one less multiplication... and a clearer place to control the scale ratio ...

Also posted in misc | Tagged , , | Leave a comment