# How to make different sizes for one renderer

**URL:** <https://discourse.processing.org/t/how-to-make-different-sizes-for-one-renderer/3323>\
**Category:** Coding Questions\
**Created:** [September 6, 2018, 4:02pm UTC](https://discourse.processing.org/t/how-to-make-different-sizes-for-one-renderer/3323 "2018-09-06T16:02:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mloiz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mloiz/32/11462_2.png) [@mloiz](https://discourse.processing.org/u/mloiz)\
**Post date:** [September 6, 2018, 4:02pm UTC](https://discourse.processing.org/t/how-to-make-different-sizes-for-one-renderer/3323/1 "2018-09-06T16:02:37Z")

</div>

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](https://discourse.processing.org/t/pdf-export-how-to-tint-image/3246)).  
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

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [September 6, 2018, 4:26pm UTC](https://discourse.processing.org/t/how-to-make-different-sizes-for-one-renderer/3323/2 "2018-09-06T16:26:27Z")

</div>

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](https://processing.org/reference/).

---

<div class="post-metadata">

**Author:** ![mloiz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mloiz/32/11462_2.png) [@mloiz](https://discourse.processing.org/u/mloiz)\
**Post date:** [September 8, 2018, 8:08am UTC](https://discourse.processing.org/t/how-to-make-different-sizes-for-one-renderer/3323/3 "2018-09-08T08:08:03Z")

</div>

okay, thanks. works well. the [print tutorial](https://processing.org/tutorials/print/) 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 ?

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [September 10, 2018, 4:00pm UTC](https://discourse.processing.org/t/how-to-make-different-sizes-for-one-renderer/3323/4 "2018-09-10T16:00:53Z")

</div>

How are you measuring the speed?

---

<div class="post-metadata">

**Author:** ![mloiz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mloiz/32/11462_2.png) [@mloiz](https://discourse.processing.org/u/mloiz)\
**Post date:** [September 17, 2018, 3:25pm UTC](https://discourse.processing.org/t/how-to-make-different-sizes-for-one-renderer/3323/5 "2018-09-17T15:25:29Z")

</div>

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  
[![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f2006537d34ea54ef2f999b9ac5812315e2fd00b.jpeg)](https://flic.kr/p/MdswqT)

and here is the code

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

```

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [September 17, 2018, 4:30pm UTC](https://discourse.processing.org/t/how-to-make-different-sizes-for-one-renderer/3323/6 "2018-09-17T16:30:11Z")

</div>

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.