How to make different sizes for one renderer

Processing Coding Questions
1

Hi,
I have to make one image at three different sizes :

  • A3 for printing at 300 DPI, would need 3508 x 4961 pix
  • A5 for printing at 300 DPI, would need 1748 * 2480 pix
  • and a banner for the web at 960 × 334 pixels

how would you do ?

I cannot use the pdf renderer because I used tint() function on an image (see this issue).
And I am not sure I can use svg renderer because I load a png image file…
my code looks like : load a small image, duplicate it like 400 times, and apply random for position, rotate, color and size.

thanks

1 Like
2

You can create your own buffer and draw to them instead of drawing directly to the screen. The createGraphics() function is your friend. I’d start by looking it up in the reference.

3 Likes
3

okay, thanks. works well. the print tutorial helped me also.
I have two questions : using createGraphics() is faster than drawing directly on the screen ?
is it because the process is no more related to the graphic card ?

4

How are you measuring the speed?

5

well, I did not measure it, I really thaught it was. I mean, what is the advantage of using createGraphics() than a save("myImage.png") plus exit() combination ?

here is my result

and here is the code

PGraphics pg;
PImage img ; 
color orange, yellow, green;
float x, y, nb, s, alpha;

void setup() {
  // A3 size (300 DPI) 3508 * 4961
  pg = createGraphics(980, 270);
  //pg = createGraphics(3508, 2480);
  pg.beginDraw();
  pg.background(255);
  pg.imageMode(CENTER);
  img = loadImage("../greyLogo1.png");  
  orange = color(246, 130, 18); 
  yellow = color(277, 215, 00); 
  green = color(0, 138, 0);

  float x, y, xdev, ydev, nb, ydevMax;
  for (float i=pg.height-20; i> 1; i = (i*0.85)) { // -200

    nb = map(i, pg.height, 1, 13, 30 );
    xdev = map(i, pg.height, 1, pg.width*0.02, pg.width*0.03);
    ydevMax = pg.height*0.05;
    ydev = map(i, pg.height, 1, pg.height*0.01, ydevMax); 
    ydev = ydev/ydevMax;
    ydev = pow(ydev, 1);
    ydev *= ydevMax;
    //    ydev = expoThis(ydev, pg.height*0.01, pg.height*0.05, 2);

    for (int j=0; j < nb; j++) {
      x =  j * pg.width/nb + random(-xdev, xdev);
      y = i + random(-ydev, ydev);
      drawOne(x, y);
    }
  }
  pg.endDraw();
  pg.save("bandeau.png");
  exit();
}

void drawOne(float x, float y) {
  float size = y / pg.height;
  size = pow (size, 1.5);
  size = size * 170 + 10; // [10- 180]

  float a = 255;
  if ( y >pg.height*3/4) {
    a = random(180, 255);
  } else if (y>pg.height*2/4) {
    a = random(140, 230);
  } else if (y >pg.height*1/4) {
    a = random(110, 210);
  } else if (y > 0) {
    a = random(60, 200);
  }

  float rand = random(0, 3.1);
  if ( rand <1) pg.tint(orange, a);
  else if (rand <2) pg.tint(yellow, a); //yellow 241, 196, 15
  else if (rand>2) pg.tint(green, a); // green

  pg.pushMatrix();
  pg.translate(x, y);
  pg.rotate(PI/random(-2, 2));
  pg.image(img, 0, 0, size * 200/100, size*313/100);
  pg.popMatrix();
}
6

Calling createGraphics() allows you to draw to an off-screen buffer. This is useful if you want to create a “stamp” that you can then draw to the screen, or if you want to draw in a resolution that’s different from the screen.

If all you’re doing is saving it to an image file, then calling save() is fine as well.

1 Like