Silouette of an image to be filled with rectangles ?

Programming Questions

GiorgioMa..

Silouette of an image to be filled with rectangles ?

in Programming Questions • 1 years ago

Hi , i want to say to processing... fill the silouette with rectangles , random in size, not overlapping and filling the whole silouette.

Mmm...

i have no idea where to start..

is there any known library or method to do this ?

Thanx !

Replies(7)

v.k.

Re: Silouette of an image to be filled with rectangles ?

1 years ago

use Pixels[] array to teste each pixel color or get(x,y), if black draw a rect(pixel.Xpos, pixel.Ypos, random, random);

Its not code of course...

Skip some lines and "columns" to get you some air between the squares.

also...

http://processing.org/learning/topics/pixelarray.html

PhiLho

Re: Silouette of an image to be filled with rectangles ?

1 years ago

It is possible, but it needs non-trivial algorithms and quite some work... Not for a beginner, I would say.
A way to do it is to detect black areas, as said, and grow a rectangle from a black pixel, until it reaches the wanted size or it comes too close of other rectangles.

v.k.

Re: Silouette of an image to be filled with rectangles ?

1 years ago

I've played with this a little. But as i'm not a programer and totally self learning in processing i always avoid sharing my code cause it may be dumb, wrong or bad practice. Said that, here goes a little color reader class i started to develop.

It will just read a given image and coordinates color. You will have to change the image name for an image you have in the data folder of your sketch. This would be a start for your sketch, You than test the color to see if it's black and draw yours squares. Here it is reading the pixel under mouse. You would have to make a two dimension array to read the entire image (could do with a one dimension also, but is less easy to visualize) some thing like: ColorReader [][] cr = new ColorReader()[width][height];

Then initialize it for the pixels in your image using two nested for loops. The class it self may contain a display method to draw yours squares if color is black. To get air between them I would skip some lines and columns like;

for(int i=0; i<array.length;i+=6) note you r counting in steps of 6 so if your square is smaller than that it won't overlap.

Hope it helps.

PImage img;

ColorReader cr;

void setup(){

img = loadImage("band.jpg");

size(img.width,img.height);

}

void draw(){

cr = new ColorReader(img,mouseX,mouseY);

println(hex(cr.getColor())+" ___ "+cr.getRed()+"/"+cr.getGreen()+"/"+cr.getBlue());

background(cr.getColor());

}

//// class

class ColorReader{

PImage img;

int xpos,ypos;

ColorReader(){}

ColorReader (PImage _img, int _xpos, int _ypos ){

img = _img;

xpos = _xpos;

ypos = _ypos;

}

color getColor (){

loadPixels();

int x = mouseX;

int y = mouseY;

color c = img.pixels[y*width+x]; /// this y*width+x is converting from two to one dimension...

return c;

}

color getRed (){

return getColor() >> 16 & 0xFF; // those strange are fast way of get(x,y) read the get reference

}

color getGreen (){

return getColor() >> 8 & 0xFF;

}

color getBlue (){

return getColor() & 0xFF;

}

//////// THIS CODE ABOVE END HERE!!! Below is another code ;-)

Also there is this "before turning into a class code" that may be easier to understand, but is the same thinking:

PImage img;

void setup(){

img = loadImage("band.jpg");

size(img.width,img.height);

}

void draw(){

loadPixels();

int x = mouseX;

int y = mouseY;

color c = img.pixels[y*width+x];

color r = c >> 16 & 0xFF;

color g = c >> 8 & 0xFF;

color b = c & 0xFF;

println(r+"/"+g+"/"+b);

}

GiorgioMa..

Re: Re: Silouette of an image to be filled with rectangles ?

1 years ago

I have simplified and changed the code a bit,

now im trying to introduce the array and the for loop to check for he whole image.

but i think im still very lost...

i get the error that it cant find a class called Color Reader...

can anybody shed some light on how to continue.

Thanx !

ColorReader [][] cr = new ColorReader[width][height];
PImage img;
void setup() {
img = loadImage("band.jpg");
size(img.width, img.height);
}
void draw()
{
size (320, 211);
for (int i = 0; i < width; i++) {
for (int j = 0; j < height; j++) {
ColorReader[i][j] = new cr();
background(cr.getColor());
}
class ColorReader {
// global vars
PImage img;
int xpos, ypos;
// constructor
ColorReader() {
}
ColorReader (PImage _img, int _xpos, int _ypos ) {
img = _img;
xpos = _xpos;
ypos = _ypos;
}
color getColor () {// getcolor es una funcion
loadPixels();
int x = 0;
int y = 0;
color c = img.pixels[y*width+x]; /// this y*width+x is converting from two to one dimension...
println (c);
return c;
}
}
}
}

v.k.

Re: Silouette of an image to be filled with rectangles ?

1 years ago

Well it is a bit confused. On line 16 things are inverted. the variable should be initialized to the object not the opposite.

Besides that there's a mess with the curly brackets. That's why it cant find the class. Also the "funcion get color" that you made is inside the class, so can't be casted without a proper oblect to call it. Either place it after draw() before the class or call it from an object. That's what i saw in a quick look. See if it helps.

GiorgioMa..

Re: Re: Silouette of an image to be filled with rectangles ?

1 years ago

Hi v.k.

I think i got it better... no more errors. but now nothing happens, i guess now i need to somehow draw the rects.

if the code so far is ok, i should add an if statement checking where are black pixels and draw a rec right ?

can you point me in the right direction ?

thanx !

PImage img;
ColorReader [][] cr ;
void setup() {
img = loadImage("band.jpg");
size(img.width, img.height);
cr = new ColorReader[img.width][img.height];
for (int i = 0; i < width; i++) {
for (int j = 0; j < height; j++) {
// Initialize each object
cr[i][j] = new ColorReader() ;
}}}
void draw() {
size (320, 211);
for (int i = 0; i < width; i++) {
for (int j = 0; j < height; j++) {
cr[i][j] = new ColorReader();
}}}
class ColorReader {
// global vars
PImage img;
int xpos, ypos;
// constructor
ColorReader() {
}
ColorReader (PImage _img, int _xpos, int _ypos ) {
img = _img;
xpos = _xpos;
ypos = _ypos;
}
color getColor () {// getcolor es una funcion
loadPixels();
int x = 0;
int y = 0;
color c = img.pixels[y*width+x]; /// this y*width+x is converting from two to one dimension...
println (c);
return c;
}}

PhiLho

Re: Silouette of an image to be filled with rectangles ?

1 years ago

The code in draw() is just plain wrong!
The size() should be called in setup() only.
And there is no point to recreate all the ColorReader on each frame...
Beside, creating one per pixel is overkill!

Class isn't a golden hammer... You better do the loadPixel before a loop (it is costly in time!) and do the img.pixels[] access in the loop, directly. No need for a class wrapper here.
Beside, you want to sample pixels at a broader granularity. Ie. instead of doing i++, perhaps do i += 20 or similar (depending on how close you want your rectangles).

Top Reply