Category Archives: projects

Drawings and Animations

By Zevan | April 30, 2010

So there are 434 posts on this site to date. I hope to keep posting but it isn’t always easy to come up with new ideas. Another project I’ve been working on is a series of drawings and interactive animations over at my other website (shapevent). I’ve been creating entries for this part of shapevent pretty regularly - go have a look:

http://www.shapevent.com/log/

Also posted in Announcements | Tagged , , | Leave a comment

Capturing Colors in Motion

By Zevan | February 27, 2010

So no one attempted to post their version for capturing saturated moving colors from a video feed.
I've had one working for some time now and based on the reactions I'm getting I think the approach I took is a relatively interesting one. Below You can watch a demo and view a descriptive diagram, as well as view the source code and and online version of the color selector.


Click for visual description and prerecorded video:



Click Here to test out a live version with your web cam...

Because we are working with a small group of developers on this project we've ported everything to processing (since that's what most everyone is using)... but here is the original actionscript code, its a tad messy but it gets the job done:

CLICK HERE TO COPY
Actionscript:
  1. var bufferSize:int = 20;
  2. var blurAmount:Number = 20;
  3. var motionColor:uint = 0xFF222222;
  4. var pixelNum:int = 800 * 600;
  5.  
  6. var cam:Camera =  Camera.getCamera();
  7.  
  8. cam.addEventListener(ActivityEvent.ACTIVITY, onActivityStart);
  9.  
  10. function onActivityStart(evt:ActivityEvent):void {
  11.     trace("start");
  12.     addEventListener(Event.ENTER_FRAME, onLoop);
  13.     cam.removeEventListener(ActivityEvent.ACTIVITY, onActivityStart);
  14. }
  15.  cam.setMode(800,600,30);
  16.  
  17. var video:Video = new Video(800, 600);
  18. video.attachCamera(cam);
  19.  
  20. var canvas:BitmapData = new BitmapData(800,600,false, 0x000000);
  21. //addChild(new Bitmap(canvas));
  22. var feed:BitmapData = new BitmapData(800,600,false, 0x000000);
  23. addChild(new Bitmap(feed));
  24.  
  25. var prev:BitmapData = new BitmapData(800,600,false, 0x000000);
  26.  
  27. var thresh:BitmapData = new BitmapData(800, 600, true, 0xFF000000);
  28. //addChild(new Bitmap(thresh));
  29. var cm = new ColorMatrixFilter([0.3086,0.6094,0.082,0,0,0.3086,0.6094,0.082,0,0,0.3086,0.6094,0.082,0,0,0,0,0,1,0]);
  30.  
  31. var threshSamples:Vector.<uint> = new Vector.<uint>();
  32. var samples:Vector.<uint> = new Vector.<uint>();
  33. var pixelSampleRate:int = 10;
  34.  
  35. var shape:Shape = Shape(addChild(new Shape()))
  36.  
  37.  
  38.  
  39. function onLoop(evt:Event):void {
  40.      
  41.         canvas.draw(video);
  42.         feed.draw(video);
  43.        
  44.         canvas.draw(prev, null, null, BlendMode.DIFFERENCE);
  45.         canvas.applyFilter(canvas, canvas.rect, new Point(0,0), new BlurFilter(blurAmount, blurAmount, 1));
  46.         //canvas.applyFilter(canvas, canvas.rect, new Point(0,0), cm);
  47.         prev.draw(video);
  48.        
  49.         thresh.fillRect(thresh.rect, 0x000000);
  50.         thresh.threshold(canvas, canvas.rect, new Point(0,0), ">=", motionColor, 0xFFFF0000, 0xFF00FF00);
  51.        
  52.         threshSamples = thresh.getVector(thresh.rect);
  53.        
  54.         var cols:Array = []
  55.         var index:int = 0;
  56.         for (var i:int = 0; i<pixelNum; i+=pixelSampleRate){
  57.             if (threshSamples[i] == 0xFFFF0000){
  58.                 var col = feed.getPixel(i % 800, int(i / 800));
  59.                 var r = col>> 16 & 0xFF;
  60.                 var g = col>> 8 & 0xFF;
  61.                 var b = col & 0xFF;
  62.                 var sl = toHSB(r, g, b);
  63.                 if (sl[0]> 60 && sl[1]> 30 && sl[1] <60){
  64.                   cols[index++] = col;
  65.                 }
  66.             }
  67.         }
  68.        
  69.         if (cols.length> 0){
  70.             shape.graphics.clear();
  71.             shape.graphics.beginFill(cols[int(cols.length * Math.random())]);
  72.             shape.graphics.drawRect(0,0,100,100);
  73.         }
  74.                                                                        
  75. }
  76.  
  77. // this is from somewhere online, if I can find the link I'll post it
  78. function toHSB(R, G, B):Array{
  79.     var H, S, L
  80.     var var_R = ( R / 255 )                     //RGB from 0 to 255
  81.     var var_G = ( G / 255 )
  82.     var var_B = ( B / 255 )
  83.    
  84.     var var_Min = Math.min( var_R, var_G, var_B )    //Min. value of RGB
  85.     var var_Max = Math.max( var_R, var_G, var_B )    //Max. value of RGB
  86.     var del_Max = var_Max - var_Min             //Delta RGB value
  87.    
  88.     L = ( var_Max + var_Min ) / 2
  89.    
  90.     if ( del_Max == 0 )                     //This is a gray, no chroma...
  91.     {
  92.        H = 0                                //HSL results from 0 to 1
  93.        S = 0
  94.     }
  95.     else                                    //Chromatic data...
  96.     {
  97.        if ( L <0.5 ) S = del_Max / ( var_Max + var_Min )
  98.        else           S = del_Max / ( 2 - var_Max - var_Min )
  99.    
  100.       var del_R = ( ( ( var_Max - var_R ) / 6 ) + ( del_Max / 2 ) ) / del_Max
  101.       var del_G = ( ( ( var_Max - var_G ) / 6 ) + ( del_Max / 2 ) ) / del_Max
  102.       var del_B = ( ( ( var_Max - var_B ) / 6 ) + ( del_Max / 2 ) ) / del_Max
  103.    
  104.        if      ( var_R == var_Max ) H = del_B - del_G
  105.        else if ( var_G == var_Max ) H = ( 1 / 3 ) + del_R - del_B
  106.        else if ( var_B == var_Max ) H = ( 2 / 3 ) + del_G - del_R
  107.    
  108.        if ( H <0 ) ; H += 1
  109.        if ( H> 1 ) ; H -= 1
  110.     }
  111.     return [ int(S * 100), int(100 * L)]
  112. }

Posted in projects | Tagged , , , | 7 Comments