Monthly Archives: February 2010

BlogShift!

So… If you still want to see quizzes/snippets posted frequently here… post a comment… because I need to know that people still want quizzes and snippets in order to keep working on this blog.

If not enough people respond in the comments I will slowly migrate back to my shapevent blog :

http://shapevent.com/sketchbook/

I would like 20+ comments on this blog post in order to motiviate me to keep writing quizzes and posting snippets… otherwise I will only post when an idea comes to mind.

The idea behind this blog has always been 15-30 minutes a day on a snippet or quiz. I did this for a little over a year straight resulting in about 400 posts :

http://actionsnippet.com/?page_id=549

This blog will definitely not die… especially when cs5 is released, but I want to get feedback to get an idea of how many readers this blog actually has…. so please post a comment if you’d like me to keep up the 15-30 mins a day on quizzes and snippets.

Thanks,

Z!

[EDIT - wow thanks for all the kind remarks and constructive crits. I really needed to see that this blog was actually useful for more than just me. I'll post a new snippet first thing tomorrow!. Thanks very much to everyone who commented :D so far]

Posted in Uncategorized | 64 Comments

Capturing Colors in Motion

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:

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

Who Has the Best Button Class?

We've all done it... we've wasted way too much time writing an overly complex class just to create a simple square/roundrect button. Who has the nicest one? Post a link to yours (googlecode, wonderfl, etc...).

I've always avoided wasting too much time writing one of these but just spent 2 hours writing an overly complex one... looking forward to the way that people have done it....

For instance, did you make your class dynamic? Did you use scale9? did you use CSS? etc... Just curious how complex have gotten with it.

Posted in OOP, UI | Tagged , , , | 11 Comments

Collecting Colors

Some of you may have seen these preliminary test images images on my flickr:


If your up for it .... i am working on collecting colors and words for use with this project ... so watch the video (below) and go to the link (below) you will be able to make a contribution.

LEARN ABOUT THE TOOLS
video, (may not all make sense but the tool is shown which is the important part)

POPULATE THE DB
population tool add some colors

I have a smart filter that checks for people doing weird things like curses etc... so don't bother trying to do that.

Additional info here, scroll down to see our presentation about the project

Posted in misc | Tagged | 2 Comments

Quiz Question

Write code that pulls saturated moving colors from a web cam... that is... if you move a red coffee cup across the screen your code should capture the color red.

A few hints: frame differencing, hsb and get/setVector.

I'll post my working version tomorrow or the next day... this is a challenging one so I may give an extra day before I post my solution....

Difficulty : Medium

Posted in Quiz | Tagged , , | Leave a comment

Donate Button

I've had many requests to add a donate button to this site, finally added one today....

Posted in Uncategorized | Leave a comment

AS Quiz #17

This quiz jumps around a bit from MovieClips to OOP.

Number of Questions : 7
Difficulty : Medium
Topic : MovieClips and OOP

Which of the below is an array of the frame labels in a given MovieClip?





When you manually nest a MovieClip in the Flash IDE, you are then able to use dot syntax to target the nested clip - for instance:

containerClip.nestedClip.play();

This is made possible in part because __________________. (fill in the blank)







True or False... Because MovieClips are dynamic, you can add properties and methods to individual instances of them at runtime.



True or False. The Object class is dynamic.



True or False... In AS3, private constructors are used to create Singletons.



True or False... Using an opening { and a closing } you can define a static initializer within a class.



Fill in the blank... To move forward one frame in a MovieClip you could use the _____________ method.








Posted in Quiz | Tagged , , , | 7 Comments

Prefix Notation (Lisp Style)

Today's quiz is not multiple choice. Instead, your task is to write a lisp style math parser. This may sound tricky, but it's surprisingly simple. (well... not simple exactly, it's just simple compared to what one might assume).

Lisp uses prefix notation... where the operator is placed before the operands:

10 * 10

becomes:

* 10 10

You could think of this as a function "*" with two arguments (10, 10). In Lisp this is enclosed with parens:

(* 10 10)

Let's see a few more examples:

100 / 2 + 10

becomes:

(+ (/ 100 2) 10)

...
2 * 4 * 6 * 7

becomes:

(* 2 4 6 7)

...

(2 + 2) * (10 - 2) * 2

becomes

(* (+ 2 2) (- 10 2) 2)

Remember, thinking "functions" really helps. The above can be though of as:

multiply( add(2, 2), subtract(10 , 2), 2)

You should create a function called parsePrefix() that takes a string and returns a number:

Here is some code to test if your parser works properly:

Actionscript:
  1. trace(parsePrefix("(* 10 10)"));
  2.  
  3. trace(parsePrefix("(* 1 (+ 20 2 (* 2 7) 1) 2)"));
  4.  
  5. trace(parsePrefix("(/ 22 7)"));
  6.  
  7. trace(parsePrefix("(+ (/ 1 1) (/ 1 2) (/ 1 3) (/ 1 4))"));
  8.  
  9. /* Should trace out:
  10. 100
  11. 74
  12. 3.142857142857143
  13. 2.083333333333333
  14. */

I highly recommend giving this a try, it was one of those cases where I assumed it would be much trickier than it was.

I've posted my solution here.

Posted in Math, Quiz | Tagged , , , , | 4 Comments

AS Quiz #15 (Hardest Quiz Yet)

This is probably the hardest quiz yet. After yesterdays very easy quiz I figured I'd do something really trickey... binary is always a good way to make a quiz hard... so most of the questions are about binary operators and ByteArray... there is also one question about Bezier math.

Number of Questions : 7
Difficulty : Hard
Topic : Binary and Bezier

Please go to AS Quiz #15 (Hardest Quiz Yet) to view the quiz
Posted in Quiz | Tagged , , , | 3 Comments

AS Quiz #14

Today's quiz is about TextFields.

Number of Questions : 6
Difficulty : Easy
Topic : TextFields

Please go to AS Quiz #14 to view the quiz

Posted in Quiz | Tagged , , , | 1 Comment