# Beginner Needs help with Generative art

**URL:** <https://discourse.processing.org/t/beginner-needs-help-with-generative-art/39858>\
**Category:** Beginners\
**Created:** [November 24, 2022, 1:28pm UTC](https://discourse.processing.org/t/beginner-needs-help-with-generative-art/39858 "2022-11-24T13:28:51Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![WingedOS](https://avatars.discourse-cdn.com/v4/letter/w/da6949/32.png) [@WingedOS](https://discourse.processing.org/u/WingedOS)\
**Post date:** [November 24, 2022, 1:28pm UTC](https://discourse.processing.org/t/beginner-needs-help-with-generative-art/39858/1 "2022-11-24T13:28:51Z")

</div>

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:

[[Album] Grey squares? ![](https://i.imgur.com/jVbmtrI.png?fb "Grey squares?") ](https://imgur.com/a/fXjVj5O)

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:

 ![test](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/6/0665deedd4b2d99831d3a022de6f87f438d6f4df.jpeg)

And it should give something like this:

[[Album] Imgur: The magic of the Internet ![](https://i.imgur.com/0Su9upt.jpeg?fb "Imgur: The magic of the Internet") ](https://imgur.com/a/QEVP8tO)

And here is the code!

```auto
// 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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 24, 2022, 2:20pm UTC](https://discourse.processing.org/t/beginner-needs-help-with-generative-art/39858/2 "2022-11-24T14:20:03Z")

</div>

first line in setup() should be

`size(200,200);`

please

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [November 24, 2022, 5:03pm UTC](https://discourse.processing.org/t/beginner-needs-help-with-generative-art/39858/3 "2022-11-24T17:03:22Z")

</div>

Hi @WingedOS,

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

From reference…

> **[size() / Reference](https://processing.org/reference/size_.html)**
>
> Defines the dimension of the display window width and height in units of pixels. In a program that has the setup() function, the size() function must be the first line of code inside …

Cheers  
— mnse

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

> **[settings() / Reference](https://processing.org/reference/settings_.html)**
>
> The settings() function is new with Processing 3.0. It's not needed in most sketches. It's only useful when it's absolutely necessary to define the parameters to size() with a variable. …

---

<div class="post-metadata">

**Author:** ![WingedOS](https://avatars.discourse-cdn.com/v4/letter/w/da6949/32.png) [@WingedOS](https://discourse.processing.org/u/WingedOS)\
**Post date:** [November 25, 2022, 1:50pm UTC](https://discourse.processing.org/t/beginner-needs-help-with-generative-art/39858/4 "2022-11-25T13:50:11Z")

</div>

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.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/6/965562fc6c09a78be408d82baaad02db60ac938a.jpeg)

(Original image for ref)

[[Album] Imgur: The magic of the Internet ![](https://i.imgur.com/AYTysIY.jpeg?fb "Imgur: The magic of the Internet") ](https://imgur.com/a/Hh3jV7S)

Any idea on making it 100% successful run rate?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 25, 2022, 10:38pm UTC](https://discourse.processing.org/t/beginner-needs-help-with-generative-art/39858/5 "2022-11-25T22:38:40Z")

</div>

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:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/2/62f450608b8aa7361fa6e447d1ae9bd43cf0c12b.jpeg)

`:)`

---

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [November 25, 2022, 11:23pm UTC](https://discourse.processing.org/t/beginner-needs-help-with-generative-art/39858/6 "2022-11-25T23:23:29Z")

</div>

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:

> **[The Coding Train](https://www.youtube.com/@TheCodingTrain/playlists)**
>
> All aboard! The Coding Train is on its way with creative coding video tutorials on subjects ranging from the basics of programming languages like JavaScript to algorithmic art, machine learning, simulation, generative poetry, and more. Choo choo!

> **[tim rodenbröker creative coding](https://www.youtube.com/c/timrodenbr%C3%B6kercreativecoding/playlists)**
>
> Our world is changing at a breathtaking pace. New technologies cause fundamental transformations. Now is the time to get creative! To find new ways to deal with change and disruption. To discover, evaluate and develop new, valuable...

> **[John Park](https://www.youtube.com/user/johnnydigital113/playlists)**
>
> Share your videos with friends, family, and the world

---

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [November 26, 2022, 7:22am UTC](https://discourse.processing.org/t/beginner-needs-help-with-generative-art/39858/7 "2022-11-26T07:22:49Z")

</div>

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.

```auto
// 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");
}

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/3/7304f196f39507cee6891533230ade7e1e80c83e.jpeg)

and this is no changes on resize:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/6/869a39f2159adbbdd4570bd5cfef648d62c6c176.jpeg);

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