Sunil's Blog

Icon

Mar 11, 2011 0

Finishing My BlackBerry PlayBook App With A Little Help From You – A Request for Robo Designs

People of Earth,

Somewhere between client visits, site launches, a massive internal project and a bad “man” cold, I’ve been able to cobble together something resembling a tablet friendly version of a Robo drawing app for the BlackBerry PlayBook. Here are some teaser screen shots of the app in progress:

Teaser #1:

Teaser #2:

Teaser #3:

My PlayBook app is an application that allows users to design and build their own paper action figures. In an effort to make my app less dependent on Internet access, I’ve decided to ship my app with some default Robo design templates to view and edit locally.

An example of what you can make with the Robo app:

Step 1. Take a blank template.

Step 2. Use the web app to design….

Step 3. …Screen Accurate Coco:

Step 4. Build Screen Accurate Coco:

ANYONE who is interested can submit designs that will ship with my PlayBook app. The top 3 designs that are deemed most creative by a panel of my peers, will be physically assembled by me and shipped to the winning artists for free. I will also include accreditation for the winning artists in my app.

There are two options for submitting a design:

1. The web app tool for creating and submitting designs. It is clearly VERY rough and a work in progress, but should serve its purpose:
http://www.paper-robo.com/#/builder

2. If you want to cheat and use Photoshop by all means go ahead. Either email me the altered template or upload to the site via the upload skin tool. Download the blank Robo template here.

If you email me the design, please include:
1. Builder Name
2. Robo Name
3. Special Move

My email:
info AT paper-robo.com

Rules:
There are no rules. Designs can be what ever you come up with, and you’re only limited by your imagination. The deadline for submitting designs will be April 19, 2011, when the PlayBook is available for retail sale.

Thanks and Have Fun,

- Sunil

Jul 31, 2009 0

Oh My Bosh! Design Your Very Own Chris Bosh Paper-Robo in Augmented Reality – Adding Interactivity to Your AR Apps

bosh_lbj

With Chris Bosh’s  contract with the Raptors expiring soon, there’s been a lot of talk of him being shopped around next season. Sources say that the Cleveland Cavaliers have targeted Bosh to play along side King James.

While I don’t want to see Chris leave Toronto, it wouldn’t surprise me to see him follow the path of other marquee players before him : Stoudemire (he was big back in the day), Carter, McGrady and Camby.

Where do you think Chris will go?

With this latest flar demo you can make your predictions by redesigning his jersey in AR, download the parts to your desktop, and print/assemble your own Paper-Robo! You can also upload your own custom skin to preview what the robo will look like in AR.

For anyone who designs a killer Bosh skin through this app or even better photoshop, please send them my way and I’ll post them here! I bet some of CB4′s twitter army could make some sick custom bots.

Here’s a link to the live demo to try yourself:

Bosh Demo

Direct your iphone here (don’t waste paper, if you can help it!!):

Download Bosh Marker

Download Bosh Paper-Robo Parts

CODE SNIPPETS:

Adding mouse events to collada models and manipulating materials

This functionality is simply an extension of the helloMouse3D example that ships with the Papervision3D libraries. The only difference here is that instead of manipulating the material of a Papervision3D primitive, you are manipulating the material of a 3D collada model.

One thing I discovered is that material lists for colladas are wonky, and in order to add interactivity to 3D models  you have to add listeners directly to the to the mesh associated with that material and only when the model has completely loaded. As you can see be the live demo, the focus of the mouse on the model sometimes gets lost. I suspect that this is due to the collada model I’m using which has been to hell and back to get it rendering properly in Papervision3D. I built the model 2 years ago in Sketchup when either Papervision 1.0 or 1.5 around! From Sketchup I exported it as a collada, and brought it into 3DS max to make a uv map. I exported from 3Ds max as a collada, only to import the result into Blender, to obtain a collada with settings the Papervision3d can render.

When I have time I will try the demo with a simpler collada to see if this loss of focus is still a problem. If you have any ideas why I’m losing focus on my model please let me know!

public function addMarker(marker : FLARMarker) : void
  1.   {
  2.    // store marker
  3.    var markerList : Vector. = this.markersByPatternId[marker.patternId];
  4.    markerList.push( marker );
  5.  
  6.    var container : DisplayObject3D = new DisplayObject3D( );
  7.    robo = new Collada( FLARManager._GATEWAY + "/resources/models/myrobo4flippedblender.xml" );
  8.    robo.scale = .07;
  9.    robo.rotationX = 90;
  10.    robo.rotationZ = 90;
  11.    robo.z = robo.z – 100;
  12.    robo.addEventListener( FileLoadEvent.LOAD_COMPLETE, daeCompleteHandler );
  13.    container.addChild( robo );
  14.    this.scene3D.addChild( container );
  15.  
  16.    // associate container with corresponding marker
  17.    this.containersByMarker[marker] = container;
  18.  
  19.   }
  20.  
  21.   public function daeCompleteHandler(event : Event) : void
  22.   {
  23.  
  24.    robo.getChildByName( "Model" ).addEventListener( InteractiveScene3DEvent.OBJECT_MOVE, handleMouseMove );
  25.    robo.getChildByName( "Model" ).addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, handleMouseDown );
  26.  
  27.    surface = new Sprite( );
  28.  
  29.    textureContainer = new Sprite( );
  30.  
  31.    __boshSkin = new boshSkin_mc( );
  32.  
  33.    __boshSkin.addChild( textureContainer );
  34.  
  35.    __boshSkin.addChild( surface );
  36.  
  37.    var mat : MovieMaterial = new MovieMaterial( __boshSkin );
  38.    mat.interactive = true;
  39.    mat.animated = true;
  40.    mat.allowAutoResize = false;
  41.    mat.updateBitmap( )
  42.    robo.getChildByName( "Model" ).material = mat;
  43.   }
  44.  
  45. public function handleMouseDown(e : InteractiveScene3DEvent) : void
  46.   {
  47.    //Start Drawing
  48.    if(surface != null)
  49.    {
  50.     surface.graphics.beginFill( __activeColour, 1 );
  51.     surface.graphics.drawCircle( vMouse.x, vMouse.y, 3 )
  52.     surface.graphics.endFill( );
  53.    }
  54.   }
  55.  
  56. public function handleMouseMove(e : InteractiveScene3DEvent) : void
  57.   {
  58.    if(InteractiveSceneManager.MOUSE_IS_DOWN)
  59.    {
  60.     //Continue drawing when the mouse is down
  61.     if(surface != null)
  62.     {
  63.      surface.graphics.beginFill( __activeColour, 1 );
  64.      surface.graphics.drawCircle( vMouse.x, vMouse.y, 3 )
  65.      surface.graphics.endFill( );
  66.     }
  67.    }
  68.   }

Flash Player 10 JPEG encoding

A colleague at work pointed me towards a JPEG Async Encoder class that allows you to to merge large BitmapData objects to form a large JPEG, getting around Flash player 10 BitmapData size restrictions. I didn’t need to encode something beyond 4,095 x 4,095 for this particular demo, but it’s useful to know that there is a work around.

Flash Player 10 reading and writing files locally

This demo uses a some new features of Flash 10, reading and writing files locally between the browser and OS without the need to write any server side code.

Using the FileReference.load() method you can allow a user to select a file locally and load it directly into the Flash plugin without having to upload it to a server.

FLARManager v0.5 (for FLARToolkit)

This is my first demo to include the newest FLARManager update. Eric Socolofsky has updated his framework to include some new optimizations, one of which is adaptive thresholding, which allows markers to be detectable in low light conditions.

AR Musings…

Is the wow factor is still there AR apps? Most offerings simply involve displaying a model on a glyph, which captures the user’s attention for about 2 minutes. There are a few hoops to jump through, in order to get a user to interact with an AR app: you have to print out a marker, need a webcam or have to download a specific plugin to view AR content (not as big a deal these days with broadband connections). Also imagine all the sheets of paper used around the world for a website that promotes renewable energy resources! I’m not sure what the solution is for saving our trees, other than offering digital versions of as AR marker that could displayed on a mobile device…Alternately, AR websites could offer a keyboard shortcut that mimics a marker without having to print it out.

Here are some interesting examples of interactive AR apps that have popped up recently that have started to push AR beyond displaying simple models in 3d space:

Eminem’s 3d Graffiti Art App:


Unic8′s use of  Bartek Drozdz‘s AS3Dmod library to bend primitives based on marker proximity and angle:

http://www.unic8.com/labs/flarmagnet-full-interactive-experience

The dev(s) at unic8 Studios have also done some interesting interactive AR demos with sound and light.

BMW Z4 3D paintbrush

Sep 23, 2007 0

Portrait Assignment

Here’s a link to my portrait assignment. It’s still a work in progress. The beat animations and song choice are a more of a commentary on the hip-hop world reaching back and getting great vintage stuff, than of my personality. The picture is my take on Jay-Z’s “The Black Album” cover art. I took it with the webcam on my MacBook Pro. The hat is a Michigan State Spartans hat that I picked up in a bargain bin for $5. I just liked the “S”. The song is “Can’t Forget About You (Featuring Chrisette Michelle)” by Nas. Carlos mentioned that the record looked like a coin, so I replaced that bitmap with a better bitmap. I chose a Decca LP, because that was Nat King Cole’s label (the sample in song was taken from Nat King Cole – Unforgettable). If you press shift + d you can see the records spinning clearly. I used shape tweening to morph between the cards suits (clubs, spades, diamonds, and hearts). My portrait is interactive in that you can drag the beats around the stage.

http://www.suniljohn.com/projects/portrait/portrait2.html

About Me

I'm currently a Flash Developer in Toronto, Ontario. This blog is a resource library and journal, researching emerging new media and whatever else I see fit. Some of my personal and professional work.

Twitter