Pointillism (first post)

General Discussion Other

theblackk..

in General Discussion • Other • 1 year ago

Hello all,

I am new to processing and the forums. Hi. I was inspired to get into processing by these projects.

http://www.popularmechanics.com/technology/engineering/gonzo/build-a-gonzo-dot-matrix-printer-that-creates-pointillist-works-of-art-2#slide-2

http://processing.org/learning/basics/pointillism.html

I am hoping to accomplish something similar, but instead of having point widths represent pixel averages I would like to have the output image be of a larger resolution and represent the pixel averages by point density.

For example, if my source image was 3 pixels wide and 1 high, with one full black pixel, one gray pixel, and one white pixel. I would want the output image to be proportionally larger 30x10 or 300x100 w/e sectioned off into three areas representing the original images pixels. The section of the output image representing the original full black pixel would have many points (or ellipses of a fixed width) scattered randomly thought its section. The grey would have fewer points/ellipses based on its original calculated average, and the white would have none.

Any suggestions or help is greatly appreciated.

Replies(7)

amnon.owed

Re: Pointillism (first post)

1 year ago

Perfectly clear description and suitable beginner project.

I would divide the canvas into a virtual (and conveniently proportional) grid with two for loops based on the source image width and height. Then use pushMatrix, popMatrix and translate() to 'move' to each cell. In each cell randomly place a number of circles corresponding to the pixel's brightness.

See the reference for these methods.

theblackk..

Re: Pointillism (first post)

1 year ago

Thank you for the help.

Your suggestions helped me make some progress.

I have been working on the program and have run into a few issues;

The first one is that if I want to take an image that is say 500x500 pixels and upscale it with grids of 10 pixels corresponding to each of the original pixels it will error saying there is not enough memory (i think the limit here is my screen resolution). This is disappointing, but I can live with it.

The next stumbling block I have found is that the pushMatrix command can only be called 32 times. Is there a work-around for this?

v.k.

Re: Pointillism (first post)

1 year ago

Always call popMatrix() for each pushMatrix() called before. Transformations are applied to the block between this to statements. Have a look in reference for those. If you don't pay attention they can be confusing.

like this

pushMatrix()

translate(x,y);

rotate(a);

rect(some, someOther, size, size); // << translated and rotated

popMatrix()

rect(some, someOther, size, size); // not translated nor rotated

tfguy44

Re: Pointillism (first post)

1 year ago

Interesting idea. I gave it a shot. Have a look, maybe it will help:

class PS {
int x, y, w, h;
PVector[] rs, gs, bs;
PS( int _x, int _y, int _w, int _h, int _r, int _g, int _b ) {
x = _x;
y = _y;
w = _w;
h = _h;
rs = new PVector[_r];
for ( int i = 0; i < rs.length; i ++ ) {
rs[i] = new PVector( random(x, x+w), random(y, y+h), 0 );
}
gs = new PVector[_g];
for ( int i = 0; i < gs.length; i ++ ) {
gs[i] = new PVector( random(x, x+w), random(y, y+h), 0 );
}
bs = new PVector[_b];
for ( int i = 0; i < bs.length; i ++ ) {
bs[i] = new PVector( random(x, x+w), random(y, y+h), 0 );
}
}
void render() {
stroke(255, 0, 0);
for ( int i = 0; i < rs.length; i++ ) {
point( rs[i].x, rs[i].y );
}
stroke(0, 255, 0);
for ( int i = 0; i < gs.length; i++ ) {
point( gs[i].x, gs[i].y );
}
stroke(0, 0, 255);
for ( int i = 0; i < bs.length; i++ ) {
point( bs[i].x, bs[i].y );
}
}
void jitter() {
for ( int i = 0; i < rs.length; i++ ) {
rs[i].x+=random(-1, 1);
rs[i].y+=random(-1, 1);
}
for ( int i = 0; i < gs.length; i++ ) {
gs[i].x+=random(-1, 1);
gs[i].y+=random(-1, 1);
}
for ( int i = 0; i < bs.length; i++ ) {
bs[i].x+=random(-1, 1);
bs[i].y+=random(-1, 1);
}
}
}
ArrayList pss;
PImage img;
void setup() {
pss = new ArrayList();
//pps = new PS( 50, 50, 100, 100, 1000, 2000, 0);
size(690, 690);
img = loadImage( "http://tfguy44.com/MyIcon1.PNG" );
img.loadPixels();
int i = 0;
for ( int yy = 0; yy < img.height; yy++) {
for ( int xx = 0; xx < img.width; xx++) {
if ( img.pixels[i] != color(0) ) {
float rr = red( img.pixels[i]);
float gg = green( img.pixels[i]);
float bb = blue( img.pixels[i]);
pss.add( new PS( 10* xx, 10*yy, 10, 10, int(rr/10), int(gg/10), int(bb/10) ) );
//print( int( bb ) + " " );
}
i++;
}
}
}
void draw() {
background(0);
//image( img, 0, 0);
for ( int i = 0; i < pss.size(); i++) {
PS tps = (PS) pss.get(i);
tps.render();
tps.jitter();
}
}

theblackk..

Re: Pointillism (first post)

1 year ago

Hey thank you both for your replies.

I really like your example! My hope was to represent the average value by pixel density instead of pixel color.

I had something semi-functional earlier, but I got carried away and lost.

I have attached what I think the code should look like (though it is not working presently).

PImage img;

void setup(){
size(1920,1080);

int cellsize=50;
int pointsize=2;

img = loadImage("Input.jpg");
image(img,0,0);

fill(0, 0, 0, 256);

loadPixels();
int n = 0;
filter (GRAY);

for(int row=0; row<img.height; row++){
    for(int col =0; col<img.width; col++){
      color c =pixels[n];
      int r = (c >> 16) & 0xFF;
      int g = (c >> 8) & 0xFF;
      int b = c & 0xFF;
      //convert image to grayscale
      int scatter = 255-int(.2989*r+.5870*g+.1140*b);
      for (int i = 0; i < scatter/10; i++) {
        float e = random(0, cellsize);
        float f = random(0, cellsize);
        ellipse(e,f,pointsize,pointsize);
      }
      pushMatrix();
      translate(col*cellsize, 0);
      popMatrix();
      n++;
    }
    pushMatrix();
    translate(0, row*cellsize);
    popMatrix();
    //updatePixels();
}
saveFrame("output.png");
}

benja

Re: Pointillism (first post)

1 year ago

Hey,
i have some remarks on your sketch:

– If you don't draw anything between pushMatrix() and popMatrix(), then it has no effect.
Your drawing-commands have to be between those expressions.

– When you want to get the pixels from your image, You have to use the pixels[]-array of the image instead of the pixels from your main-sketch.

– If you want to use the brightness of the pixels, then you could use brightness()

PImage img;
int cellsize=10;
int pointsize=2;

void setup() {
size(1280, 800);
img = loadImage("image.jpg");
fill(0);

img.loadPixels();

for (int row=0; row<img.height; row++) {
    for (int col =0; col<img.width; col++) {

      color c = img.pixels[col+row*img.width];
      float scatter = 255-brightness(c);

      pushMatrix();
      translate(col*cellsize, row*cellsize);
      for (int i = 0; i < scatter/10; i++) {
        float e = random(0, cellsize);
        float f = random(0, cellsize);
        ellipse(e, f, pointsize, pointsize);
      }
      popMatrix();
    }
}
saveFrame("output.png");
}

theblackk..

Re: Pointillism (first post)

1 year ago

Lol, yeah... I feel like an idiot now *facepalm*. I had just added popMatrix() to the code.

I think processing could be a candidate for a new addiction.

Thanks for your help.