Combining PixelBender paint mixing with TUIO blob size

This post has been sitting around in draft for a while now so thought I’d better publish it. I finally got around to recording a video demo of an app I’ve been working on for a client. I needed to combine my PixelBender paint mixing with blob size so that the brush is the size of the object touching the screen. The video below demonstrates the app using TUIO and CCV. The final version will most likely be using GestureWorks and an Iduem screen.

Retrieving and using blob size from CCV with AS3

One thing I have been wanting to do for a quite a while now with my touch screen is use touch size data to determine the size of lines drawn on the screen. The other day I finally got around to researching experimenting with CCV. It turns out that CCV can send the width and height of blobs along with coordinates and other data but its not turned on by default and there is no option in the GUI to turn it on.

Here’s a quick demo using a paint brush:


AS3: Calculate the perceived brightness of a colour

This short post is mainly just a reference for myself but could also come in handy in your projects. I wanted to set text to either white or black depending on the brightness of the colour it was sitting on. I came across this post which provided a formula and some C# code so I was easily able to convert it to AS3. Since red,green and blue are not equally as bright – eg. blue is darker than green – its not as simple as taking an average of all the channels. So the following formula uses some factors to weight the channels in relation to how bright they really appear.

brightness = sqrt( 0.241 R2  + 0.691 G2  + 0.068 B2  )


A simple way to get native alerts with Adobe AIR

In an AIR project I am currently working on I wanted to have native alert boxes in my app rather than building custom pop up boxes. There is no built in way to get native alerts in AIR and I remembered reading this interview over at a while back where a developer at Illume used StageWebView to trigger an alert from a HTML page. So I decided to make a class called NativeAlert that uses AIR’s HTMLLoader to trigger alerts.


New Showreel!

I have just uploaded my new showreel to Vimeo. A couple weeks ago I was listening to TripleJ in the car and I heard this amazingly bizarre, vintage, sci-fi, horror metal song come on. Unfortunately I missed what it was called or who the artist was so I spent ages trying to figure it out. READ MORE

Paint mixing with PixelBender

In my post yesterday I was demonstrating my attempt to create a drawing app using Stage3D for graphics acceleration. As it turns out Stage3D is not built for this kind of ‘per pixel’ manipulation on a drawing canvas. I mentioned at the end of the article that I might explore PixelBender as an alternative for the number crunching. So here it is, my first attempt at building my own Shader in PixelBender for paint mixing.

As you may already know, PixelBender is a a shader language built by Adobe that can be universally used between applications such as Flash Player, Photoshop and After Effects. It is based on the OpenGL Shading Language (GLSL) and is similar to C++. It can be used with Flash to create custom bitmap filters, effects or even to hand off some complex calculations. The great thing about using Pixel Bender is that it runs in a separate thread to Flash Player and can use multiple threads and even multiple cores. So the heavy lifting doesn’t lock up the Flash Player and can run parallel. This makes for some much, much faster processing.


Painting with Stage3D using Starling

I’ve been trying to find ways to improve the performance of paint mixing with Flash and I though I could try using Stage3D for hardware accelerated graphics. But then I realised that Stage 3D is optimised for polygons and 3D models so it was probably not the best solution. I wanted to see if it was possible anyway and thanks to the Starling Framework and a bit of help from Thibault Imberts book it turns out its possible using the RenderTexture on an Image object, but it’s not really possible to do any complex drawing. Starling’s Image object is the equivalent of the Bitmap class, which is using to display any BitmapData. I made an example which you can see below.

By creating a RenderTexture for an Image object, you can use the RenderTexture’s draw() method to draw another Image’s texture onto it. This is similar to using BitmapData and draw() to draw one bitmap onto another.  But Stage3 doesn’t use pixels, it uses textures mapped to triangles instead therefore at this stage  it’s not possible to use something like getPixel() for get colour data from the ‘canvas’.

Spray Paint Stencils in Flash – V2

Well, here we are with version 2 of my Flash spray paint stencils. I’ve been meaning to do a post on this for a while now! This time the paint is rendered much quicker by doing away with an embedded for loop that was in V1. This time instead of looping through each pixel on the canvas, I am drawing using copyPixels utilising an alpha bitmap as an alpha channel and matrices to transform them correctly based on the scale, rotation and position of the stencil movieclip. Another cool feature I added was a ‘muck’ layer on the stencil. Now paint that was on top of the stencil stays on the stencil – just like in real life!


PixelPerfect digital art wall

Update: It has come to my attention that some companies have been claiming that Classy Event Group is just a software reseller for Virtual Graffiti Wall. This is entirely untrue. I have worked with Classy Event Group to design and develop this software for them. Classy Event Group is the sole owner of this software and it is not available anywhere else.

PixelPerfect is a digital art wall app I built for Classy Event Group using Adobe AIR. After seeing a video I posted over at the  NUI Group forums they asked me to build a customised version of my stenciling and painting app for their digital art wall. PixelPerfect uses a new stencilling method which I developed which is not only heaps faster, it also leaves paint on the stencils – something which we hadn’t seen before in previous stencil applications. The app has the ability to load in background images and transparent foreground images and the saving and printing of creations. The service provided by Classy Events Group also enables a photobooth function. The app watches a folder for photos and a DSLR saves images to the folder enabling the user to instantly pull up their photo and draw on it.


Opening a file in a non-default application with Adobe AIR

On a current project I had to launch files in an application that was not Windows’ default app for opening. Specifically – I needed to open images in Photoshop or Fireworks from my AIR app, even when the default app for .png and .jpg is the Windows Photo Viewer.

As you might already know the File API has had the  file.openWithDefaultApplication() method since AIR 2.0. But this wasn’t going to cut it since I needed to open in a specific application. So I turned to the NativeProcess API which allows you to launch a native process from your AIR app (i.e run an .exe on Windows). I decided I should make a post on how to do it since I couldn’t find any good resources or examples for it.