Colour averaging and matching

This experiment uses Pixelbender to create a grid of average colours. Then we turn the whole grid into separate sprites and sample the colour from each segment.

We then have to match each of these colours to one of 64 colours from the pre-defined palette. The problem here is that if we try to match to the nearest numerical HEX / RGB value, we get a lot of strange results. Greens go pink etc. Numerical distance between colours is no use, we have to switch to perceptual colour difference. We can do this by switching to LAB colour space. The results are pretty accurate I think but results could be improved. The next step is to filter out background noise, lighting/gradient issues and to promote contrasting colours.

Here is the system so far..

Note
These tests are my own and I expect lots more could have been done to optimise them. It would be interesting to hear how they perform on different devices. I am using a Samsung Galaxy Nexus and ASUS Transformer T101 tablet, both running Android 4

I’m seeing what is possible with Stage3D on my Android devices using various different frameworks.

If anyone else stumbles across these tests, please let me know how they perform for you.
Download Air 3.2 here http://labs.adobe.com/downloads/air3-2.html

BunnyMark

This is from http://www.bytearray.org/?p=4074. All credits for this benchmark are on this page. Thankyou.

The framerate for this test is 30 fps. Total bunnies = amount of bunnies on screen before FPS falters to around 25-27 fps

Walker Spritesheet – 100 animated textures

Particles

Particles generated with OneByOne particle editor. Change emitter type to 2 in the generated XML for expanding explosion.

Useful stuff

• Flash Player 11.2 and AIR 3.2 Release Notes

Spent the last 2 days setting up a development environment and testing out performance of Air 3.2 on my Android devices. As usual It’s been an epic voyage of googling and trial and error tests. Thought I better write it down as I go:

Environment Setup

After a lot of testing in both FDT and FlashDevelop, I have chosen the latter to go forward with Mobile Air development. The included Air Mobile AS3 App template makes a potentially complex and frustrating experience a lot easier.

SDK setup

The first thing to do is get your SDK setup. This is a 3 step process:

1. Grab the latest Flex SDK from here http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK
2. Grab the Stage3D enabled Air SDK http://labs.adobe.com/downloads/air3-2.html you can find the SDK at the bottom of the page. Air 3.2 is the minimum version
3. Merge the SDKs: Copy all of the files and folders from the Air SDK and paste them into the Flex SDK, overwriting everything when prompted.

Now you have an SDK ready for Mobile Stage3D development.

Install Air 3.2 on your system and Android devices

All of the Air 3.2 runtimes can be found here http://labs.adobe.com/downloads/air3-2.html

Create a new Air Mobile AS3 App

Make sure you have the very latest FlashDevelop build.

Choose the “Air Mobile AS3 App” template in FlashDevelop and watch in amazement as all the files, folders, icons and build scripts are created for you. Next thing to do is configure the project to target Air 3.2. This is the tricky part.

1. Configure “application.xml”
   • Change to <application xmlns=”http://ns.adobe.com/air/application/3.2″>
   • Add or amend the line <renderMode>direct</renderMode>
   • This line needs to be added and is a potential pitfall: <depthAndStencil>false</depthAndStencil>
     This line caused a few headaches. For the few tests I have done, I have set this to false. If the line was omitted, I get no output at all. I believe for Away3D this has to be set to true. I do not know enough to comment further at this stage.
2. Edit Project properties
   • Go to Project–> Properties –> Output.
     Platform = Air Mobile
     Version = 3.2. (If 3.2 is not available, ensure you have latest FlashDevelop)
   • Go to Project–> Properties –> SDK.
     Choose your new Air 3.2 enabled SDK from this list. If you have not added it already, go back to Tools –> Program settings –> AS3Context –> Installed Flex SDKs and add it there
   • Go to Project–> Properties –> Compiler Options –> Additional Compiler Options.
     Add the value  -swf-version=15. I initially found that setting the version to 15 resulted in no output at all. I then changed <depthAndStencil>to false in the application descriptor, and everything seemed fine.
3. Don’t miss this bit!
   • You must also edit “bat/SetupSDK.bat” in the Project folder.  :: Path to Flex SDK
     Manually add the path to the Flex SDK.

Building and testing APK

This is pretty straightforward with the scripts FlashDevelop gives you:

• Edit the file Run.bat and change the target to android-test or debug
• Create a certificate for your app using /bat/CreateCertificate.bat

Now just make sure your device allows Unknown Sources and has USB debugging enabled (and it plugged in of course). If you do not have the drivers for your device, see the universal drivers link below

You can now run your application and it will install and run on the device. Execute the file PackageApp.bat to build a “release” version amongst other options including captive runtime.

Think that will do it!

Galaxy Nexus Drivers

I didn’t have the drivers to automatically install apps directly to my Nexus. Thanks to 1wayjonny for these universal ADB drivers

Facebook + Three.js

First experiment with three.js. Just a big 3D blob of your facebook friend images link. Using Mr Doobs three.js.

Rendered using canvas.

WebGL and Threejs shaders

This is an experiment with animated shaders and WebGL. It uses ThreeJS and a shader called Monjori. It is perhaps the most exciting and dramatic spinning cube ever made. Requires not using IE.

View here

Overview

An interactive consumer information site for Pfizer and their Viagra brand. Users are presented with a view of a pristine laboratory. Various “hotspots” invite the user to interact and reveal the awful alternative lab beneath

Development

Developed in pure AS3 using Robotlegs MVCS framework. I had to do lots of animation and visual work. This was done with script or frame-by-frame work. The lovely static 3D artwork was created by Jeffrey Osborne @ Rapp
The site is also localised so all text is from XML

Screenshots

Overview

This was a major promotion for Bacardi’s new brand “Oakheart”. It was a Facebook “App” reached via Bacardi’s main Facebook presence. The promotion ran for a month and handled thousands of users every day.

Development

The project was developed with AS3 using the Robotlegs MVCS framework. Facebook authorisation was handled via Javascript and made heavy use of server-side HTTPServices and JSON.

Other technologies used:

• Facebook Graph API
• YouTube API
• After Effects for some animated elements
• Sound effects and sample work in Adobe Soundbooth

Offline demonstrations

These demos are missing a lot and are used to preview visuals.

Win a bottle
Site inactive
Unused explosion animation

Screenshots

Just getting back into Stage3D – I find getting the development environment set up is a little tricky, so this guide is a future reference for me. Hope it helps anyone else who finds it.

I am using FDT 4.5

1. Download the latest Flex SDK  http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK
   At the time of writing, the latest was 4.5.1
2. This SDK does not contain the required “playerglobal.swc” required to develop for Flash Player 11. So, next thing we need to do is update that. Download from here http://www.adobe.com/support/flashplayer/downloads.html
3. Use this to replace the existing playerglobal.swc which is located in the SDK at ‘\frameworks\libs\player\10.2′
   Be sure to rename the new swc to “playerglobal.swc”. The  download in (2) is named “playerglobal11_0.swc” at the time of writing – this must be changed.
4. Ok that’s it for the SDK. Back into FDT and create a new AS3 project. Choose “include HTML wrapper” to speed things along.
5. On the SDK configuration screen, you may need to add the new SDK you have just created. Choose 10.2 as the player version (it will actually publish to version 11 thanks to the new playerglobal.swc added in 3)
6. Finish creating the project and go to “run configurations”. Open up the tab (“compiler options”) and add the line
   “-swf-version=13″. See screenshot below





7. Apply settings these settings and then we’re on the final step
8. Edit the HTML file which will be used to embed the Flash. In the embed code, make sure the wmode parameter is set to “direct” if this parameter does not exist, create it.params.wmode = “direct”; in SWFObject style embedding
   <param name=”wmode” value=”direct” /> in standard Object style embedding

That should do it for the basic setup of FDT and Stage3D development.

Development

The project was developed with Flash Builder using the Parsley MVC framework. I joined the development team to take over the Actionscript development and take the project to completion. It was one of the more complex projects that I have worked on and featured a high level of user interaction. The main challenge was to capture users faces via webcam or by uploading a photograph and mapping them onto several video based animations. The technical issues included making sure this difficult effect was as realistic as possible.

Other challenges included the storage and loading of user submitted data which was achieved by flash remoting with the AMFPHP library. This was a viral campaign and so each and every use of the application was recorded and possibly distributed to other users via Facebook, Email or Twitter.

Press release

This is taken from the Sapient Nitro press release

“Set in a fictional village ‘Soggy Bottom’, three characters – a butcher, farmer and elderly lady (Bob Trickle, Tim Sprinkle & Gladys Drizzle) – appear to innocently man their stalls at the local fete but surprisingly start a water fight aiming directly at consumers’ computer screens. In creating the Great British Water Fight campaign, SapientNitro is helping Energy Saving Trust raise awareness about the importance of saving water and energy in the real world.

What makes the campaign both unique and engaging, is that the consumer is able to map their face onto one of the characters in the video, creating a personalised soaking they can share with their friends via Facebook and Twitter. The goal is to make saving water fun while getting people thinking about their personal water and energy consumption.”