Flash/Air Laser Graffiti

// February 7th, 2008 // Experiments, Webcam

After seeing this amazing video on youtube of laser graffiti (where the software is made in .Net),
I realized that this can also be done in flash. So I made a small laser graffiti Air application.

See here the result:

I would release the source, but it’s not clean and I made it for my screen, projector, camera and webcam settings. But basicly it works like this:

Create a bitmapData object of your video object which displays the camera. With a ColorMatrixFilter you remove all but the red color values. And finally, with the getColorBoundsRect method you get the rectangle object of the red values (= my red laser pointer). the x and y position is the position of the pointer, there you start drawing. Simple as that. :)

bmd.draw(video)
 
var matrix:Array = new Array();
matrix = matrix.concat([1.5,0 , 0, 0, 0]);
matrix = matrix.concat([0,0, 0, 0, 0]);
matrix = matrix.concat([0, 0, 0, 0, 0]);
matrix = matrix.concat([0, 0, 0, 0, 0]);
 
redFilter = new ColorMatrixFilter(matrix);
bmd.applyFilter(bmd,bmd.rect,new Point(0,0),redFilter)
var maskColor:uint = 0xFF0000;
var color:uint = 0xFF0000;
var redBounds:Rectangle = bmd.getColorBoundsRect(maskColor, color, true);
 
trace (redBounds.x)
trace (redBounds.y)
Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

9 Responses to “Flash/Air Laser Graffiti”

  1. Rogério Miranda says:

    Please post de .fla arquive for studenty.
    ;)

  2. webreake says:

    I dont think its neccesary to release source code or .fla since you are already showing the important part of the code :)
    i did the same but using threshold to isolate the red color, but im still trying to get a gama of colors (darker red, brigther red, etc..)

    You think using your color matrix would be posible ?

  3. Kris says:

    Hallo webreake,
    You can try it. But I think it only works in a controlled environment (code for the exact sircumstance in which you want to do it)

  4. webreake says:

    i was thinking how to do it until i remember that blur is a way to average color zones so now i just have to loop for 4 different colors to detect red under different light sources.
    thanks Kris.

  5. Mike says:

    Hello!
    I am tring to do this same thing for a current school project, only difference is im trying to figure it out in AS3… I cant seem to find anything out there on it. any help?
    Thank you!
    -Mike

  6. Mike says:

    Hello again!
    I have been working to figure this out and every time i try to tet my file i get an error : 2005

    package{
    import flash.display.Sprite;
    import flash.media.Camera;
    import flash.media.Video;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.geom.Rectangle;
    import flash.geom.Point;
    import flash.filters.ColorMatrixFilter;

    public class test extends Sprite {
    private var cam:Camera;
    private var video:Video;

    public function test() {

    var bmd:BitmapData = new BitmapData(640, 480);
    bmd.draw(video)

    var matrix:Array = new Array();
    matrix = matrix.concat([1.5,0 , 0, 0, 0]);
    matrix = matrix.concat([0,0, 0, 0, 0]);
    matrix = matrix.concat([0, 0, 0, 0, 0]);
    matrix = matrix.concat([0, 0, 0, 0, 0]);

    var redFilter = new ColorMatrixFilter(matrix);
    bmd.applyFilter(bmd,bmd.rect,new Point(0,0),redFilter)
    var maskColor:uint = 0xFF0000;
    var color:uint = 0xFF0000;
    var redBounds:Rectangle = bmd.getColorBoundsRect(maskColor, color, true);

    trace (redBounds.x)
    trace (redBounds.y)

    }
    }
    }

    please helpppp!
    thank you!

    -Mike

  7. Ulfilas says:

    I’m interested in digital graffiti and recently came across a few interesting ideas. Using a wiimote and an infrared source you can make an interactive whiteboard, or graffiti wall – look at the youtube videos of jonny lee chung http://www.youtube.com/watch?v=5s5EvhHy7eQ this is cool and I’ve seen some things like yrwall.com and friispray.co.uk that use flash based tools to draw on screen with it. I am looking to find someone that might be interested in making a flash app that works with this system – there is a library of actionscript 3 graffit things here http://www.nocircleno.com/graffiti/ – maybe this could be adapted – let me know !!

  8. [...] LASERS! and other things Flash and Lasers! [...]

  9. Jonathon says:

    Mike did you get your problem fixed? I actually just got it working and was going to post the answer but noticed this is an old thread. Let me know. Thanks.

Leave a Reply