Plotting Equations in 3D – NKU Sem#5 (Links)

March 3, 2009

Plotting in 3D using Papervision3D and CS4.

Seminar #5

Here’s the class links for Plotting Equations in 3D: a free public seminar at NKU.

If you’re an educator or student get Adobe Flex for free at:

http://www.adobe.com/devnet/edu/

A. Resources: Flash & Math (Present Resources)
http://mathdl.maa.org/mathDL/3/?pa=content&sa=viewDocument&nodeId=1598&bodyId=1711

1. Parametric Surfaces in Rectangular Coordinates
2. Parametric Surfaces in Cylindrical Coordinates
3. Parametric Surfaces in Spherical Coordinates
4. Graphing Functions of Two Variables
5. Graphing Functions of Two Variables

B. Flash & Math (Barbara Kaskosz & Doug Ensley)

http://www.flashandmath.com (their book site)

Contour and 3D combined
http://www.flashandmath.com/advanced/contours/index.html

Implicit Plotter
http://www.flashandmath.com/intermediate/implicit/index.html

Simple Graph
http://www.flashandmath.com/basic/simplegraph/index.html

C. How Plotting in 3D is done in Flash
http://www.professionalpapervision.wordpress.com (my book site)

Flash 3D
https://professionalpapervision.wordpress.com/2008/12/11/building-a-3d-flash-engine-in-19-lines-of-code/

Flash & Math (how far can you go)
http://www.flashandmath.com/flashcs4/cs4simple3d/icosa.html

Not to be out done!
https://professionalpapervision.wordpress.com/2009/03/01/cs4-flat-shaded-tie-fighter-drawtriangles/

Note: 2D curves are created by connecting straight lines.

D. Plots in Papervision3D and CS4

Straight lines CS4
http://www.professionalpapervision.com/demos/web/lines3dcs4/

Curves in Papervision3D (straight lines pieced together)
http://www.professionalpapervision.com/demos/web/pendulum/FoucaultPend.html

Molecules
https://professionalpapervision.wordpress.com/2009/02/24/cs4-gumbo-molfile-molecule-viewer-sem4/

Particle Systems

Example 1 low number physics
https://professionalpapervision.wordpress.com/2008/11/21/real-orbiting-3d-particles-taking-out-the-trash/

Example 2 high number – billboarding physics
https://professionalpapervision.wordpress.com/2008/11/02/trilogic-particle-billboarding-flash-source/

Example 3 CS4 Particles
https://professionalpapervision.wordpress.com/2009/01/11/cs4-creating-a-parametric-particle-field/

E. Using the Geometry Trick (Papervision3D

Making Water (Exey Pantelee’s Blog)
http://exey.ru/blog/home/fluid-simulation-pv3d-and-away3d

objectName.geometry.vertices[i].x, y, or z

Sinc Function
http://www.nkuflc.org/sincplot

YouTube:

http://www.youtube.com/watch?v=YlFLT9YA44

Rubrics Cube
https://professionalpapervision.wordpress.com/2008/12/31/setting-up-a-rubiks-cube-in-papevision/

for(var i:int = 0; i<cubeGrid.geometry.vertices.length; i++)
{
var myPart:Cube = new Cube(materialArray[i], mySize/2.1,mySize/2.1,mySize/2.1,2,2,2);

myPart.x=cubeGrid.geometry.vertices[i].x;
myPart.y=cubeGrid.geometry.vertices[i].y;
myPart.z=cubeGrid.geometry.vertices[i].z;

particleArray.push(myPart);
myGraphicsHolder.addChild(myPart);
}

F. Parsing – in just 1900 lines of code???
You’ve got to be kidding me – click the more button below to see the code.

G. Where we are going! (3D Plotting Calculator Style)
Bring down the parser to 300 lines…maintainability vs. user experience. Move to IPhone.

Read the rest of this entry »


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 »


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


Free Papervision3D Workshops

January 7, 2009

Last Semester I taught a series of Papervision training courses at NKU and we have expanded that endeavor this semester by offering two free national workshops and 11 courses (free for all Kentucky Educators). Dates are subject to change, and as we approach the workshops I will supply additional information.

If you can’t make the workshops, don’t worry, everything will be recorded and placed on YouTube. And all source files will be posted on Google Code for download.

The workshops and courses are specifically geared for educators.

Training Schedule NKU (Courses and Dates)

1. (Feb 3) Virtual Tours & Google Maps
2. (Feb 10) Human Organ Modeling in Blender
3. (Feb 17) Virtual Physics Labs in Papervision
4. (Feb 24) Building Molecules in 3D
5. (Mar 3) 3D Plotter and Equation Parser
6. (Mar 11, 12, 13) Spring Break Free National Workshop Flex/Papervision
7. (Mar 17) Open Workshop
8. (Mar 24) Creating a Data-Driven Website
9. (Mar 31) 3D Virtual Learning Games
10. (Apr 7) Building a Cell Phone Course Part 1
11. (Apr 14) Building a Cell Phone Course Part 2
12. (Apr 21) Open Workshop
13. (May 19, 20, 21) Summer Break Free National Workshop Flex/CS4


Descriptions

Note: All sessions will be recorded live and placed on YouTube.

(Feb 3) Virtual Tours & Google Maps: In this course, you’ll learn how to create a Google Map and place a Blender (or 3DSMax) model on its longitude latitude positions. You’ll learn how to make those models interactive. And how to load content into your project for display on the web. The Walton County Ghost tour will be used as a demonstration. The class is free and participants are required to bring their own laptop.

(Feb 10) Human Organ Modeling in Blender: In this course, you’ll make organs in Blender (such as the heart, liver, stomach). You’ll learn how to create textures for those organs, and how to place your models on the web so your students can interact with them. The heart will be used as a demonstration. The class is free and participants are required to bring their own laptop.

(Feb 17) Virtual Physics Labs in Papervision: In this course, you’ll create virtual physics labs based upon MIT OpenCourseware. Basic Newtonian mechanics will be discussed, and ActionScripting gravity, friction, vibration, and collision will be demonstrated. Finally, a 3D physics engine will be used to create interactive physics labs. The oscillating pendulum will be used as an example. The class is free and participants are required to bring their own laptop.

(Feb 24) Building Molecules in 3D: In this class, you’ll use Papervision to create molecules from standard mol files. You’ll learn how to load different molecules and how to make them springy. Billboarding for large molecules will be discussed. You’ll place your models on the web so students can interact with them. Benzene and other basic molecules will be used as examples. The class is free and participants are required to bring their own laptop.

(Mar 3) 3D Plotter and Equation Parser: In this course, you’ll learn how to integrate an equation parser (created by Barbara Kaskosz of Flash & Math) with a Papervision plotting program. The program allows you to input an equation and have it plotted in 3D. Equation parsers, 3D plotting, and 3D engine development will be discussed. The Sinc and other functions will be used as an example. The class is free and participants are required to bring their own laptop.

(Mar 11, 12, 13) Spring Break National Workshop Flex/Papervision
This 3 day workshop will include:
Day 1: Getting Started in Flex, and Papervision
Day 2: Building Models and 3D Wii Games
Day 3: Creating a 3D Learning Management System
The workshop is free and participants are required to bring their own laptop.

(Mar 17) Open Workshop: This is a feedback session allowing participants to ask questions about previous sessions, bring in design ideas for discussion, and learn about requested topics that were not addressed in previous courses. The class is free and participants are required to bring their own laptop.

(Mar 24) Creating a Data-Driven Website: In this class, you’ll learn the basics of creating a data-driven website. You’ll build a searchable Flex interface. You’ll learn how to get PHP talking to your Flex interface and a MYSQL database. You’ll learn about CRUD, and how to store and change data in your database. Roxanne Kent-Drury’s English site will be used as an example. The class is free and participants are required to bring their own laptop.

(Mar 31) 3D Virtual Learning Games: In this class, you’ll learn how to tear apart 2D games and turn them into 3D games. You’ll learn how to turn killing games into learning games. You’ll learn how to work with models, textures, and sounds. You’ll learn how to upload your games to the web. Both board games and virtual environment games will be discussed. A simple memory game, and Stuart Crickmer’s business game will be used as an example. The class is free and participants are required to bring their own laptop.

(Apr 7) Building a Cell Phone Course Part 1: In this class, you’ll receive an overview of cell phone technologies and a discussion of why they are important in education. You’ll learn how to program a cell phone and how to use it to disseminate information. The class is free and participants are required to bring their own laptop and encouraged to bring a specified cell phone (the cell phone type will be provided upon request).

(Apr 14) Building a Cell Phone Course Part 2: This class is a continuation of Building a Cell Phone Course Part 1. In this class, you’ll learn more advanced techniques in cell phone programming and optimization. You’ll learn how to work with media and data sources. You’ll learn how to put together a cell phone course for the web. The class is free and participants are required to bring their own laptop and encouraged to bring a specified cell phone (the cell phone type will be provided upon request).

(Apr 21) Open Workshop: This is a feedback session allowing participants to ask questions about previous sessions, bring in design ideas for discussion, and learn about requested topics that were not addressed in previous courses (such as working with Adobe Air). The class is free and participants are required to bring their own laptop.

(May 19, 20, 21) Summer Break National Workshop Flex/CS4
This 3 day workshop will include:
Day 1: Getting Started in Flex, and CS4
Day 2: Building Models and 3D Websites
Day 3: Creating 3D Data Visualization Templates
The workshop is free and participants are required to bring their own laptop.


Follow

Get every new post delivered to your Inbox.