{"id":475,"date":"2009-09-30T02:41:36","date_gmt":"2009-09-30T00:41:36","guid":{"rendered":"http:\/\/labs.miaumiau.cat\/?p=41"},"modified":"2011-07-29T14:43:07","modified_gmt":"2011-07-29T14:43:07","slug":"dotted-meow-from-the-crypt","status":"publish","type":"post","link":"https:\/\/www.miaumiau.cat\/?p=475","title":{"rendered":"dotted meow from the crypt"},"content":{"rendered":"

\"dotted<\/a><\/p>\n

WEBCAM REQUIRED.<\/p>\n

I’ve been playing around with the webcam on AS3 and finally i got into something i liked.<\/p>\n

Basically what I’m doing here is to generate a grid of shapes keeping references between objects using a linked list. I am working with a small video size to optimize performance, so I keep two positions in each properties at Particle class: origin and staticPosition.<\/p>\n

origin<\/span> is a Point keeping the coordinates of the pixel on the Video object which corresponds to the particle.<\/p>\n

staticPosition<\/span> is a Point keeping the coordinate that corresponds at stage.<\/p>\n

Here there is a sample of the generate grid method, it has comments and the complete source is ready to download at the end of this post.<\/p>\n

[as]
\nprivate function setupGrid() : void{<\/p>\n

\/\/ iniatialize the linked list with initLink Particle
\nvar p : Particle = initLink;
\n\/\/ set the x \/ y coordinates to zero
\nvar _x : uint = 0;
\nvar _y : uint = 0;
\n\/\/ this bucle creates the particles
\nfor (var i : int = 0; i < quantity; i++) {
\n\/\/ if the x coordinate exceeds the defined width limit
\nif(i % nw == 0 && i!= 0){
\n\/\/ set the ‘x’ coordinate to zero
\n_x = 0;
\n\/\/ ad the height of the particle to the ‘y’ coordinate
\n_y += particleHeight;
\n}<\/p>\n

\/\/ storing the next particle at current
\np.next = new Particle();
\n\/\/ define the coordinate that corresponds this iteration at the source video
\nvar origin : Point = new Point(_x \/ particleWidth, _y \/ particleHeight);
\n\/\/ send it to the origin propertie at the particle
\np.origin = origin;
\n\/\/ define the current position at stage
\nvar point : Point = new Point(_x, _y);
\n\/\/ place it to two properties at the particle
\n\/\/ at ‘staticPosition’ , this value will not change
\np.staticPosition = new Point(point.x, point.y);
\n\/\/ and at ‘position’, this value will change to animate flight
\np.position = point;
\n\/\/ place the particle at stage coords
\np.x = point.x;
\np.y = point.y;
\n\/\/ add the displayObject to the container
\nparticles.addChild(p);
\n\/\/ refresh the ‘p’ variable to store the next particle at next iteration of this bucle
\np = p.next;
\n\/\/ add a particle width to the ‘_x’ var for the next iteration
\n_x += particleWidth;<\/p>\n

}<\/p>\n

}
\n[\/as]<\/p>\n

We can color each particle based on each pixel rgb value that points to the origin coords, doing so we can win a nice semitone effect for the video capture.<\/p>\n

On the other side, the class MotionTracker has a very simple motion detection implementation, it draws each frame of the Video Object\u00a0 over the last frame using BlendMode.DIFFERENCE and then thresholding filtering the pixels with a color higher than 0x111111<\/p>\n

Here the code of the detection<\/p>\n

[as]
\nprivate function tictac(event:TimerEvent) : void{<\/p>\n

\/\/ locking bitmapdatas for better performance
\ncurrent.lock();
\noutput.lock();
\ninput.lock();
\n\/\/ a current copy from the source
\ncurrent.draw(source);
\n\/\/ making a temporary copy of currentFrame to work with both input and current
\nvar temp : BitmapData = current.clone();
\n\/\/ here we are drawing the previous frame on top of the current and the difference blendMode will make the rest
\ntemp.draw(input, null, null, BlendMode.DIFFERENCE);
\n\/\/ filter the pixels tha are greater than darkgrey #111111 and thresholding them into blue #0000FF overwriting the previous bmp
\ntemp.threshold(temp, temp.rect, temp.rect.topLeft, “>”, 0xFF111111, 0xFF0000FF, 0x00FFFFFF, true);
\n\/\/ resets output’s color information
\noutput.fillRect(output.rect, 0xFF000000);
\n\/\/ stores the current frame wich will be the previous on the next tictac
\ninput = current.clone();
\n\/\/ thresholding the temp bitmapdata into the output bitmapdata with ‘equal’ colors
\noutput.threshold(temp, output.rect, output.rect.topLeft, “==”, 0xFF0000FF, 0xFF0000FF, 0x00FFFFFF, false);
\n\/\/ unlocking bitmapdatas
\ncurrent.unlock();
\noutput.unlock();
\ninput.unlock();
\n\/\/ cleaning memory
\ntemp.dispose();<\/p>\n

}
\n[\/as]<\/p>\n

I think it would be interesting if the particles would move randomly at the same point where the movement was detected by the motionTracker, and here we go.<\/p>\n

The Particle class has two methods to move scale and position, it implements a wonderful bouncing easing equation seen at Erik Natzke’s blog<\/a> and one method to modify the internal position Point to a random value.<\/p>\n

[as]
\npublic function moveScale(scale : Number) : void{<\/p>\n

scaleX -= ax = (ax + (scaleX – (scale * 3)) * div) * .9;
\nscaleY -= ay = (ay + (scaleY – (scale * 3)) * div) * .9;<\/p>\n

}<\/p>\n

public function movePosition(p : Point) : void{<\/p>\n

x -= bx = (bx + (x – (p.x)) * div) * .5;
\ny -= by = (by + (y – (p.y)) * div) * .5;<\/p>\n

}<\/p>\n

public function flight() : void{<\/p>\n

position.x = staticPosition.x – (Math.random() * 200 * sign());
\nposition.y = staticPosition.y – (Math.random() * 200 * sign());<\/p>\n

}<\/p>\n

public function unFlight() : void{<\/p>\n

position.x = staticPosition.x;
\nposition.y = staticPosition.y;<\/p>\n

}
\n[\/as]
\nThese methods are called from the Main class at the enterframe handler
\n[as]
\nwhile(p.next != null){<\/p>\n

var color : uint = bmd.getPixel(p.origin.x, p.origin.y);
\nvar scale : Number = color \/ 0xFFFFFF;<\/p>\n

if(motion.output.getPixel(p.origin.x, p.origin.y) != 0){<\/p>\n

p.flight();<\/p>\n

} else{
\np.unFlight();
\n}<\/p>\n

p.moveScale(scale);
\np.movePosition(p.position);
\np.color = color;
\n\/\/ p.color = colors[Math.floor( scale * colors.length )];
\np = p.next;<\/p>\n

}
\n[\/as]<\/p>\n

And here<\/a> the complete source<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

WEBCAM REQUIRED. I’ve been playing around with the webcam on AS3 and finally i got into something i liked. Basically what I’m doing here is to generate a grid of shapes keeping references between objects using a linked list. I am working with a small video size to optimize performance, so I keep two positions […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-475","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/posts\/475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=475"}],"version-history":[{"count":2,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/posts\/475\/revisions"}],"predecessor-version":[{"id":673,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=\/wp\/v2\/posts\/475\/revisions\/673"}],"wp:attachment":[{"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.miaumiau.cat\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}