Looking for help with Processing-based graphic generation

JohnGalt

Hi everyone,

I'm a graphic design (+ fairly new to Processing) and I am experimenting with a cool piece code from someone over at openprocessing.org. I really like the visual results this code delivers and I would like to further work with it. Unfortunately, the output is very low resolution. Hence I'm looking for someone who might be able to help me figure out how to a) Increase the size or resolution of the shapes generated and b) save everything as a pdf file.

Here is the code:

import java.util.Arrays;
float[][] z, v, a;

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

void setup() {
  size(512, 512);
  colorMode(RGB, 2);
  z = new float[width][height];
  v = new float[width][height];
  a = new float[width][height];
  loadPixels();
}

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

void draw() {
  for (int x = 1; x < width-1; x++) {
    for (int y = 1; y < height-1; y++) {
      a[x][y] = (v[x-1][y] + v[x+1][y] + v[x][y-1] + v[x][y+1])/4 - v[x][y];
    }
  }
  for (int x = 1; x < width-1; x++) {
    for (int y = 1; y < height-1; y++) {
      v[x][y] += a[x][y];
      z[x][y] += v[x][y];
      pixels[width*y+x] = color(sin(z[x][y]) + 1, cos(z[x][y]), 1);
    }
  }
  updatePixels();
}

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

void move() {
  if (mouseX > -1    &&    mouseX < width    &&    mouseY > -1    &&    mouseY < height) {
    v[mouseX][mouseY] = randomGaussian() * TAU;
  }
}

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

void mouseClicked() { move(); }

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

void mouseDragged() { move(); }

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

void keyPressed() {
  noLoop();
  for (int x = 0; x < width; x++)    Arrays.fill(z[x], 0);
  for (int x = 0; x < width; x++)    Arrays.fill(v[x], 0);
  loop();
}

You can also look up the code over here https://www.openprocessing.org/sketch/377730):

I'd be grateful for any and all help:)

KevinWorkman

Please format your code. Here's how.

You also might want to tell us what you've tried so far. It can also be very difficult to take code you found on the internet and make it work the way you want. I highly recommend trying to recreate the effect yourself using code you wrote, which will make it much easier for you to make changes and improvements.

JohnGalt

Hi Kevin and thanks for the response.

Sorry for not formatting the code right away. I also went through the entire code with a colleague who's proficient in java, I now have an adequate understanding of the code I found and can reproduce as well as manipulate its result.

I still haven't found any solution to the problem of saving the output of the code in a higher resolution though.

So far I have tried a method another forum member wrote about in a forum post concerning high-resolution exporting of graphics in Processing. Here is the code example they gave:

int dim = 5000;
int dimScreen = dim/10;
color c1 = #AFA786;
color c2 = #000000;

void setup() { size(dimScreen,dimScreen); }
void draw()  { exampleSketch(); }

void exampleSketch() {
  for (int y=0; y<=height; y++) {
    stroke(lerpColor(c1,c2,float(y)/height));
    line(0,y,width,y);
  }
  stroke(#FFFFFF);
  fill(#BBBBBB);
  ellipse(width/2, height/2, width/2, height/2);
  line(0, 0, width, height);
}

void keyPressed() {
  if (key ==' ') {
    g = createGraphics(dim,dim,JAVA2D);
    this.height = dim;
    this.width = dim;
    g.beginDraw();
    exampleSketch();
    g.endDraw();
    save("result.png");
    println("screenshot saved");
    this.height = dimScreen;
    this.width = dimScreen;
  }
}

Unfortunately, this has not worked out for me so far. Again, I would be grateful if anyone could help me out.

koogs

I still haven't found any solution to the problem of saving the output of the code in a higher resolution though.

what exactly do you mean by 'a higher resolution'?

JohnGalt

I would like to save a pdf or a tiff from the code with a high enough resolution to import into Photoshop and later print (ideally with a resolution of 300dpi without the image being heavily pixilated).

koogs

so just the size then. just change the size in line 7. (resolution is a function of the printing, you can't change the resolution of the monitor or the saved image)

only then it'll run REALLY SLOWLY. it's currently (512x512) doing half a million pixel calculations, twice each, 60 times a second.

pdf is a vector format, not appropriate for this (because it's working on pixels, you can see that from the code). tiff is pixels, so won't help you, is no different from saving a png.

KevinWorkman

Please link between crossposts: http://stackoverflow.com/questions/40350644/high-resolution-processing-output

Like @koogs said, the algorithm isn't going to scale up very well because it works on pixels. Anything you do to make them bigger will, by definition, be pixelated.

You might be able to modify the algorithm so the blobs grow larger, and then you can save that to an image file with whatever size you want. But saving to an off-screen buffer won't really help you until you come up with an algorithm that draws the blobs the size you need them to be.

jeremydouglass

@JohnGalt --

Here are some starting points.

1. The sketch you found is written in p5.js, for web publishing. If you download the Processing app, you are probably writing in the default Processing, which is Java See @GoToLoop below -- I wasn't paying attention to the openprocessing source and got turned around remembering it was web-published.
2. Change the size of the screen with size() -- as other comments noted. Drop the framerate if needed.
3. The reference includes information on PDF export -- see the renderer listed under size(), for example, or just use save() or saveFrame() or saveImage() and use a normal image format for Photoshop import

4. Try changing what the mouse does. mouseClicked() calls move() -- to make the drips more energetic, try making move generate larger numbers by multiplying by a coefficient.

   v[mouseX][mouseY] = randomGaussian() * TAU * 40;
   

These will have pixelated cores that settle over time, but may create a similar visual effect faster.

Or just make a bunch of clicks and leave it running, like baking a cake.

Or speed thing up a lot by removing the draw logic, and only saving once every x array iterations.

GoToLoop

The sketch you found is written in p5.js, for web publishing.

Nope! That sketch was written in Processing's Java Mode. [-X

And it's auto-transpiled to JS thanks to library processing.js (Pjs): \m/
http://ProcessingJS.org

It means that sketch is Java-JS cross-mode compatible: ~O)
https://GitHub.com/fjenett/javascript-mode-processing