synergyseeker.com

Apple Magic Mouse

Apple recently relesased a whole wack of new products; new iMac, iPad among the big highlights. Lost in the hysteria is the new Apple Magic Mouse. All right, I don’t usually go promoting things unless I have actually tried them and honestly found them to be of benefit to me. Sometimes, the simplest things just make life better. I dig wireless mice to begin with, because of the uncluttered look of my workspace and flexibility. So a wireless mouse is kind of a must for me to begin with. I have been using the Mighty Mouse from apple for a while now and was pretty happy with it. Then I stumbled upon this new Magic Mouse… and had to give it a go. I have to say without question this is the best mouse I have ever used.

In HCI (Human Computer Interaction) we study the full range of interfacing between man and machine. This covers everything from online shopping cart design, to voice recognition software. Even the simplest things, like the icon on a button can be critical to user satisfaction. Heck, even the material a button is made with is perceived at some level by the user interacting with it. Apple seems to get this arguably better than almost any company right now. So when they release something new, be it the new iPad or something as small as a new mouse, we pay attention. To be honest considering how much I interact with my machines each day, my keyboard and mouse are as important as anything else to me.

So, what’s so cool about this mouse anyway you ask? Well first off, it feels good. It’s a nice shape and works well in my hand. It also looks hot. Which is pretty cool for a mouse It is highly repsonsive, which is a must for a mouse, if you’re pushing pixels all day. Coolest though, it has a surface made up of sensors that actually detect your finger position and “gestures”. Yeah, cool is right. It can therefore transform from a single button mouse, to a two-button, it can detect scrolling in any direction. It can even zoom the screen with a hold of ctrl and “scrolling” Did I mention scrolling with no stupid mouse scroller or ball to move. That means nothing gumming up the thing. Trust me, if you use your apple mouse a lot you’ve had the damn ball get gummed up with dirt and god knows what and tried a hundred tricks for cleaning it out.

So, it may not change the world, but it changed my working hours, making things just run a little smoother. Meaning a liitle bit more energy in those long days of creating wild 3D presntations, new apps and games. Peace.

I was recently contracted to develop a new PaperVision3D project for Display Objects Inc. It’s a cool new page flip engine, much like the multitude  of flip engines already out there, but this time in 3D. The first thing I learned is that while many of these engines say they are 3D almost none actually are. So that didn’t help much when I was looking for ideas on how to go about doing this. Thankfully I had developed a couple similar models when building some new portfolio tools, so I was able to leverage much of that. The only visual question was how to get that nice bending effect on the planes when flipping. That’s where AS3DMod came in, which is a handy helper for doing things like twisting and bending 3d objects. It is open source and really  must have for your papervsion library.

I added a lot of nice features into this product, including making all copy searchable, and highlighting the results. I added a nice zoom slider bar, to let users set their own zoom level when reading. The whole thing is Search Engine Optimized so the contents of the “book” are searchable on Google. Still working away on features, but have a look at PageFlip3D™; if you want to learn more.

Many of you reading this may be struggling transitioning from procedural code styles to Object Oriented Programming. Yes, many developers in Flash are now OOP Jedi, but I have been pretty crazy busy these past few years building projects to lift my head up and look around. I hacked my way through many a job, with a hybrid of procedural spaghetti and my own half baked frameworks ( read: I had no idea what the hell I was doing until it worked).

I started in the early days of Flash, where coding was really an afterthought and mainly to make buttons work and add links. Everything was done in the timeline including the code. Yes, I admit it, my first AS3 Flash projects were gigantic unwieldy beasts with many heads all crammed roughly into a single giant class.

1. Buy a white board. I need to get away from sitting in front of the computer as often as I can, this is a huge gift for me. I can doodle, map out diagrams, and erase and move things around. (much neater than a chalk board )
2. Learn to do good analysis before even thinking of coding. This took a lot of self-control. I love to test things out and experiment, but this lead to me always cutting and pasting my experimental code into my production, which led down the path to the dark-side. Really learn to invest in analysis first before even writing any code.
3. Invest in the Design phase. Yes, again before you start coding, have a clear map of where you are going. The light really turned on for me, when I realized I could have a big part of my app laid out and it didn’t matter what language I would be using to build it. If my analysis was solid and my design followed logically, the code almost became filling in the blanks.
4. Don’t be afraid to go back to the white board and improve the design. Just because you are on to the implementation phase, doesn’t mean you can’t go back and make improvements. Just remember to document those changes. I am such a geek, I even take pictures of my white board to save versions of  my models in case I forget or go off on a tangent. I really love that damn board.

So, I wanted to mention a few resources that I have found invaluable in the process of developing my understanding of OOP for Flash. First there are some excellent books, Essential ActionScript 3.0 , by Colin Moock, which is an excellent introduction to the language as well as understanding OOP as it applies to Flash. The killer book for me though is, Advanced ActionScript 3 with Design Patterns , by Joey Lott and Dann Patterson. It not only outlines design patterns for AS3, but gives great direction on the process of deciding which patterns to use. It also gave me great ideas as to how to go about the initial Analysis and Design phases. Lastly, I would recommend exploring the PaperVision3D code. The library of classes are filled with excellent techniques and creative solutions. The intuition and expertise of the core team is a blessing for those seeking models for their own work.

There are many great books, teachers and resources out there on the subject, but these are just a few that really helped me on the journey. If you are not thinking of everything in the world in terms of classes and OOP, don’t worry. Soon, all will be clear. Until then, don’t give up, enlightenment is just beyond the horizon.

Finally got some time to dive into the new classes in JigLibFlash. If you’ve grabbed the latest rev, 92 or later, you will see some changes to streamline things a bit. Have a look here for the run down covered in a few posts. It is now easier to pick your flavor of 3D engine by declaring the appropriate physics class (see plugin folder for away3D, sandy3D and papervision3D). Also API docs are available now which is killer nice too.

Drag and Drop 3D Objects in JigLibFlash

Anyway, I put together this little demo, which I aim to revise and do more with in coming days. I added the new mouseConstraint class to this one to show how it looks in action. Click and drag on the little blue cubes to turf them around the room.

Code bits that are noteworthy:

Declaring new class:

physics = new Papervision3DPhysics(scene, 8);

Creating objects, for example ground:

ground = physics.createGround(yourMaterial, 500, 0);

Adding listener for Mouse interactions:

boxes[i].skin.mesh.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, handleMousePress);

Check out the latest examples in the latest rev for examples on how to handle these events. More to come…

Paperockey3D

Always working on new ideas. And well this one is not that new. I have been on and off working on this old -school table top hockey concept. It is Papervision3D and 2d physics. I am going to port it over to the 3d Physics engine jiglibflash very soon and see if that spices it up a bit

I have also been working on rounded corner boards. I am going to post on that shortly showing how the physics works for that. Give it a little play and see what you think so far.

In physics engines constraints are basically the means to bind objects together. Remember making crafts in grade school? Imagine you have 2 of those old Styrofoam balls and you jam each one on to the end of a stick. Well in jiglibflash the balls are called JSpheres and the stick is the JConstraintPoint. In the demo you can see how this looks. This is the basic way to create more complex shapes using basic shapes in the engine. The way to create the constaint is using the JConstraintPoint object:

JConstraintPoint(body0:RigidBody, body0Pos:JNumber3D, body1:RigidBody, body1Pos:JNumber3D, allowedDistance:Number = 1, timescale:Number = 1)

You can experiment with allowedDistance and timescale to get various results, which to me equate to various degrees of elasticity or rigidity.

So, after you create some objects to join (i created a little array of JSpheres called ballBody), you need to join them together. Here’s an example:

var pos1:JNumber3D;
var pos2:JNumber3D;
chain = new Array();
for (i = 1; i < ballBody.length; i++ )
{
trace(i);
pos1 = JNumber3D.multiply(JNumber3D.UP, -ballBody[i - 1].BoundingSphere);
pos2 = JNumber3D.multiply(JNumber3D.UP, ballBody[i].BoundingSphere);
chain[i] = new JConstraintPoint(ballBody[i - 1], pos1, ballBody[i], pos2, 1, 0.2);
PhysicsSystem.getInstance().AddConstraint(chain[i]);
}


In the above code I loop through my objects (the ballBody array) and add constraints between them. So in effect I “chain” them together. The result is a little simple snake body.

You can get creative and come up with more complex shapes and configurations, but this is the basic concept.

Hope that helps. More to come…

Ok sounds a little mixed bag I know, but really I wanted to get a few ideas up.  In this demo I am loading a DAE, applying shading to my funky material coated ball and also doing some fun math with the 2 objects as they relate to each other. So the bit that took me a while to track down was the shading of material on a sphere. I thought maybe I was to use the CompositeMaterial class, but alas, that did not work and seems better suited to mesh, color cominations then MovieMaterials or BitmapMaterials with shading. Some cruising through the shaders classes though relvealed the answers:


var ballMat:MovieAssetMaterial=new MovieAssetMaterial("paws_mat");

ballMat.tiled=true;

var ballShader : GouraudShader = new GouraudShader(mylight, 0xFFFFFF,0x404040);

var ballShadedMat:ShadedMaterial = new ShadedMaterial(ballMat, ballShader);


As for the DAE, it was a straight forward load as usual in PV3D and then capturing the load event for the DAE file. Then I was able to add it to the scene. What I did however was mapped it to the positions of my funky shaded sphere to allow it to sit on top. Yeah it looks kinda nuts right now, but it will become the basis for a sweet character shortly. To give it a little extra cool it also leans a little with the speed of the ball, the faster it moves the more it slides around on top. All the goodness about positions and velocities can be found by accessing the CurrentState of a body in the physics model. Give me a buzz if you need more details. Peace.

Alright, so I finally got a few hours to nail down my first demo with jiglibflash. This one shows a room with 4 walls and a floor to contain the ball. I left in some “debris” to knock around. This could be the basics for a racquet ball game or similar. The set up is pretty straight forward. I grabbed the current rev from here which was rev 25. I read through as much of the class code as I could quickly get my head around and dove in. 

Space bar to jump, arrows to move ball around.

So the first thing to realize when setting up walls is that the code is well a little funky.

plane3.MoveTo(new JNumber3D(-250, 300,0),JMatrix3D.rotationY(90  * Math.PI/180));

Ok so whats this do? Well, this is using the MoveTo method of the JPlane class to position in the world. (Yeah the syntax could use some help). So there are 2 tricks:

1. the second parameter of MoveTo uses the SetOrientation method which expects a JMatrix3D value. Some examples are JMatrix3D.IDENTITY and then various rotations (rotationX,rotationY,rotationZ) The thing to remember is these are radians. The easiest way to convert degress to radians is: degrees * (Math.PI /180)So step 1, get the walls oriented correctly. You need 2 rotated about the X-axis and 2 rotated about the Y.
2. position objects for the first parameter by their centers.  In my example above you see, I have set that wall to be the wall on the left at -250 on the x and at 0 on the Z. The opposite wall is at 250 on the x and 0 on the Z.

That’s about it, nothing too fancy; my version of a quick hello jiglibgflash.

I am excited to announce I am joining the new jiglibflash team, to help develop a solid new 3D Physics Engine for Flash.

 The moment I embarked on the Flash 3D adventure I began hunting for a decent physics engine to couple with the already amazing PaperVision3D . I immediately jumped into Box2D and APE and started hammering away with those. My initial experiments in PaperHockey3D were a lot of fun and the 2D engines worked great. If you need to couple with a 2D physics engine I’d strongly recomend the Box2D model for max flexibility or APE for ease of use (although I think this dead or dying now). 

But wait a sec… I thought this was all about 3D, so where were the 3D physics engines. Well, at first there was exactly none that I could find for Flash. Then WOW came out which was built on the APE engine. You can google and find lots of write ups on WOW. 

So now comes jiglibflash, a port of the popular jiglib physics engine. I’ll be writting loads about this over the coming weeks as I dive into the code and start churning out demos. Look forward to sharing as I go.