papervision3D - PQ torus

demo, code, actionscript, flex, flash, papervision3D, mxml


here we go again, another papervision3D demo featuring math permeated lines. this time im working with a classic piece of code known as the PQ torus. the vague idea is that you have 2 numbers (P + Q) that are used in the algorithm to define the knot. in general, given P + Q mutually prime, the line wraps meridionally around the torus P times and wraps the longitudinally around it Q times. i was having some trouble grasping exactly how this was going to be achieved, until i read this article on blackpawn’s website. he really breaks down the algo to a very simplistic level...

    calculus
  1. r = .5 * (2 + sin(Q * Φ))
  2. x = r * cos(P * Φ)
  3. y = r * cos(Q * Φ)
  4. z = r * sin(P * Φ)

simple right? lol.
so Φ (or phi in my code) is basically a variable that is definded by change. in this case, im simply incrementing phi + .02 every frame. this seeds the math and gives you the cool visual effect.

anyway, after getting a handle on the math, writing the demo code was a snap. i took the existing code i wrote from the 3D object tracer and the lorenz attractor and combined them. (i also found + fixed an error for computing the line gradient color) i started out by allowing the users to only select values for PQ and that actually made sense.


but after some experimentation i found that using some unorthodox values for P+Q could net some very interesting results. take a look at some of these...




click here to view the demo
click here for the source code

tracing 3D objects with papervision3D

demo, code, actionscript, flex, flash, papervision3D, fontz, mxml, tutorial


a question popped up on the papervision3D mailing list the other day about using the lines3D class to trace a 3D object. i found the idea fascinating, so i whipped up this little demo to demonstrate how simple it actually was. i started out by creating a simple cylinder with a wide base and small top, and setting its visibility to false. then creating my lines3D object. finally in the render loop i create a new line3D that connects each vertice. by checking to see in a counter variable is less than the total object vertice count ((box.geometry.vertices.length)), and adding a new line3D if the counter is less than that, or deleting all the lines and starting over.

check out that demo here
view the demo source

so that wasnt enough.
i decide that i wanted to trace the actual papervision3D logo. and since i have already made it in a font, it wasnt hard at all. working with the optimized version of the font on my site worked fine, but since there were so few verticies, the script would draw the logo in a matter of seconds. so instead of trying to devise a method of tweening from vertice to vertice i just went into font lab and added more points!
((the font used in this demo is available here))

now, i went into 3D studio max, clicked the "Splines" button, and created a new text object. i used the new PV3D.Flex.Font i just made, set the size to 100 (larger/smaller is fine) and typed in the letter "A" (the only character in the font).

after that i used the rotation tools to stand the letter upright, and moved it forward some. the next step is to do a mesh select, by clicking the modifiers tab and selecting "Mesh Select" from the dropdown menu. then in the mesh select parameters panel select vertices. now click back into your main perspective and select all the vertices (ctrl+a).


the next step is an important one ((and the one i always forget)) we need to give our 3D object a uvw mapping. still under the modifiers tab, select "UVW Mapping" from the dropdown list. and under the parameters panel make sure its mapping mode is set to "Planar". i was having all kinds of trouble exporting 3D objects that were based on points only. seraf explained to me that w/o a uvw mapping on your object the as3geomClassExporter cant map the u and v points onto the triangle mesh, which are needed for texturing purposes.


now its time to export our 3D logo, click on the tools tab and select max script, then run the as3geomClassExporter. set your package folder and the actual class name, then select papervision3D 2.0 from the dropdown list. for this particular object i left the scale set to 1. then click export class and save it in the same folder as you set in your package.



then its onto flex.
i decided i wanted to use the math-based color fade from my last demo again, so i couldnt use the standard color picker. this demo uses 2 states, normal and the color picker. which is just a 2nd state with a panel object w/ blank flex buttons on them. using the flex buttons worked out well because i was able to just set the color gradient to the same colors in the fade, or just solid ones for the normal sets. i tried to make is one a simple as possible so you can understand the core concepts of whats going on more than the over-all "flashy-ness" of the thing. so enjoy!

click here to view the demo
and its source of course!

the lorenz attractor

demo, code, actionscript, flex, flash, papervision3D, random, work, mxml


we were discussing recursive algorithms and chaos theory at work yesterday. when the chemistry professor brought up the lorenz attractor. he was trying to draw one on the white board for about 10 minutes until i decided it would be easier to draw in flash, lol!

after a quick conversation w/ andy zupko about the new Line3D object, and my new CanvasView3D component for papervision, i made a sweet Lorenz attractor!

the algor is super simple

    pseudo code
  1. x1 = x0 + h * a * (y0 - x0);
  2. y1 = y0 + h * (x0 * (b - z0) - y0);
  3. z1 = z0 + h * (x0 * y0 - c * z0);

A, B, and C are variables that get their values from form components in the application, while H is a constant that represent the angles of the curves dictated by segment size. x0, y0, and z0 are the origin vertex’s while x1, y1, and z1 are the destination points.

besides the form objects for the A, B, and C values, the application features an event driven camera, that follows the drawing as it happens. as well as a hover camera, which lets your rotate the object in 3D. the actual lines that are being drawn are given a new material each render. that's how the color tweening effect is achieved. use the color picker box to select a valid color to start with. also, the algor run 3000 times, (getting slower and slower as it loops) press the generate button to erase the lorenz you already have a begin drawing a new one w/ the form values you have selected.

a little background on the lorenz...
the lorenz attractor is a 3D structure corresponding to the long-term behavior of chaotic flow. the visual “map” represents the evolution of a dynamic system, that complexifys and into a unique non-repetitious pattern. originally discovered by edward lorenz in 1963, the current algorithm is based on simplified version of his equations of convection rolls arising in the atmosphere. for detailed technical info check out math world and this article by dominic van berkel.

click here to check out the demo
then browse the source code

papervision3D - face level interaction

demo, code, actionscript, flex, papervision3D, mxml


the new pv3d 2.0 release features an entirely new way of dispatching and handling events. earlier versions of the engine utilized two different flavors of materials, regular and interactive. with this new release, you just have materials with a boolean interactive property.

with this simple demo, im trying to learn more about the new interactive scene events. first, you create a 3D scene, and set it's interactive flag to true:

    actionscript3 code
  1. view = new Viewport3D(width, height, scaleToStage, interactive);

then create a material and set it's interactive property to true:
    actionscript3 code
  1. skin = new CompositeMaterial();
  2. skin.interactive = true;

this can also be done through the object as opposed to the material
    actionscript3 code
  1. terrain = new Plane(...);
  2. terrain.material.interactive = true;

after that you attach listeners to your object. in this case, we're going to use the interactiveScene3DEvent.
    actionscript3 code
  1. terrian.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, extrude);


here's a list of the available interactive scene3d events
    actionscript3 events
  1. OBJECT_CLICK
  2. OBJECT_OVER
  3. OBJECT_OUT
  4. OBJECT_MOVE
  5. OBJECT_PRESS
  6. OBJECT_RELEASE
  7. OBJECT_RELEASE_OUTSIDE
  8. OBJECT_ADDED

from these events its possible to receive a multitude of information. the 4 main ones are the instance properties available to you, which are: displyObject3D, face3D, renderHitData, and sprite. in this demo i use face3D to return the current triangle3D that the user is interacting with.

when the user moves the mouse over the plane, a highlight function is fired. i look at the current face3D and the last face3D and change their materials. this gives the effect that the triangle you are hovering over is illuminated.

but the code gets a bit hacky in the extrude function. this gets fired when the user actually clicks the plane. i receive an event from the interactive scene manager and once again get the current face3D instance. beyond that, i look that the v0 property and increment (or decrement, depending on the user's on click settings) the current face's z amount. notice that the current face is not the only one affected. it's surrounding triangles also rise up and form pyramids on their own. this is a sign is a well programmed engine!

as usual, sources are available...
view the interactive terrain generator
view its source code here

papervision3D 2.0 - dynamic lighting demo

demo, code, actionscript, flex, papervision3D, mxml


working with the new pv3d 2.0 release, there are a lot of new features to learn. one of the most powerful being the new pointlight3D class. using this will allow you to create all kinds of cool shading effects. at first i was having some trouble deciding where the light is positioned by default. i tried setting the light’s visibility flag to true, but it still wasn’t rendering. after a bit of digging i discovered that the position of the light by default it set to (x:0, y:0, z:-1000), no wonder it wasn’t rendering, it was in the same postion as the camera!

so i decided to make a little flex demo for the new pointlight3D class. the flex form allows you to use sliders to move the x, y, and z position of the light, as well a an orbiting function. you can set the orbit to horizontal or vertical spin, as well as setting the radius and speed the light will orbit.

just a little note on the light’s visibility:
by default, your light object will not be visible (though the light casted from the object will be). to make your light visible you need to do two things:

first, when creating your light you need to set the showLight flag to true. second, you add your light to your scene3D (normally you don’t add the light to the scene, you just create it and use it later)

    actionscript3 code
  1. thelight = new PointLight3D(true);
  2. scene.addChild(thelight);

check out the demo here
then view the source code

papervision3D 2.0 – great white

demo, code, actionscript, flex, papervision3D, downloadz, preview, mxml


well the time is finally upon us, for all of you who aren’t avid mailing list readers, papervsion3D 2.0 alpha ((code name: great white)) has been released for testing. and the team bringing real-time 3D in flash has gone all out this release! this versions new features boast shaded materials, custom shaders, the new ascollada (now with animation support), frustrum culling, multiple viewports, rendering to scene, and more.. not to mention the average 26% gain in overall fps!

this weekend my wife nina was out of town, which means that i had some time to sit down and check out some of pv3D 2.0’s new features. i made a simple demo of creating a 3D scene in flex using MXML. The demo basically lets you switch between a few different 3D models, ((the first two are by mr.doob and the rest are by me)) and the material drawn on it. this demo features the new flat shaded, cell shaded, gouraud shaded, and phong shaded materials at your disposal in the new version. as usual models exported from 3D studio max to actionscript 3 with the help of the awesome as3 geom class exporter.

click here to check out the demo
and click here to view the source

tieTheKnot

code, actionscript, flash, flex, papervision3D, demo, mxml


so i had the chance this weekend to create a few 3D models and export their geometry into papervision3D primitives. so i decided to create a demo, using both my as3 torusKnot primitives and the new flex accordion component. about the time i finished my demo i decided to re-sync my pv3d folder with the svn. at that exact same moment their was a slip-up. somehow one of the new dev materials got leaked into the public svn. the new material features dynamic lighting! so i decided to hack it into my new demo. so enjoy my custom primitive shadedColorMaterial demo created in flex3.
updated with fullscreen support!

view the demo or the source (right click enabled)
stay in the loop, join the papervison3D mailing list.

evoFlash/bombsquad blowup the demoscene

flash, linx, demo


so for anyone who dousnt know, the demoscene is a community of programmers, artists, and musicians, who come together and create amazing graphic visualizations for or coupled by music. (mr.doob explains) at this years assemby07 the evoflash team of bombsquad went crazy! their demo, entitled ADHDTV is amazing. They combine realtime fluid dynamics, with 3D computational physics, enviorment mapping, raycasting, phong shading, dynamic lighting, and shadowing... now that's some sexy math!

watch the demo online or download it from thescene

papervision3D video cube

code, actionscript, flash, flex, papervision3D, demo


my latest papervision3d project was a revamp of the video cube. this time around the rotation of the cube is static, not mouse driven, also i added some new filtering, and a diffrent method of using a video texture that dousnt throw an error message. the flv is from the best cartoon ever lupin the 3rd. this episode is called "buns, guns, and fun in the sun"

check it out here.

    actionscipt 3 code
  1. package
  2. {
  3. import flash.display.*;
  4. import flash.events.*;
  5. import flash.media.*;
  6. import flash.net.*;
  7. import flash.text.*;
  8. import flash.filters.*;
  9. //filmed in papervision3d
  10. import org.papervision3d.scenes.*;
  11. import org.papervision3d.objects.*;
  12. import org.papervision3d.cameras.*;
  13. import org.papervision3d.materials.*;
  14. [SWF(backgroundColor=0x333333)]
  15. public class main extends Sprite
  16. {
  17. // _______________________________________________________________________
  18. // vars3D
  19. private var container : Sprite;
  20. private var scene : MovieScene3D;
  21. private var camera : Camera3D;
  22. private var planeObj : DisplayObject3D;
  23. private var planeSize : int = 500;
  24. private var segment : int = 2;
  25. private var material : BitmapMaterial;
  26. private var bmpData : BitmapData;
  27. private var connection: NetConnection;
  28. private var stream : NetStream;
  29. private var video : Video;
  30. private var label : TextField;
  31. private var valx : Number = 0;
  32. private var valy : Number = 0;
  33. private var count : uint = 0;
  34. static public const
  35. TEXTURE_W:int = 320,
  36. TEXTURE_H:int = 240;
  37. // _______________________________________________________________________
  38. // constructor
  39. public function main():void
  40. {
  41. stage.frameRate = 60;
  42. stage.quality = "MEDIUM";
  43. stage.scaleMode = "noScale";
  44. stage.align = StageAlign.TOP_LEFT;
  45. this.addEventListener(Event.ENTER_FRAME, loop3D);
  46. this.stage.addEventListener(Event.RESIZE, onStageResize);
  47. label=new TextField();
  48. label.autoSize=TextFieldAutoSize.LEFT;
  49. label.x = 10;
  50. label.textColor=0xFFFFFF;
  51. label.selectable=false;
  52. addChild(label);
  53. init3D();
  54. connection=new NetConnection();
  55. connection.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler);
  56. connection.addEventListener(SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler);
  57. connection.connect(null);
  58. }
  59. private function netStatusHandler(evt:NetStatusEvent):void {
  60. switch (evt.info.code) {
  61. case "NetConnection.Connect.Success":
  62. stream = new NetStream(connection);
  63. stream.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler);
  64. stream.addEventListener(AsyncErrorEvent.ASYNC_ERROR,asyncErrorHandler);
  65. video = new Video();
  66. video.attachNetStream(stream);
  67. stream.play("lupinIII-s2e002-buns.guns.and.fun.in.the.sun.flv");
  68. label.htmlText ="the.fontvir.us presents... \n lupin the 3d\n buns guns and fun in the sun";
  69. break;
  70. case "NetStream.Play.StreamNotFound":
  71. label.text="flv not found...";
  72. break;
  73. case "NetStream.Play.Stop":
  74. //loop video
  75. stream.seek(0);
  76. break;
  77. }
  78. }
  79. // _______________________________________________________________________
  80. // event handlers
  81. private function asyncErrorHandler(evt:AsyncErrorEvent):void {
  82. }
  83. private function securityErrorHandler(evt:SecurityErrorEvent):void {
  84. label.text="security error...";
  85. }
  86. // _______________________________________________________________________
  87. // init3D
  88. private function init3D():void
  89. {
  90. this.container = new Sprite();
  91. addChild(this.container);
  92. this.container.x = this.stage.stageWidth / 2;
  93. this.container.y = this.stage.stageHeight / 2;
  94. scene = new MovieScene3D( container );
  95. camera = new Camera3D();
  96. camera.z = -planeSize;
  97. camera.focus = 1000;
  98. camera.zoom = 1;
  99. bmpData = new BitmapData(TEXTURE_W,TEXTURE_H,false,0xff0000);
  100. material = new BitmapMaterial(bmpData);
  101. material.oneSide = true;
  102. planeObj = scene.addChild( new Cube( material, planeSize, planeSize, planeSize, segment, segment, segment) );
  103. }
  104. // _______________________________________________________________________
  105. // loop3d
  106. private function loop3D( event:Event ):void
  107. {
  108. valx -= 0.2;
  109. valy -= 0.5;
  110. planeObj.rotationY = valx;
  111. planeObj.rotationX = 35;
  112. video.attachNetStream(null);
  113. bmpData.draw(video);
  114. video.attachNetStream(stream);
  115. var filters:Array = new Array;
  116. filters.push(new GlowFilter(0xFFFFFF, 1, 10, 10, 10, 1));
  117. filters.push(new DropShadowFilter(70, 55, 0x000000, 0.5, 9, 9, 1, BitmapFilterQuality.HIGH));
  118. /*
  119. var blur:Number = 10*Math.sin( (++count/25) );
  120. if(blur > 0){
  121. filters.push(new BlurFilter(blur,blur,BitmapFilterQuality.HIGH));
  122. }
  123. */
  124. planeObj.container.filters = filters;
  125. this.scene.renderCamera( camera );
  126. }
  127. // _______________________________________________________________________
  128. // onStageResize
  129. private function onStageResize(event:Event):void
  130. {
  131. this.container.x = this.stage.stageWidth / 2;
  132. this.container.y = this.stage.stageHeight / 2;
  133. }
  134. }
ps... happy birthday to me!!!

3D sound visualizer

code, flash, tech, downloadz, actionscript, flex, papervision3D, demo, rawk, mxml


a fellow papervsion3d enthusiast zeh (creator of the popular mctween) has created a new way of animating full 3d objects in the flash/flex environment with 100% code! Introducing the caurina tweener, witch is now hosted on googlecode, this re-envisioning of tweening is no longer a collection of h4x and prototypes extending existing ones. zeh has written full static classes following the idea of simple, one line commands. tweener is still in development, but is completely stable and functional.

check out the sound visualization demo i created using pv3d and tweener
http://the.fontvir.us/pv3d/spikey/
and its source code
http://the.fontvir.us/pv3d/spikey/spikey.as

UPDATE!

i have created a new version of the demo in flex using mxml. this demo also has the ability to dynamically change the colors of the filters applied to the spikey ball. i also compiled this demo with the current trunk version of papervision3D as well as the new 1.5 refractored branch to test the speed increase with the new version.

check out the 0.91 version here (source)
and the new 1.5 version here (source)

pete is drunk

demo, blog, friendz

pete bortz is drunk at the stateline restaurant (the border of west virginia and pennsylvania). in the video i shot he recants how the reason yer car doesnt work is gary busey, easter clause and david the nome. .. funny stuff

MMVII .( xero harrison ) . http://the.fontvir.us/b10g
RSS syndication