Beginner Needs help with Generative art

Hello!
I’m a beginner at coding and making art through technology.
I watch the coding train to learn but I also like to experiment with existing code made by the community.

Here, I wanted to make art, and Generate_me does exactly that, it’s a sort of compilation of codes altering images you give them, in an glitch/artsy way.

But it’s kinda bugged:

The save thing doesn’t stop at 30 iterations + In my experience I think it saved every iterations.
But now it just doesn’t work at all anymore, seems like it can’t get the image in? I don’t know.

I just get this:

It seems to have the size of the image I gave it, so it does receive that, but yeah… It’s not the image I gave it
Which is this:

And it should give something like this:

And here is the code!

// Original: http://www.openprocessing.org/sketch/145401
// adaptation to images, Tomasz Sulej, generateme.blog@gmail.com
// Licence CC-BY-SA 3.0
 
// put image filename here:
String filename = "test";
String fileext = ".jpg";
String foldername = "/";
 
// choose channel  
int channel = SATURATION; 
 
// run, after 30 iterations result will be saved automatically
// or press SPACE

int max_display_size = 800; // viewing window size (regardless image size)
 
/////////////////////////////////////

// channels to work with
final static int RED = 0;
final static int GREEN = 1;
final static int BLUE = 2;
final static int HUE = 3;
final static int SATURATION = 4;
final static int BRIGHTNESS = 5;
final static int NRED = 6;
final static int NGREEN = 7;
final static int NBLUE = 8;
final static int NHUE = 9;
final static int NSATURATION = 10;
final static int NBRIGHTNESS = 11;

int n=2000;
float [] cx=new float[n];
float [] cy=new float[n];
 
PImage img;
int len;
 
// working buffer
PGraphics buffer; 
 
String sessionid; 
 
void setup() {
  sessionid = hex((int)random(0xffff),4);
  img = loadImage(foldername+filename+fileext);
  buffer = createGraphics(img.width, img.height);
  buffer.smooth(8);
  buffer.beginDraw();

  buffer.noFill();
  buffer.strokeWeight(0.3);
  buffer.background(0);
  buffer.endDraw();
  
  // calculate window size
  float ratio = (float)img.width/(float)img.height;
  int neww, newh;
  if(ratio < 1.0) {
    neww = (int)(max_display_size * ratio);
    newh = max_display_size;
  } else {
    neww = max_display_size;
    newh = (int)(max_display_size / ratio);
  }

  surface.setSize(neww,newh);
  
  len = (img.width<img.height?img.width:img.height)/6;
  
  background(0);
  for (int i=0;i<n;i++) {
    cx[i]=random(img.width);
    cy[i]=random(img.height);
  }

}
 
int tick = 0;
 
void draw() {  
  buffer.beginDraw();
  for (int i=1;i<n;i++) {
    color c = img.get((int)cx[i], (int)cy[i]);
    buffer.stroke(c);
    buffer.point(cx[i], cy[i]);
    // you can choose channels: red(c), blue(c), green(c), hue(c), saturation(c) or brightness(c)
    cy[i]+=sin(map(getChannel(c),0,255,0,TWO_PI));
    cx[i]+=cos(map(getChannel(c),0,255,0,TWO_PI));
  }
 
  if (frameCount>len) {
    frameCount=0;
    println("iteration: " + tick++);
    for (int i=0;i<n;i++) {
      cx[i]=random(img.width);
      cy[i]=random(img.height);
    }
    
  }
  
  buffer.endDraw();
  if (tick == 30) keyPressed();
  
  image(buffer,0,0,width,height);
}
 
float getChannel(color c) {
  int ch = channel>5?channel-6:channel;
  float cc;
  
  switch(ch) {
    case RED: cc = red(c); break;
    case GREEN: cc = green(c); break;
    case BLUE: cc = blue(c); break;
    case HUE: cc = hue(c); break;
    case SATURATION: cc = saturation(c); break;
    default: cc= brightness(c); break;
  }
  
  return channel>5?255-cc:cc;
}
  
void keyPressed() {
  buffer.save(foldername + filename + "/res_" + sessionid +"_"+filename+fileext);
  println("image saved");
}

Thanks for reading and even more if you answer and help!
Have a nice day.

1 Like

first line in setup() should be

size(200,200);

please

1 Like

Hi @WingedOS,

If size() is not used, the window will be given a default size of 100 x 100 pixels.

From reference…

Cheers
— mnse

PS: if you need to set the size of the window dynamically…
look here:

Hello, and thanks for taking your time to answer!

I tried giving sizes, but all it does is making the grey squares bigger…

Though, it’s still weird, 1/10 or 15 times that I run it, it works wonderfully, take a look:
No grey squares, no problem with sizes since it takes the image size, it just works.

(Original image for ref)

Any idea on making it 100% successful run rate?

Hello @WingedOS ,

Your code works in Processing 3.5.4

Your code works in Processing 4.01b with the addition of this line in draw():

size(156, 156, P2D); // Try a smaller value to see why I chose these numbers for size

I used this image:
img = loadImage("http://learningprocessing.com/code/assets/sunflower.jpg");

Output:

:)

hi @WingedOS be welcom, i am new about this. Lots of fun to learn…
This guys on YouTube are good. At least for me.
Check them out:

i did try with my onw image low color and did some changes said above and others mine. Its comented on the code.
Also i tryed with other colored and other sizes, didn’t work the same, do no wy.
here is the code i changed.

// Original: http://www.openprocessing.org/sketch/145401
// adaptation to images, Tomasz Sulej, generateme.blog@gmail.com
// Licence CC-BY-SA 3.0

// put image filename here:
String filename = "test";
String fileext = ".jpg";
String foldername = "/";

// choose channel
int channel = SATURATION;

// run, after 30 iterations result will be saved automatically
// or press SPACE

int max_display_size = 800; // viewing window size (regardless image size)

/////////////////////////////////////

// channels to work with
final static int RED = 0;
final static int GREEN = 1;
final static int BLUE = 2;
final static int HUE = 3;
final static int SATURATION = 4;
final static int BRIGHTNESS = 5;
final static int NRED = 6;
final static int NGREEN = 7;
final static int NBLUE = 8;
final static int NHUE = 9;
final static int NSATURATION = 10;
final static int NBRIGHTNESS = 11;

int n=2000;
float [] cx=new float[n];
float [] cy=new float[n];

PImage img;
int len;

// working buffer
PGraphics buffer;

String sessionid;

void setup() {
  size(200, 200, P2D);  //with this size my image when run is showed biger , the size below (resized)
  sessionid = hex((int)random(0xffff), 4);
  img = loadImage("eu elevador2.jpg");  // my own image jpg 992 x 1600 px
  img.resize(350, 600);   // resized
  buffer = createGraphics(img.width, img.height);
  buffer.smooth(8);
  buffer.beginDraw();

  buffer.noFill();
  buffer.strokeWeight(0.3);
  buffer.background(0);
  buffer.endDraw();

  // calculate window size
  float ratio = (float)img.width/(float)img.height;
  int neww, newh;
  if (ratio < 1.0) {
    neww = (int)(max_display_size * ratio);
    newh = max_display_size;
  } else {
    neww = max_display_size;
    newh = (int)(max_display_size / ratio);
  }

  surface.setSize(neww, newh);

  len = (img.width<img.height?img.width:img.height)/6;

  background(0);
  for (int i=0; i<n; i++) {
    cx[i]=random(img.width);
    cy[i]=random(img.height);
  }
}

int tick = 0;

void draw() {
  // size(156,156, P2D); // Try a smaller value to see why I chose these numbers for size
  buffer.beginDraw();
  for (int i=1; i<n; i++) {
    color c = img.get((int)cx[i], (int)cy[i]);
    buffer.stroke(c);
    buffer.point(cx[i], cy[i]);
    // you can choose channels: red(c), blue(c), green(c), hue(c), saturation(c) or brightness(c)
    cy[i]+=sin(map(getChannel(c), 0, 255, 0, TWO_PI));
    cx[i]+=cos(map(getChannel(c), 0, 255, 0, TWO_PI));
  }

  if (frameCount>len) {
    frameCount=0;
    println("iteration: " + tick++);
    for (int i=0; i<n; i++) {
      cx[i]=random(img.width);
      cy[i]=random(img.height);
    }
  }

  buffer.endDraw();
  if (tick == 30) keyPressed();
  ;

  image(buffer, 0, 0, width, height);

  circle(250, 100, 150); //
  fill(242, 93, 240);  //just to not show my face
}

float getChannel(color c) {
  int ch = channel>5?channel-6:channel;
  float cc;

  switch(ch) {
  case RED:
    cc = red(c);
    break;
  case GREEN:
    cc = green(c);
    break;
  case BLUE:
    cc = blue(c);
    break;
  case HUE:
    cc = hue(c);
    break;
  case SATURATION:
    cc = saturation(c);
    break;
  default:
    cc= brightness(c);
    break;
  }

  return channel>5?255-cc:cc;
}

void keyPressed() {
 // buffer.save(foldername + filename + "/res_" + sessionid +"_"+filename+fileext);
  //println("image saved");
  saveFrame("####.jpg");
}

and this is no changes on resize:

;

I did not efort to do the same with other pictures/ images.