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)

Share:

Post on Twitter
Share on Facebook
Bookmark this on Delicious
Share on LinkedIn
Stumble Now!
Digg This
Reddit This
Vote on DZone

Related Posts

  • 3D Motion Capturing part 2: Drawing In Space
  • 3D motion tracking
  • WiiFlash Flight Simulator
  • Continuous Perlin Noise
  • WiiFlash generative art painting

    • 8 Responses to “Flash/Air Laser Graffiti”

    1. Rogério Miranda says:
      December 13, 2008 at 5:46 pm

      Please post de .fla arquive for studenty.
      ;)

    2. webreake says:
      March 19, 2009 at 1:44 am

      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:
      March 19, 2009 at 1:37 pm

      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:
      March 20, 2009 at 8:17 am

      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:
      April 22, 2009 at 2:30 am

      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:
      April 28, 2009 at 6:27 am

      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:
      November 3, 2009 at 1:25 pm

      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 « Media Project says:
      February 3, 2010 at 6:55 pm

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

    Leave a Reply