Parsing a TEI File – reading/editing a poem

February 27, 2009

Intro

In this post we demonstrate how to work with e4x and Flex to parse a TEI file, read its poem, and build an interface for editing that poem.

You’re probably wondering, what the heck does parsing a TEI file have anything to do with Papervision or 3D?

Everything … in a data driven world…

At NKU our primary goal has been to build a 3D learning management system. And learning management, in any dimension, means distributing and collecting data. TEI is a very good “first example” of a non-trivial XML file. In future posts, we’ll use it to illustrate how to create a usable flatfile database for 3D systems. Click the image below to see a demo:

TEI Parsed and Ready to Edit

TEI Parsed and Ready to Edit

Source

Demo

Discussion

I really enjoy parsing files, it’s one of those monotonous tasks that any idiot can do which makes you look like a genius.

Let’s go through the steps of bringing this file into Flex, using e4x to grab its data, display the poem in an html text box, and prepare the editing mechanism.

Bringing this TEI file into Flex

Use Http Service to bring the poem into Flex, and make sure resultFormat=”e4x”.

<mx:HTTPService id=”xmlService” url=”assets/barberexp1755EL2.xml”
resultFormat=”e4x” result=”resultHandlerforForum(event)” />

Declare a xData variable typed as XML, and load your results into that variable. Now you’re ready to parse.

private function resultHandlerforForum(event:ResultEvent):void{
xData=event.result as XML;
}

Using e4x to grab its data

It’s all really a counting game now. Use e4x to grab the data by XML tag name. For example to grab the poem data use the “..” syntax. For example,

xData..text

takes you from the root node to the text node without listing all the nodes in between – pretty cool!

Now just “dot”, or used dot syntax, to go wherever you want to go. And if you want an attribute ,use the “@” symbol to go there.

Displaying the poem in an html text box

The poem is displayed in a htmlText area box by iterating over its “l” nodes. The attribute “rend” is grabbed by using .@rend and used to determine the space in front of each line using a switch case …
for(var i:int = 0; i < myLength; i++){
var intrSwitch:String= xData..text.body.div[1].lg.l[i].@rend;
switch(intrSwitch){
case “indent1″:
output_txt.htmlText+=” “;
break;
case “indent2″:
output_txt.htmlText+=” “;
break;
default:
//Not in my arsenal
break;}
output_txt.htmlText+=xData..text.body.div[1].lg.l[i]+”\n”;
}}

Now that you can read your poem, let’s set up the mechanism for editing it, which we will do on the next TEI post.

Preparing the editing mechanism

The big problem with most TEI editors is that you have to enter the poem in one line at a time from an input box, or with code hinting. Our solution solves this by parsing your input in between “l” tags. The addline button automatically adds the tags for your when editing.

private function editPoem():void{
editPoemMode=true;
output_txt.text=xData..text.body.div[0].head.bibl.title+”\n”+”\n”;
var myLength:int=xData..text.body.div[1].lg.l.length();

for(var i:int = 0; i < myLength; i++)
{var intrSwitch:String= xData..text.body.div[1].lg.l[i].@rend;
output_txt.text+=”<l rend=”+”\””+xData..text.body.div[1].lg.l[i].@rend+”\””+”>”+xData..text.body.div[1].lg.l[i]+”</l>”+”\n”;
}}

But you don’t want to add lines when your just viewing your poem – so now you need a state engine.

Using a State Engine

Finally, you’ll need a simple state engine to keep track of what you’re doing. To do this, just declare a variable “editPoemMode” which keeps track of whether you’re editing or displaying a poem. If editing, allow “add a line”.

private function addLine():void{
if(editPoemMode==true){
output_txt.text+=”<l rend=\””+”indent1″+”\”>Enter Text Here</l>”+”\n”;
}}

This isn’t much code for what we have accomplished, but that’s the power of e4x, and Flex…

To see the entire code click the button below:

Read the rest of this entry »


CS4 (Gumbo) Molfile Molecule Viewer Sem#4

February 24, 2009

Intro

This is seminar #4, of a series of free seminars given this semester at NKU on Papervision3D and CS4. It demonstrates how to create a molfile molecule viewer in CS4 (Gumbo). Click the image below to see a demo.

CS4 Molecule for a Molfile

CS4 Molecule from a Molfile

Source

Demo

YouTube

Discussion

This is now my second version of a 3D molecule viewer. The first version was written in Papervision3D and was about 1400 lines of code and required that you rewrite the molfile into xml, and didn’t show bonds. This version is in CS4 (Gumbo or Flex 4) and is only about 350 lines of code, has bonds (single, double, triple, aromatic) and parses the molfile directly.

It took me a day to write this application(from 4 to 11), and that was with breaks: playing with the kids, gym, Shakespeare club, an ice cream float party, and several episodes of Hawaii-5-0 and Enterprise. Yeah, this is the life!

Molfile Parser

Parsing the Molefile was much easier than I thought it was going to be. Here is how you do it:

  • You just bring the molfile into Flex 4 using http services command (just as you would an XML file but with no e4x format)

<mx:HTTPService id=”molService” url=”assets/0420.mol”
result=”initMoleFile(event)” />

  • Then you convert it to a string, take out the special characters, split the contents, stuff it into an array, and remove all empty array elements.

// Convert to string
myString=molService.lastResult.toString();

//Remove special characters
myString = myString.split(“\n”).join(” “);
myString = myString.split(“\r”).join(” “);

//Stuff into an Array
myArray = myString.split(/ /);

//Filter out bland array elements
myArray = myArray.filter(filterMe);
function filterMe(element:String, index:int, array:Array):Boolean{
return (element != “” ); }

  • After you’ve stuffed your molefile into an array, you need to know where to go in that array so you can start counting off the data elements.Where do you go? Go to the version number of the molfile. So run a forEach and grab it’s index value.

myArray.forEach(myStart);

function myStart(element:String, index:int, array:Array):void{
if(element == “V2000″||element == “V3000″){
myStartVert=index;}

The index value of the version number is the heart of your molfile parser. Above we allow for versions V2000 or V3000. This index value will take you to any piece of data that you need in order to display your molecule. From this point on, its just a big counting game, everything is referenced to your version index value.

Atom File

To display your model you need an atom shape that can change size, color, and fill based upon the atom type.

The atom color, type, and radius were previously handled in an earlier version of the molecule viewer, created in Papervision3D (video, source).

And the atom shape and fill were handled in a previous post in this blog on 3D Lines in CS4 using drawPath.

By combining these two programs you can come up with a suitable atom. To do this:

  • Place the atom switch case from the PV3D Viewer into the Ball class created in the 3D Lines post, then change the ball class to Atom along with its constructor and class names.
  • In the switch case change the myColor value from grabbing a jpg to equaling a color value for all possible atoms:

case “H”:
//myColor = “colors/white.jpg”;
myColor = 0xffffff;
radius = 25;

  • In the Constructor function change it to receive only one parameter type, which is the letter of your atom: H, C, O…

public function init(type:String):void{…

  • Finally, change the fill method to gradient fill so your atoms looks cool.

graphics.beginGradientFill(myType, [myColor, 0x000022],[1,1], [1, 40]);

Now that your atom subclass is completed, it’s time to start building molecules.

Creating Molecules and Bonds

There are two parts to creating molecules: placing atoms in 3D, and creating their bonds. The first part of a molfile gives you the atom position values, and the second part give the bond relationships (which atoms are connected to which) and types.

Placing Atoms

Essentially all you have to do is replace the random placement of circles from the post on drawPaths to the atomic positions found in your molfile.

atom.xpos = myArray[myStartVert+1 +j*16] * myScale – offsetx;
atom.ypos = myArray[myStartVert+2 +j*16] * myScale – offsety;
atom.zpos = myArray[myStartVert+3 +j*16] * myScale – offsetz;

myHolder.addChild(atom);

You get to those positions by counting 1 position forward for x, 2 for y, and 3 for z, from the version number index, as shown above.

The offset is just an average of the molecular positions and gives you the ability to spin your molecule around its center. Everything else pretty much follows what was done in the drawPaths post.

Creating Bonds

Creating bonds is easy as well, with one big conceptual change from the drawPaths post. Double processing is eliminated by just duplicating the atom and placing it into a marks array. The lines follow the duplicated atom in the marks array and the other atom which exist in the atoms array are used for sorting.

atoms.push(atom);
marks.push(atom);

The big problem (in creating bonds) was figuring out how to create double, triple, and aromatic bonds. And it turns out to be just a big counting game, coupled with offsetting lines. It starts with figuring out what type of bond you have and using that information in a switch case.

The information for what type of bond you have is carried in the second part of your molfile which starts at

startBondArray=myStartVert+myNumAtoms*16+1

Adding 2 to this number gives you the bond type location (OK once again it’s a big counting game – check out the molfile description under the read more button to see the molfile structure – I know it well).

So, each time you create a double, triple, or aromatic bond you have to keep track of where all the data is in your array. This was accomplished by adding the following counting tracker to your command and data arrays:

commands[2*k+2*dB+4*tB+2*aB]

mydata[4*k+4*dB+8*tB+4*aB]

which are needed to for the drawPath command shown below

myHolder.graphics.drawPath(commands, mydata);

The variables dB, tB, and aB are iterated (by one) each time you create a double, triple, or aromatic bond respectively. These values are then zeroed after each molecular drawing iteration and the process is restarted on each onEnterFrame tick.

Creating the bond offsets was not very sophisticated as shown below:

mydata[4*k+4*dB+8*tB+4*aB] = marks[myArray[startBondArray+7*k]-1].x-bond2Sep;
mydata[4*k+1+4*dB+8*tB+4*aB] = marks[myArray[startBondArray+7*k]-1].y-bond2Sep;

mydata[4*k+4+4*dB+8*tB+4*aB] = marks[myArray[startBondArray+7*k]-1].x+bond2Sep;
mydata[4*k+5+4*dB+8*tB+4*aB] = marks[myArray[startBondArray+7*k]-1].y+bond2Sep;

You just subtract or add an offset value (bond2Sep) as shown above for the double bond case.

Which Way Should We Go!

In going through this, I found some molfiles on the web that were not well formed and would not work with this parser. That’s always the problem with parsers. The errors were easy to fix and many times just meant adding or subtracting an extra zero. But your end user can’t do that…

I really think XML is the best way to go. That way you can target nodes and forget about counting. You can go even a step farther with XML and include chemical bonding information which would enable you to run chemical simulations. Wouldn’t that be cool!

To see all the code, download it from the source link above or click the button below:

Read the rest of this entry »


Adding Brightness to PV3D Light Source

February 22, 2009

Acknowledgment

Many thanks to Ralph Hauwert who wrote PV3D 2.0. As I work through his many classes, I really get the feeling that I am standing on the shoulders of a giant. I got to meet him in LA, where I took his PV3D RMI Certification class. I flew 1500 miles from Kentucky to take his course, and it was worth 100 times every dime I spent to get there.

Intro

If you want a sunrise you’ve got to have brightness control. The PV3D point light source only has a distance parameter: used primarily to calculate the angle of the triangle normals – no brightness factor. But adding brightness is all too easy, and in this post we’ll show you how to do it!

We’re going to get right down to the nitty-gritty here, so to learn more about how lights works in Papervision3D (normals, cross products, dot products, etc…) buy the book. There, I explain it all!

Shaders from Light to Dark

Shaders from Light to Dark

Source

Demo

YouTube

Discussion

If I had any doubt as to where the physics should go, working with light totally solidified it for me. Physics goes into the DisplayObject3D class! And in this case, we just add a simple brightness parameter as shown below:

public function get brightness():Number
{

return this._brightness;
}

public function set brightness(value:Number):void
{
this._brightness = value;

}

And since my light is a display object it immediately inherits the brightness. Ha! You thought this was going to be hard – it isn’t!

Updating Shaders

Now all you have to do is update all the shaders with your new brightness parameter and boom – you’re done. In Papervision3D there are 5 shaders: flat, cell, gouraud, phong, and environment. And we explain each one in detail in the book.

So open up the Shaders which are located in the

org/papervison3d/materials/shadermaterials

and make the following modifications:

Flat

Open up the FlatShadeMaterial and multiply the light brightness by the zd factor.

zAngle = zd*0xff*light.brightness;

Gouraud

Open up the GouraudShadeMaterial and multiply the light brightness by the po, p1, and p2 factors.

p0 *= 127*light.brightness;
p1 *= 127*light.brightness;

p2 *= 127*light.brightness;

Cell, Phong, Environment (three-in-one)

Open up the EnvMapMaterial class and make the following changes:

It seems like a lot, but all you do is multiply the dot product function by (2-light.brightness) .

The changes are in bold below:

p0 = lightmapHalfwidth*(face3D.v0.normal.x * lightMatrix.n11 + face3D.v0.normal.y * lightMatrix.n12 + face3D.v0.normal.z * lightMatrix.n13)*(2-light.brightness) +lightmapHalfwidth;

q0 = lightmapHalfheight*(face3D.v0.normal.x * lightMatrix.n21 + face3D.v0.normal.y * lightMatrix.n22 + face3D.v0.normal.z * lightMatrix.n23)*(2-light.brightness)+lightmapHalfheight;

p1 = lightmapHalfwidth*(face3D.v1.normal.x * lightMatrix.n11 + face3D.v1.normal.y * lightMatrix.n12 + face3D.v1.normal.z * lightMatrix.n13)*(2-light.brightness)+lightmapHalfwidth;

q1 = lightmapHalfheight*(face3D.v1.normal.x * lightMatrix.n21 + face3D.v1.normal.y * lightMatrix.n22 + face3D.v1.normal.z * lightMatrix.n23)*(2-light.brightness)+lightmapHalfheight;

p2 = lightmapHalfwidth*(face3D.v2.normal.x * lightMatrix.n11 + face3D.v2.normal.y * lightMatrix.n12 + face3D.v2.normal.z * lightMatrix.n13)*(2-light.brightness)+lightmapHalfwidth;

q2 = lightmapHalfheight*(face3D.v2.normal.x * lightMatrix.n21 + face3D.v2.normal.y * lightMatrix.n22 + face3D.v2.normal.z * lightMatrix.n23)*(2-light.brightness)+lightmapHalfheight;

That’s it. Just run your shaders like you normally do adjusting your brightness in your animation loop and TaDah! instant rising sun!

Big Note

Keep your brightness value between 0 or 1 or your program will freak, and in the down-loadable source above I renamed the Shader material classes adding a “Brightness” name at the end of them. You don’t have to do this. I did this as a precautionary measure… if I mess up (and I do), I can always go back to the original class.

To see the wrapper file for the shaders download the source above or click the more button below:

Read the rest of this entry »


3D Lines in CS4 using drawPath

February 19, 2009

Intro

In the previous post on Pendulums, Papervision’s line3D class was used to plot the orbit of a Foucault Pendulum in a rotated plane. But there was a problem – adding more line segments slowed the processor and as result line segments had to be removed. Aha! You just thought I had created some really cool effect by erasing the end of my line while making the front. No, without erasing, everything would eventually slow down to a stand still.

Let’s speed things up a little by using CS4′s drawPath method. Click on the image below to see the demo.

3D Lines in CS4

3D Lines in CS4

Source

Demo

YouTube


Discussion: Drawing Points and Lines

Keith Peters in his book does a similar example using CS3 line functions, but he doesn’t sort his filled circles. His circles are black, and when you run his demo it appears as if the application is z-sorting-but it isn’t. If you try to applying his zSort algorithm the connecting lines go hay-wire. They don’t know where to go and try to follow his black circles as they rapidly sort.

Here’s the Trick

Commonly when we run into such issues in Papervision3D we create dummy graphics for our wayward objects to follow. So in this case you create dummy graphics under your circles for your lines to follow. Thus, separating the zSortng of the circles from the positions of your lines.

There ‘s a little bit of double processing here, but it’s worth it. And it’s very typical of solving problems of this type. In the code below, you see the parallel creation of the circle (or ball) and the dummy marker (or mark).

var ball:BallCS4 = new BallCS4(10, 0);
var mark:MarkCS4 = new MarkCS4(0, 0);
marks.push(ball);
balls.push(ball);
mark.xpos = ball.xpos = Math.random() * 200 – 100;
mark.ypos = ball.ypos = Math.random() * 200 – 100;
mark.zpos = ball.zpos = Math.random() * 200 – 100;
myHolder.addChild(ball);
myHolder.addChild(mark);

The MarkCS4 class is your dummy marker and is an object of zero pixel size – how do like that one! The BallCS4 class is similar to the MarkCS4 class. But draws a circle instead of a zero pixel line.

BallCS4 uses the drawPath method to create its circle in CS4. Since there are no drawCircles methods in CS4 you have to create one. I used four radial curves (created by the CURVE_TO method), which looks fine for small circles, but you’ll need to add eight for larger circles. The radius parameter (below) determines the size of your filled circle.

commands.push(GraphicsPathCommand.MOVE_TO);
data.push(-radius/1.9, radius/1.9);

data.push(0, radius);
data.push(radius/1.9, radius/1.9);

data.push(radius, 0);
data.push(radius/1.9, -radius/1.9);

data.push(0, -radius);
data.push(-radius/1.9, -radius/1.9);

data.push(-radius, 0);
data.push(-radius/1.9, radius/1.9);

commands.push(GraphicsPathCommand.CURVE_TO);
commands.push(GraphicsPathCommand.CURVE_TO);
commands.push(GraphicsPathCommand.CURVE_TO);
commands.push(GraphicsPathCommand.CURVE_TO);

graphics.lineStyle(0);
graphics.beginFill(0×800000);
graphics.drawPath(commands, data);

Extra Reading

A great article which explains this in more detail can be found on Senocular’s blog. Once you’ve got your “commands” and “data” Vectors loaded, you throw them into the drawPath function…and TaDah – sphere (or in this case filled circle)! Instantiate it as many times as you want.

zSort

Now that you’ve decoupled the spheres from the lines using the marker graphics you can now use Keith’s zSort method.

private function sortZ():void
{
balls.sortOn(“zpos”, Array.NUMERIC | Array.DESCENDING );
for(var i:uint = 0; i < numBalls; i++)
{
var ball:BallCS4 = balls[i];
myHolder.addChild(ball as Sprite);
}
}

The Big Limitation

The big limitation is that drawPath only draws in x and y – hey where’s the z Adobe? So to get around that limitation you have to use perspective scaling given in the code below:

var scale:Number = fl / (fl + ball.zpos);
ball.scaleX = ball.scaleY = scale;
ball.x = ball.xpos*scale;
ball.y = ball.ypos*scale;

That’s it, you’re ready to start using 3D lines in CS4. In an upcoming post, we will treat Creating 3D Springs and Making a Node Garden. And my favorite, 3D spring data visualization which I can’t wait to release. I’ve been working on this one for a while.

To see the entire code download the source above or click on the more button below.

Read the rest of this entry »


Papervision3D Pendulums – NKU Seminar #3

February 17, 2009

Papervision3D Pendulums NKU Seminar #3

This is the 3rd in a series of free public seminars held at NKU on Papervision3D and CS4. In this seminar, we take advantage of a number of open source references (given at the end of this post): MIT Open Courseware, Wikipedia, and Wolfram.

(Also in this seminar, Cocomo is tested.)

Please download Flash Player 10 to View all Examples

http://get.adobe.com/flashplayer

Intro

This seminar treats four pendulum types in Papervision3D: Simple , Double , Torsion, and Foucault. In addition, numerical techniques such as Runge-Kutta are discussed and source code demonstrated.

4 Pendulums

4 Pendulums

Source Files

YouTube

Part 1: Simple & Double


Part 2: Torsion & Foucault

Discussion

In each topic, we introduce an important coding concept. By the end of this seminar you should have a knowledge of basic pendulum types, open source resources, encapsulation, pinning, Runge-Kutta, sliders, and environment maps.

A. Simple Pendulum: Encapsulation

Encapsulation is what really separates men from mice when it come to programming in 3D Flash. Dehash on his Blog post a series of Papervision3D examples: http://www.dehash.com/?page_id=212

The example double plane demonstrates how to properly encapsulate elements in Papervision3D. I’ve extended his example to make the planes oscillated: Check it out here (and included in the source code).

Simple Pendulum

Simple Pendulum

Demo

Basically, the overall code is separated into two classes. The main class runs BasicView and is in charge of providing length, pinning, and animation information. The second class holds the elements to be animated.

Two Classes

Two Classes

It’s brilliant (wish I could take credit) and provides the foundations for all types of coolness to be published in future blog posts.

Once the secondary class is imported using

import objects.*;

then you can access all the public classes which let you manipulate the instantiated objects from the sub class, as described in my book.

Of course, the super huge advantage here is that my pendulum elements can be substantiated and pinned as often as needed and used by any number of programs.

B. Double Pendulum: Pinning

The example below demonstrates the importance of pinning. Pinning lets you attach one segment to another.

Double Pendulum

Double Pendulum

Demo

The two elements above were pinned together using:

myPendulum1.rotationZ = Osc;
myPendulum2.rotationZ = Osc*1.721;
myPendulum2.x = myPendulum1.getPin(Osc).x;
myPendulum2.y = myPendulum1.getPin(Osc).y;

where the getPin(Osc) function gives the end point of the first segment and starting point of the second. Its code for the 2D and 3D cases are:

2D Case

public function getPin(myRot:Number):Point
{
var angle:Number = myRot* Math.PI / 180;
var xPos:Number = this.x + Math.sin(angle) * myLength;
var yPos:Number = this.y – Math.cos(angle) * myLength;
return new Point(xPos, yPos);
}

3D pseudo Code (still needs work)

public function getPin(myTheta:Number, myPhi:Number):Vertex3D
{
var angle1:Number = myTheta* Math.PI / 180;
var angle2:Number = myPhi* Math.PI / 180;

var xPos:Number = this.x + Math.cos(angle1) * Math.sin(angle2)*myLength;
var yPos:Number = this.y + Math.cos(angle2) * myLength;
var zPos:Number = this.z + Math.sin(angle1) * Math.sin(angle2)*myLength;

return new Vertex3D(xPos, yPos, zPos);
}

In both cases, pinning is just a trig-calculation of segment ending points.

This example demonstrates one of the normal modes of the double pendulum: with the second pendulum overextending to demonstrate the second degree of freedom. To properly handle this problem one needs to use numerical analysis (such as Runge-Kutta).

C. Numerical Calculations: Runge-Kutta

Though beyond the scope of this seminar, we have include the Flash code of Runge-Kutta 2 (midpoint), and 4 in your source files. This code was developed by Keith Peters in his book Advanced ActionScript 3.0 Animation. It’s a good starting point and will be used in seminars to come. The code is included in the objects folder of your download and is labelled RK2, and RK4.

Keith Peter’s Demo (bouncing ball RK4)

D. Torsion: Sliders

Here we describe the use of sliders. Sliders let you interact with your animations: they add the thrill of interaction. But there is a fundamental decision to be made when using such elements. Should you use Flash components, Flex components, or make your own?

Torsion Pendulum

Torsion Pendulum

Demo

In this seminar, we use Flex components. And since Flex is free for educators, it’s the logical choice (for this seminar). And in addition, by creating a MXML applications your can just drag those components onto the screen where they are supposed to go.

Here’s the steps:

  • Drag your Flex component to the stage and position it
  • Use the Flex Properties Panel to assign min, max, tick, etc…
  • Incorporate your slider using the following code
  • In the HSlider mx tag (which was automatically generated when you dragged the slider to the stage) place a change event: change=”sliderChangeLive2(event);”

<mx:HSlider change=”sliderChangeLive2(event);” x=”10″ y=”67″ value=”6″ maximum=”40″ minimum=”1″ liveDragging=”false” id=”length” enabled=”true” snapInterval=”1″/

  • Create the sliderChangeLive2 function

private function sliderChangeLive2(event:SliderEvent):void {
var currentSlider2:Slider=Slider(event.currentTarget);
mySpConst=currentSlider2.value;
}

  • Place the mySpConst which is generated by your slider into your equations of motion which are located in your animation loop

var Osc1:Number=80*Math.sin(incre*(Math.sqrt(mySpConst)/20));

E. Foucault: Environment Map

Placing an Environment Map on your primitive adds realism to your object as can be shown below. An Environment Map is a Papervision3D shader material, and a great blog to learn more about shader is Jim Foley’s blog MAD VERTICES. He does a super job with primitives, shaders, and more…and has code, video, and demos.

Foucault Pendulum

Foucault Pendulum

Demo

As mentioned earlier an EnvMapMaterial is a shader material. A shader material is a material that uses a light object to determine how it displays. The EnvMapMaterial accepts 4 parameters, the light object, light map bitmapdata, back environment bitmapdata and the ambient light. The EnvMapMaterial displays as though your object is a mirror that is reflecting its environment.

environment = new EnvMapMaterial(light, envMap, envMap, 0×555555)

F. Application: Butterflies

Seb Lee-Delise on his blog http://www.sebleedelisle.com/ gives an example of a butterfly whose wings oscillate like a simple pendulum

http://clockmaker.jp/labs/as3_pv3d_gw_butterfly/reflection.swf

Essentially, two planes are created and positioned with a sine oscillation. The code required to do this is given below:

var leftWing:DisplayObject3D;
var rightWing:DisplayObject3D;
var butterfly:* = new DisplayObject3D();
leftWing = new DisplayObject3D();
rightWing = new DisplayObject3D();
var mat:* = new BitmapFileMaterial(“butterfly_wind.png”);
mat.doubleSided = true;
var leftWingPlane:* = new Plane(mat, 200, 200, 1, 1);
var rightWingPlane:* = new Plane(mat, 200, 200, 1, 1);
leftWingPlane.scaleX = -1;
leftWingPlane.x = -100;
rightWingPlane.x = 100;
leftWing.addChild(leftWingPlane);
rightWing.addChild(rightWingPlane);
butterfly.addChild(leftWing);
butterfly.addChild(rightWing);
addEventListener(Event.ENTER_FRAME,

function (EffectEvent:Event) : void
{
leftWing.rotationY = Math.sin(getTimer() / 200) * 60;
rightWing.rotationY = Math.sin(getTimer() / 200) * -60;
return;
);

To improve the code one would need to use encapsulation and pinning. This is treated in the book.

G. Speeding Things Up

In the book, we show you how to build these pendulums in CS4, which speeds things up by reducing the overhead of Papervision3D.

Resources

The availability of knowledge provided by the internet is changing the face of education. No longer do we need to leave home to gain excess to the reservoirs of knowledge once cloistered in ivory towers. But now at our finger tips, with a simple click ,we gain excess to more than we could ever retain in a lifetime of study.

It’s changing the way we view education and interact with knowledge. From the “small to large” to the “large to small”, knowledge is in an overwhelming abundance and we must now pare it down and interact with what’s pertinent to our assigned task; which really makes the case for 3D data visualization

Simple Pendulum

http://ocw.mit.edu/OcwWeb/web/home/home/index.htm

http://scienceworld.wolfram.com/physics/

http://scienceworld.wolfram.com/physics/Pendulum.html

http://scienceworld.wolfram.com/physics/PendulumSmallOscillations.html

Double Pendulum

http://scienceworld.wolfram.com/physics/DoublePendulum.htm

Torsional Pendulum

http://scienceworld.wolfram.com/physics/TorsionalPendulum.html

Foucault Pendulum

http://en.wikipedia.org/wiki/Foucault_pendulum


23 Papervision3D Primitives (17 new ones)

February 11, 2009

Intro

For Chapter 3 of the book I built a full set of custom primitives, bringing the Papervision3D primitive number from 6 to 23. The book explains how to create these custom prims in detail.

The prim demos and source download links are given below.

Source

http://flex3cookbook2.googlecode.com/files/papervision23prims.zip

Discussion

The primitives are included in an ActionScript project. Just unzip it and open up the src folder navigate to

org/papervision3d/objects/primitives

Grab the primitives and throw them into your Papervision primitives folder and you are ready to use them.

Demos

GeoGame Cube (curved plane XY + geosphere):

http://www.professionalpapervision.com/demos/web/primexamples/GeoGameCurve.html

Double Plane:

http://www.professionalpapervision.com/demos/web/primexamples/MyDoublePlane.html

Second Life Tree:

http://www.professionalpapervision.com/demos/web/primexamples/SecondLifeTree.html

Curved Plane (in x, created for video screen):

http://www.professionalpapervision.com/demos/web/primexamples/WireCurvedPlane.html

Geodesic Sphere:

http://www.professionalpapervision.com/demos/web/primexamples/WireGeodesic.html

Hourglass:

http://www.professionalpapervision.com/demos/web/primexamples/WireHourglass.html

Pinched Sphere

http://www.professionalpapervision.com/demos/web/primexamples/WirePinchedSphere.html

Puckered Cube

http://www.professionalpapervision.com/demos/web/primexamples/WirePuckeredCube.html

Pyramid

http://www.professionalpapervision.com/demos/web/primexamples/WirePyramid.html

Rubriks Cube (application)

http://www.professionalpapervision.com/demos/web/primexamples/WireRubiksCube.html

Wire Cut (application)

http://www.professionalpapervision.com/demos/web/primexamples/WireSphereCut.html

Torus

http://www.professionalpapervision.com/demos/web/primexamples/WireTorus.html

Tube

http://www.professionalpapervision.com/demos/web/primexamples/WireTube.html

Carousel (single primitive using material class)

http://professionalpapervision.com/demos/web/carousel/

Button Panel (single primitive using material class)

http://www.professionalpapervision.com/demos/web/buttonpano/

Primitives included in zip but not show here

(PolyPlane, and Triangle)


Creating a Blender Heart NKU Seminar #2

February 9, 2009

Into

This is the second in a series of Papervision3D/CS4 seminars held at NKU which are offered free to the public.

Human Organ Modeling using Blender (February 10):
Create organs using 3D modeling software and learn how to place the models on the web for a truly interactive learning experience.

A Blender Heart

A Blender Heart

Demo

Source

Posted here are the seminar notes, resources, demos, and videos.

Seminar Videos

video 1: http://www.youtube.com/watch?v=ygUCu89sQpw
video 2: http://www.youtube.com/watch?v=sUifORl-faI
video 3: http://www.youtube.com/watch?v=LrkT6BP6SLU
video 4: http://www.youtube.com/watch?v=xlSfyKzOg2M
video 5: http://www.youtube.com/watch?v=AP79nd5XEtQ
video 6: http://www.youtube.com/watch?v=vbHSg1Zffr8
video 7: http://www.y outube.com/watch?v=8fnXbDvRzY4
video 8: http://www.youtube.com/watch?v=qsyFnIDjYJM
video 9: http://www.youtube.com/watch?v=8H7U4t-iASM
video 10: http://www.youtube.com/watch?v=21E_aHuLDR4
video 11:
video 12:

Seminar Modeling Exercises

A. Getting Started

1. Open up house.blend (from the blenderExamples folder) and practice the Mac or Window commands
2. Open up the vein.blend (from the blenderExamples folder) and practice making your own veins (use combo for curved veins), practice dividing and smoothing and pulling off veins

B. Using Reference Images

3. Download Jing, examine reference images and body slices (see links above)
4. Split screen and load front circulation image on right side (from referenceimages folder), top body slice image 1 on left side (from body slices folder) and adjust image
5. View nucleusinc heart video (see link above), and model three primary arteries, use hide elements (use heartcircle.blend starter file)
6. Combine veins and arteries (use a plane reference) to be attached to the heart (start with heartsvcpaarota.blend file)

C. Changing Reference Images

7. Load heart reference image on right side (from referenceimages folder image 1), and body slice image 4, 3, 2 from (from body slices folder) as your model, use hide elements
8. Connect veins to heart, subdivide and smooth (see heartveins.blend, heartveinsSmooth.blend in blenderExamples folder)

D. Texturing Your Heart

9. Demonstrate editing vertices, dividing surfaces, and smoothing .
10. Demonstrate marking seam and unfolding.
11. Demonstrate coloring in gimp & image import/texturizing into photoshop

E. Placing Your Heart on the Web (it’s safer than e-harmony)

12. 11. Load into Papervision3D or CS4 (don’t forget to triangulate), use XML exporter, and place on the web.

Resources: Links (all software listed is free)

Circulatory System:
http://www.rachel-rose.net/bodywork/AP/selftestanswers/Circulation.JPG

Blender Images:

http://www.turbosquid.com/3d-models/3d-heart-opened-closed/428196

Video Example:

http://catalog.nucleusinc.com/

http://catalog.nucleusinc.com/generateexhibit.php?ID=17473&ExhibitKeywordsRaw=&TL=&A=2

Human Medical Slices:
http://vhp.med.umich.edu/browsers/female.html

Image Grabbing Software: Jing from Techsmith
http://www.jingproject.com/

Image Processing Software: Gimp

http://www.gimp.org/

Free 3D modeling Software: Blender (Papermax under Development)

http://www.blender.org/

Free Blender Wiki-book

http://en.wikibooks.org/wiki/Blender_3D:_Noob_to_Pro

Blender XML Exporter

http://flex3cookbook2.googlecode.com/files/exporter-primitive.zip

XML Exporter Blog Post

http://professionalpapervision.wordpress.com/2008/12/09/new-blender-xml-exporterpv3d-xml-primitive/

Papervision3D Download

http://code.google.com/p/papervision3d/downloads/lis

Blender Keyboard Shortcuts

Windows:

Modeling Building
Split Screen: roll over seam, right click, choose split area, click on stage
Background Image: click view and select Background image (view front/top)
x – erase selected item
space bar – add mesh
tab – edit model (dots icons vertices, lines edges, triangle faces)
a – select all/deselect toggle
b – marquee select
b twice – circle rollover select
right click – select
right click+shift – add to selected/toggle
e – extrude
esc – to escape an operation
ctrl-z undo
ctrl-y redo
ctrl+space bar – choose combo edit mechanism/toggle
g – grab
r – rotate (x, y, z to restrict to axis)
s – size (x, y, z to restrict to axis)
f-complete face
space bar +select+edge loop – grab loop
w-merge
h-hide selected
shift+h – hide everything but selected
alt+h – make everything visible
right click object – to select object
m and select layer – to place an object on a different layer

Navigation (touch pad)
ctrl+alt+LMB+mouse slide – zoom
alt+LMB+mouse slide – rotate scene
shift+alt+LMB+mouse slide – pan screen

Navigation (mouse)

roll middle mouse button – zoom
hold middle mouse roller down drag – rotate scene
shift+ hold middle mouse roller down drag – pan

Texturing
ctrl+e mark seam
u – unwrap (must be in UV face select mode)
window type – UV image editor
UVs, Scripts, Save UV Face Layout
Image, Open
Viewport shading, textured
File, Export, XML Exporter
ctrl+t – triangulat

Mac: (typically for Mac the command key is used in place of the right click windows)

Model building
Split Screen: roll over seam, command click, choose split area, click on stage
Background Image: click view and select Background image (view front/top)
x – erase selected item
space bar – add mesh
tab – edit model (dots icons vertices, lines edges, triangle faces)
a – select all/deselect toggle
b – marquee select
b twice – circle rollover select
command click – select
command+shift – add to selected/toggle
e – extrude
esc – to escape an operation
ctrl-z undo
ctrl-y redo
ctrl+space bar – choose combo edit mechanism/toggle
g – grab
r – rotate (x, y, z to restrict to axis)
s – size (x, y, z to restrict to axis)
f-complete face
space bar+select+edge loop – grab loop
w-merge
h-hide selected
shift+h – hide everything but selected
alt+h – make everything visible
command click object – to select object
m and select layer – to place an object on a different layer

Navigation (touch pad)
ctrl+alt+click+mouse slide – zoom
alt+click+mouse slide – rotate scene
shift+alt+click+mouse slide – pan screen

Navigation (mouse)
roll middle mouse button – zoom
hold middle mouse roller down drag – rotate scene
shift+ hold middle mouse roller down drag – pan

Texturing
ctrl+e mark seam
u – unwrap (must be in UV face select mode)
window type – UV image editor
UVs, Scripts, Save UV Face Layout
Image, Open
Viewport shading, textured
File, Export, XML Exporter
ctrl+t – triangulate


Follow

Get every new post delivered to your Inbox.