May 2009 Archives

(Flash) abstraction of water

| No Comments | No TrackBacks
I came up with an idea of making a flat and abstract animation from a video.
I choosed an ocean scene form a movie of galapagos islands and tried to extract the colors and movements and make it into another movie that looks totally different. I also made three more videos using the same method and uploaded them to vimeo and youtube.

abstraction of water from kynd on Vimeo.



cycling in the woods from kynd on Vimeo.



SMOKE from kynd on Vimeo.



drive in the night from kynd on Vimeo.

(Flash) Finding objects from a photo

| No Comments | No TrackBacks
  1. Find the edge of the objects by superimposing slightly displaced images in DIFFERENCE mode and then remove noise with ConvolutionFilter and the threshold method.
  2. Separate the edges into blocks using the getColorBoundsRect method.
  3. Draw lines around the edges in each of blocks(Voila!)
(This sample only works well with a photo with a rather simple background)



Sample code

Not very organized yet and for demonstration purposes only.
package {
import flash.display.*;
import flash.events.*;
import flash.geom.*;
import flash.filters.*;

public class Detector {
private var s:BitmapData;
private var r:BitmapData;
private var blocks:Array;

public function Detector() {
}

public function proccess(s:BitmapData):Array {
var r1:BitmapData,r2:BitmapData,r3:BitmapData,r4:BitmapData;
r1 = getDiffImage(s);
r2 = getBlocks(r1);
r3 = drawBlobs(s);
return [r1,r2,r3];
}

public function getDiffImage(s:BitmapData):BitmapData {
var r:BitmapData = new BitmapData(s.width,s.height);
var r2:BitmapData = new BitmapData(s.width,s.height);
var rect:Rectangle = new Rectangle(0,0,s.width,s.height);
var pt:Point = new Point(0,0);
r.draw(s);
r2.draw(s);
var mtx = new Matrix();
mtx.translate(2,0);
r.draw(s, mtx, new ColorTransform(), BlendMode.DIFFERENCE);
mtx.translate(-2,2);
r2.draw(s, mtx, new ColorTransform(), BlendMode.DIFFERENCE);

r.copyPixels(r, new Rectangle(2,0,2,s.height), pt);
r2.copyPixels(r2, new Rectangle(0,2,s.width,2), pt);

r.draw(r2, new Matrix(), new ColorTransform(), BlendMode.ADD);

var filter:ConvolutionFilter = new ConvolutionFilter(3,3,
[0.1,0.1,0.1,
0.1,0.1,0.1,
0.1,0.1,0.1]);
r.applyFilter(r,rect,pt,filter);
r.threshold(r, rect, pt, "<", 0xff111111, 0xff000000);
r.threshold(r, rect, pt, "!=", 0xff000000, 0xffffffff);
return r;
}

public function getBlocks(s:BitmapData):BitmapData {
blocks = new Array();
var i:uint=0;
var o:Object;
var size:uint;
var r:BitmapData=new BitmapData(s.width,s.height);
r.draw(s);
var sp:Sprite = new Sprite();
var g:Graphics=sp.graphics;
var rect1:Rectangle,rect2:Rectangle;
while (true) {
i++;
if (i>1000) {
break;
}
rect1=r.getColorBoundsRect(0xffffffff,0xffffffff);
if (rect1.isEmpty()) {
break;
}

var x=rect1.x;
for (var y:uint = rect1.y; y < rect1.y + rect1.height; y++) {
if (r.getPixel32(x,y)==0xffffffff) {
r.floodFill(x, y, 0xffff00ff);
rect2=r.getColorBoundsRect(0xffffffff,0xffff00ff);
size=rect2.width*rect2.height;
if (size>300) {
o = new Object();
o.size=size;
o.rect=rect2;
o.bmpd=new BitmapData(o.rect.width,o.rect.height);
o.bmpd.copyPixels(r, o.rect, new Point(0,0));
blocks.push(o);
}
r.floodFill(x, y, 0xff00ffff);
}
}
}

for (i = 0; i<blocks.length; i ++) {
g.lineStyle(0,0x00FF00);
g.drawRect(blocks[i].rect.x, blocks[i].rect.y, blocks[i].rect.width, blocks[i].rect.height);
}

r.draw(sp);
return r;
}

public function drawBlobs(s:BitmapData):BitmapData {
var sp:Sprite = new Sprite();
var g = sp.graphics;
var r:BitmapData=new BitmapData(s.width,s.height);
r.draw(s);
var pts:Array;
var b:Object;
var mid1:Point,mid2:Point;
var x:int,y:int,i:uint,j:uint;
for (i = 0; i < blocks.length; i++) {
pts = [];
b = blocks[i];
for (y = 0; y < b.rect.height; y += 5) {
for (x = 0; x < b.rect.width; x += 1) {
if (b.bmpd.getPixel(x,y)==0xff00ff) {
pts.push(new Point(x,y));
break;
}
}
}
for (y = b.rect.height -1; y >= 0; y -=5) {
for (x = b.rect.width - 1; x >=0; x -= 1) {
if (b.bmpd.getPixel(x,y)==0xff00ff) {
pts.push(new Point(x,y));
break;
}
}
}
g.beginFill(0xFF0000,0.2);
g.lineStyle(0,0xFF0000);
for (j = 0; j < pts.length; j ++) {
if (j==0) {
mid1 = Point.interpolate(pts[j], pts[(j + 1) % pts.length], 0.5);
g.moveTo(b.rect.x + mid1.x, b.rect.y + mid1.y);
}
mid2 = Point.interpolate(pts[(j + 2) % pts.length], pts[(j + 1) % pts.length], 0.5);
g.curveTo(b.rect.x + pts[(j + 1) % pts.length].x, b.rect.y + pts[(j + 1) % pts.length].y, b.rect.x + mid2.x, b.rect.y + mid2.y);
}
g.endFill();
}
r.draw(sp);
return r;
}

}
}

(Processing) Easy-made electronica

| No Comments | No TrackBacks
I've updated the music composer application a made yesterday(see: dynamic sound generation with Minim) so that you can choose a scale from nine alternatives. I also added a feature that is to make it play two tones at the same time, which resulted in a effect like a troll tune or a crazy fugue. I've recorded two tracks and uploaded them to SoundCloud.
# Watch out for the volume before you play. The sound might not be pleasant for everyone.


SoundCloud

| No Comments | No TrackBacks
SoundCloud is an awesome web site where you can easily distribute music you composed. You know, lots of amateurs are sharing their works on Youtube, but it's not necessarily the best way if you purely want to share a piece of music as video is not always needed and the encoding quality is not very good(I don't mean Youtube is a bad choice. It depends on what you want).
SoundCloud is clearly focused on the musicians, both professionals and amateurs who wants to promote and distribute their music.
You can upload music files and choose if letting others download the original or 128k compressed version of them. You can of course embed a music player widget to your site and even add a link to the shop where your songs are sold.
I liked their well-designed interface and the quality of musics posted to the site so far.
I'm curious to see if this service will succeed(They've just launched the site in Octorber, 2008.)


SoundCloud: The Tour from SoundCloud on Vimeo.

In her suggestive post, Jennifer Reese tried to make bagels, jams, cream cheese and things like that following recipes from books and web-sites and judged if they were worth doing or not.
According to her, home made cream cheese costs more than a cup of Philadelphia and doesn't taste much better, while yoghurt costs less than buying it at the supermarket, and it tastes better.
What is interesting is that even though making granola costs three times more than a popular brand, she recommended doing so.
"Better? Vastly. World-beating, super-crunchy cereal, worth every calorie and penny"

How cost-effective is it to make pantry staples from scratch? - By Jennifer Reese - Slate Magazine


My first dictionay

| No Comments | No TrackBacks
Very funny, though I don't  reccomend showing this to your kids

My first dictionay

The crazy iPod app inspired me to make a instrument that looks like turn tables(not for I phone but on the web).
At first I wanted to make this with Flash but I finally decided to use Processing's Minim library because it's easier and more suitable for make the sound immediately react to users.

The application has two wheels. The one at the left represents the pitch of the sound and another on the right represents the volume. Dragging the mouse in the circles changes the shape of them and correspondingly alter the sound. Long squares on the top are the slider bars to control the speed that each circle rotates. The idea is that manipulating the pitch and the volume seperately will create complex rhythm.
I attached a video to show how to play it.

As this is only the first prototype, I feel there's much to improve.
For example, I want to add a function to choose a scale, which is now chromatic. I think limiting the picth can create more pleasant sequence.
Of-cource I think more than two sound should be able to be played at the same time, and the tone should be able to be changed.

I found that Minim has handy-to-use oscillator interface with which I can easily write a code to generate different tone color. I'd love to play with it for a while.

Watch out for the volume. The sound might not be pleasant for everyone.



Play with the app


Minim from kynd on Vimeo.

Sppining Ipod

| No Comments | No TrackBacks
He didn't use a touch sensor how you might think of at first, Instead  he decided to use a motion sensor to scratch records.  Not practical at all but funny.

FAT - Spinning vinyl - an ipod app


Spinning vinyl ipod app from Theodore Watson on Vimeo.

(Flash) Deads under the tree

| No Comments | No TrackBacks
Some more works by the auto-painter.
I remembered Kajii Motojiro, who wrote "Dead bodies are buried under the cherry trees".
Maybe the white figures of flowers floating in the dark sky reminded earlier people of the deadmen's soul? They're both beautiful and scary.

cherry blossams 4

cherry blossams 1

cherry blossams 3
I made new automated painter with Flash.
What it does is basically finds sets of several points from a photograph and connects the points with marker-strokes. I wasn't really expecting many results from this simple algorithm, but I found out that this's kind of fun. Changing the parameters slightly can create various images from one that looks like a water color to another looks like colored pencil.
My favorite is the headless peacock that stands still like it's in a mirage. I attached some examples here. Others can also be seen on flickr.

peacock

untitled

double cherry blossoms

cloud

This is a demonstration of how to use displacementMapFilter object to distort a DisplayObject. Here, the filter is applied to the thumbnails to create a 3D effect that makes them look like they are rotating around the viewer.

See 'DisplacementMapFilter - Flash CS4 Professional ActionScript 3.0 Language Reference' for more about DisplacementMapFilter.


sample movie and scripts