hey im trying to achieve the effect that converts an image or video into a series of dots or symbols etc by matching the colour/shade of the original image/video...

e.g. in this very cool video by Method for SFFIF:
http://motionographer.com/media/method_sfiff.mov

...or a still from the video in the top right of this page:
http://www.motionographer.com/2006/04/17/method-sfiff/#comments

..or Psyop's stunning Aero commercial:
http://www.dzine.tv/video/061005/psy2.mov


Method say that the effect was made using Processing -
"The dot effect was actually created using processing. Processing would then analyze the lightness and darkness of the rotoscoped footage and spit out EPS files frame by frame, these file were then imported as an image sequence in AE".

What i want to know is if there is some kind of code or program or something for this as i am new to Processing and wouldnt even know where to start. Any help or hints that you can give would be hugely appreciated.

hi st33d thanks for your help.

yeah iv seen that pixelate example but it seems a really long way from the effect in that method video that im after. how would i get it to look like that so that the pixels are different sizes and overlapping etc, not in rigid rows and columns? And how would i change the pixel shape into rings or something like in the video?

hey seltar, cheers for the reply.

forgive me for being stupid but i am a processing virgin; never done any programming or anything like this. how do i load my own image or movie file into this code?

thanks

wow thats awesome, cheers for the heads up John ..i could watch that thing for hours.

i think thats getting pretty close to what im after but i have no idea how to use it ..its giving me error messages about not being able to find "BGraphics". is there something i have to do to convert it? ..also, how would i load my own movie or image file into it?

thanks

Looks like I had spare time sooner than I thought:

http://www.hardcorepawn.com/blobs2/

I even changed it to work with an image, instead of a moving line (a/z to increase/decrease the numbers of blobs)

To change it from a still image, to a frame of video, you just need to add the video library, load your movie, and change the overlay.image(img,0,0) line to take a frame from the video, instead of a static image.

I couldn't work out how the varying size would be used to represent an image.

the code is all there, so you should be able to modify it yourself if you ca work out under what circumstances a blob shoudl be small/large....

Then that's your first task, modify my code so that you change the radius of a blob depending how bright it is

brightness is a function in processing, which you can call on color (or pixel.. which holds a color)

so first you need a max-size for the ellipses, and that will also be the spacing between the ellipses

Code:

int spacing = 4;
float d = spacing/255;
noStroke();
for(int j = 0; j < image.height; j++){
for(int i = 0; i < image.width; i++){
 int pix = j*image.width+i; // gets the position of the pixel we're about to draw as an ellipse
 float b = brightness(image.pixels[pix]); // gets the brightness of that pixel
 fill(image.pixels[pix]; // fills ellipse with the current color
 ellipse(i*spacing,j*spacing,b*d,b*d); // draws ellipse according to brightness and spacing
}
}
 

this should do what you're trying to do.. off the top of my head.. not tested

-seltar


-- EDIT --
http://processing.org/learning/index.html <- here's a bunch of cool stuff, all with source..

What is it basicly you're having problems with?

quick overview:
Code:

// all global variables should go here
// by global i mean that you can call upon the variables you create here from anywhere within the program
PImage image; // now we created variable image of type PImage. 

void setup()
{
 // if you add variables here, they will not be available for other functions, and they will "die" at the end of this function 
 size(300,300); // size of applet (width, height)
 image = loadImage("image.gif"); // loading image.
 // the image must be placed in the <data> folder in your sketch

}

void draw()
{
 background(0); // to clear the screen after each frame
 // this function loops, but only shows the user the result at the end of this function
 //here you run your ellipse-drawing function
 drawEllipses();
}

void drawEllipses()
{
int spacing = 4;
float d = spacing/255;
noStroke();
for(int j = 0; j < image.height; j++){
for(int i = 0; i < image.width; i++){
 int pix = j*image.width+i; // gets the position of the pixel we're about to draw as an ellipse
 float b = brightness(image.pixels[pix]); // gets the brightness of that pixel
 fill(image.pixels[pix]; // fills ellipse with the current color
 ellipse(i*spacing,j*spacing,b*d,b*d); // draws ellipse according to brightness and spacing
}
}
}
 

-- EDIT --