Google Map on a Papervision Primitive (in 6 lines of code)

Intro

Putting a Google map on a Papervision Primitive is extremely easy. All you need to do is to turn the map into a Movie (using the MovieMaterial class) and then place it on a primitive. It’s really that easy! You can do it in only six lines of code given below;

1. Turn Google Maps into a Movie

movie.graphics.beginFill(0xFFFFFF);
movie.graphics.drawRect(0,0,800,600)
movie.addChild(Application.application.map);
movie.graphics.endFill();
mat = new MovieMaterial(movie, false, true,true,new Rectangle(0,0,800,600));

2. Place that movie onto a primitive

sphere = new Sphere(mat, 600, 32, 32);

In this case, we use a sphere, but you can use any primitive you want. The results are shown in the image below;

Google Map on a Primitive

Discussion

Open source is a counter-intuitive concept. The success of Google maps illustrates the point. After developing a robust interface which parsed terabytes of satellite imagery and road data – they just gave it all away. And what a success and what a great resource that helps so many.

About a year ago our group decided to enter this global freeway as well by giving all our development work away – everything we do of consequence goes up on Google code and Youtube. At first, it was just an experiment. We were small and had nothing to lose. What a surprise?

As a result, we gained more global advertisement than we could ever pay for. And the job offers started pouring in. But then something happened – we found that we loved doing it. Our hearts were blessed. We didn’t care about the money or notoriety. Jesus had it right … it was better to give than receive, and man doesn’t live by bread alone …

Open source is just great fun…which makes me think…

There must be a human mechanism in the brain that equates creativity (accelerated brain chemistry) and giving (or letting go). It makes sense, letting go allows the brain to free fall up. The brain knows it’s only temporary and will die (and most likely when) – it just wants to fly (I guess that’s why we like roller coasters – it’s a brain ride). Well anyway, it works for us – we’re tripping over ourselves trying to get the next innovation out the door – who would know.

Enough of my open source propaganda (just think about it) – let’s take a look at how this puppy was made.

Procedure

I think the most important blog you could look at on this subject is Path Finder Development by Sasha Dzeletovic. They did a Papervision Yahoo maps which is actually much more complicated than what you’ll see here. I had worked quite a bit with the Yahoo Flash API last year and was delighted when Google created one. The Google API seemed to have solved many of the problems that I was having using the Yahoo API.

The only code I really needed from Path Finder was the first six lines at the beginning of this post. Everything else was just simple Papervision and the Google Flash API. Many of the complications I had with the Yahoo API just went away using Google. The real key was just converting the Map into a movie using the MovieMaterial class and placing it on a primitive. Also, handling the map display container similarly to the Path Finder article gave me full interactivity with the map – double click zoom – mouse panning – maker interactivity – and that’s really cool!

The only issue I had was that for more advanced applications I had to reprogram the Google control interfaces. Which I had to do for my Wii controlled applications anyway … more on that in upcoming posts.

YouTube – How it was made

Download (Air Application)

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

Click the more button below to see the full code listing of the Google Map Air Application.

forever (1st Papervision Wii Movie)

Intro

A long term goal of ours has been to produce movies with Papervision. Our first attempt is “forever”. We created this movie by screen capturing a Wii controlled silly string application we had written. What we learned from our first creation was how powerful the Wii was as an animation tool in making 3D movies.

We are now working on our next movie called Harry.

The YouTube movie is below. My son Josh (the incredible guitar player) put together all the music.

YouTube Video

Scaled Down Non-Wii version

Click on the image or link below to view a scaled down non-Wii version of this application. Placing your mouse cursor on the right side of the screen causes the string to grow fat, on the left side skinny.

Scaled Down Non-Wii Version

Or click on the link below;

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

Downloads

You can download the Wii controlled Silly String program from

http://code.google.com/p/flex3cookbook2/downloads/list

there is also a scaled down web version you can download.

Wiimote Comands

For this particular demonstration we programmed the Wiimote keys as follows. Of course this will change depending on the application.

Press A = Increase Orbit Radius
Release A = Return Orbit Radius
Press B = Get Fat
Release B = Return Skinny
Press UP = Zoom Out
Release Down = Zoom In
Press + = Increase Velocity Release
Press – = Decrease Velocity
Press Home = Blow Up (Repeating Destroys More)

Creating the Disk

To create the Wii Disk shown below slow your velocity to zero by holding the “-” key. The silly string will wrap around itself creating the disk. Then play around by pressing the B key, the A key, and then blow it up using the home key.

Disk Trick

Discussion

The heart of the Wii controlled silly string program is the line3D class and the Wii starter code provided in a previous post. Drawing a 3D line is really simple in Papervision. Just create a new line as shown below

new Line3D(lines, lineMaterial, lineSize, prevVertex3d, myVertexHere);

and give it a starting point and ending point as shown above. The string is then pushed forward by continually incrementing rotation (pitch, yaw, and roll) of the guiding sphere and using the moveForward command as shown below;

sphere.rotationX+=-(int(MyWiiIs.pitch*400)/100);
sphere.rotationY+=(int(MyWiiIs.yaw*400)/100);
sphere.rotationZ+=(int(MyWiiIs.roll*400)/100);

sphere.moveForward(forwardSpeed);

Finally, the string is constrained to a sphere by setting its last coordinates to the guiding sphere’s coordinates. The radius of the sphere constraint can be changed by changing the velocity of your string.

sphere.x=lines.x;
sphere.y=lines.y;
sphere.z=lines.z;

Click the more button below to see the entire code.

Wii Getting Started and Starter Code

We are dedicating a chapter of your book to creating Papervision games and programming the Wii. Getting started with the Wii is really easy and super fun. And if you have nine kids like I do, you’ll be an immediate success at home. Take cover as your kids scramble in front of your computer frantically fighting over the Wii controller to try out you newest and greatest Wii creation. With the Wii, you add a new dimension to your 3D experience. Here are the steps to get you started (along with helpful starter code as well):

• Buy a Wii controller (you need only the controller). I got a new one off of Amazon for $35 (I suggest you buy new)
• Check out the great WiiFlash video tutorial by Thibault Imberton
• Download the WiiFlash classes at http://wiiflash.bytearray.org/?page_id=50
• Insert the classes into your Flex or Flash project (you can use classes or the SWC provided)
• Try out the WiiFlash examples given in the WiiFlash Download.
• If you do not have bluetooth on your machine purchase an external bluetooth USB connector. I got the AZiO BTD603-132 USB 2.0 Bluetooth Adaptermine from NewEgg.com for $14.99. Note: You must install the driver that comes with your external bluetooth for it to detect your Wii properly.
  
• Place a Wii server shortcut on your desktop – you’ll be clicking on it a bunch.
  
• Download my starter code and run it, examine the trace statements as you press the different buttons on your Wii.
• Add the Papervision classes to your project files and you are ready to make your first Papervision Wii game.

With the Wii starter code and the Papervision classes you are now ready to start programming your own Wii games. More on that later;

Wii Starter Code Creation

The Wii starter code is amazingly simple. It’s adapted from the Wiimote Demo provided in the WiiFlash examples folder. And it is designed to make it easy for you to put anywhere. Here is how it works.

• After importing the appropriate classes, you must instantiate the Wiimote and then connect to your Wii server as follows;

MyWiiIs = new Wiimote();
MyWiiIs.connect();

• Next declare a listener for a button on your Wii controller (both press and release are detectable)

MyWiiIs.addEventListener( ButtonEvent.A_PRESS, onAPressed );
MyWiiIs.addEventListener( ButtonEvent.A_RELEASE, onAReleased);

• Finally, create functions for your listeners that are executed when you click on the appropriate button;

private function onAPressed ( pEvt:ButtonEvent ):void
{
trace(“pressed A”);
}

private function onAReleased ( pEvt:ButtonEvent ):void
{
trace(“released A”);
}

The only other thing to watch out for is reacting to pitch, yaw, roll, sensorX, sensorY, sensorZ, and batteryLevel. I found that this was best handled in Papervision’s render loop using your instantiated name and dot syntax such as

MyWiiIs.pitch

Also, depending on the application you might need a smoothing function since the Wii numbers are very accurate and a little jumpy, and also you must take the integer value of the Wii sensor values (shown below) or you may get a lookAt error. In the example below, you’re controlling the rotation of a sphere using Wii pitch, yaw, and roll. But you take the interger value. To get two decimal places, multiply by 100 and then divide by 100 after taking the integer value as shown below.

sphere.rotationX+=-4*(int(MyWiiIs.pitch*100)/100);
sphere.rotationY+=4*(int(MyWiiIs.yaw*100)/100);
sphere.rotationZ+=4*(int(MyWiiIs.roll*400)/100);

That’s all there is to it. As powerful as WiiFlash is, it’s amazing that it is so simple to use.

Click more to see the complete web code.