# Drawings within setup() after surface.setSize()

**URL:** <https://discourse.processing.org/t/drawings-within-setup-after-surface-setsize/5374>\
**Category:** Coding Questions\
**Created:** [November 9, 2018, 11:22am UTC](https://discourse.processing.org/t/drawings-within-setup-after-surface-setsize/5374 "2018-11-09T11:22:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![gyula](https://avatars.discourse-cdn.com/v4/letter/g/ccd318/32.png) [@gyula](https://discourse.processing.org/u/gyula)\
**Post date:** [November 9, 2018, 11:22am UTC](https://discourse.processing.org/t/drawings-within-setup-after-surface-setsize/5374/1 "2018-11-09T11:22:40Z")

</div>

I like to write simple pieces of code without a draw() block. In this way, it often doesn’t even have to be surrounded by the setup() function, since Processing will do that behind the scenes.

When I brought over an old sketch to P3, I **had to** use surface.setSize() instead of size() to adjust the display window to something I opened on the fly. To my surpise, I got an empy the display window.

An example code:

```auto
surface.setSize(400, 200);
ellipse(10, 10, 20, 20);

```

This has been brought up 2 years ago here:  
[Can’t draw anything just after using surface.setSize()](https://forum.processing.org/two/discussion/18813/can-t-draw-anything-just-after-using-surface-setsize)  
The conclusion of the accepted answer was:

> The surface.setSize() is done at next draw() loop.

Yet if I add a 4s delay the circle **will** appear as an enlarged ellipse for 4s:

```auto
surface.setSize(400, 200);
ellipse(10, 10, 20, 20);
delay(4000);

```

The zooming effect seems to have a reference to an “ideal” 100 x 100 sized window. Let’s try that as well:

```auto
surface.setSize(100, 100);
ellipse(10, 10, 20, 20);
delay(4000);

```

Oops, the circle will not disappear after 4s! What is going on?

Now everything will look fine **after 4s** if I follow [jeremydouglass](https://forum.processing.org/two/profile/30187/jeremydouglass)’s advice (from the above quoted topic) to “move all drawing code to draw()…”:

```auto
void setup() {
  surface.setSize(400, 200);
  ellipse(10, 10, 20, 20);
  delay(4000);
  noLoop();
}
void draw() {
   ellipse(10, 10, 20, 20);
}

```

Of course [jeremydouglass](https://forum.processing.org/two/profile/30187/jeremydouglass) meant this:

```auto
void setup() {
  surface.setSize(400, 200);
  noLoop();
}
void draw() {
   ellipse(10, 10, 20, 20);
}

```

Thanks.

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 9, 2018, 3:52pm UTC](https://discourse.processing.org/t/drawings-within-setup-after-surface-setsize/5374/2 "2018-11-09T15:52:03Z")

</div>

It‘s because you draw the circle, then wait 4 Seconds… and what you have is still the Circle, because it was not overwritten. If you use background() somewhere in between frames you‘ll ‚reset‘ the background and can draw a new ellipse onto it. Though i‘m not sure what exactly the question was…

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 11, 2018, 7:43pm UTC](https://discourse.processing.org/t/drawings-within-setup-after-surface-setsize/5374/3 "2018-11-11T19:43:25Z")

</div>

> [@gyula](#):
>
> simple pieces of code without a draw() block.

This is sometimes called “immediate mode” in Processing docs.

> [@gyula](#):
>
> I **had to** use surface.setSize() instead of size() to adjust the display window to something I opened on the fly.

It seems like, instead of using `size()` in immediate mode, you are using `surface.setSize()`, which is causing problems in immediate mode. Can you give an example of something you are trying to do in immediate mode that requires surface.setSize(), not size()? Other than saying “just use `size()` in immediate mode” I’m trying to understand your problem.

If you are trying to understand why things are happening in the order they are, keep in mind that immediate mode is a shorthand for a full sketch – it is compiled into java (with setup and draw) before being run. If you look at where size() is relocated and where surface.setSize() is relocated in your example sketch, that might help explain what is happening.

There is a special rule for moving `size()` to `settings` so that it is run first.

Here is what these two sketches look like in .java when they run:

```auto
size(400,200);
ellipse(10, 10, 20, 20);

```

…in java:

```auto
public class sketch_181111d extends PApplet {
  public void setup() {
    ellipse(10, 10, 20, 20);
    noLoop();
  }
  public void settings() {
    size(400,200);
  }
  static public void main(String[] passedArgs) {
    String[] appletArgs = new String[] { "sketch_181111d" };
    if (passedArgs != null) {
      PApplet.main(concat(appletArgs, passedArgs));
    } else {
      PApplet.main(appletArgs);
    }
  }
}

```

…and with surface.setSize():

```auto
surface.setSize(400, 200);
ellipse(10, 10, 20, 20);

```

…in java:

```auto
public class sketch_181111d extends PApplet {
  public void setup() {
    surface.setSize(400, 200);
    ellipse(10, 10, 20, 20);
    noLoop();
  }
  static public void main(String[] passedArgs) {
    String[] appletArgs = new String[] { "sketch_181111d" };
    if (passedArgs != null) {
      PApplet.main(concat(appletArgs, passedArgs));
    } else {
      PApplet.main(appletArgs);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![gyula](https://avatars.discourse-cdn.com/v4/letter/g/ccd318/32.png) [@gyula](https://discourse.processing.org/u/gyula)\
**Post date:** [November 12, 2018, 8:21am UTC](https://discourse.processing.org/t/drawings-within-setup-after-surface-setsize/5374/4 "2018-11-12T08:21:21Z")

</div>

> [@Lexyth](#):
>
> It‘s because you draw the circle, then wait 4 Seconds… and what you have is still the Circle, because it was not overwritten.

Ok, a picture is worth a thousand words. In the setup block, instead of a circle I get this **zoomed** ellipse for 4 seconds,  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a648278eccd507a5e2ca31466f4f504d20dff5e5.jpeg)

which after 4 s **will get overwritten** even without using background():  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d71549381f5095d2bb9118bc92db9f0a7607e98c.jpeg)

However, the draw block will properly render the intended circle:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/499273d50d70c2045b5da00e9b5c188537b3b6a2.jpeg)

> [@Lexyth](#):
>
> Though i‘m not sure what exactly the question was…

My question was: _What is going on in the setup block?_

---

<div class="post-metadata">

**Author:** ![gyula](https://avatars.discourse-cdn.com/v4/letter/g/ccd318/32.png) [@gyula](https://discourse.processing.org/u/gyula)\
**Post date:** [November 12, 2018, 9:59am UTC](https://discourse.processing.org/t/drawings-within-setup-after-surface-setsize/5374/5 "2018-11-12T09:59:42Z")

</div>

> [@jeremydouglass](#):
>
> Can you give an example of something you are trying to do in immediate mode that requires surface.setSize(), not size()? Other than saying “just use `size()` in immediate mode” I’m trying to understand your problem.

My **old sketch** loaded and displayed a [colormap](https://github.com/yyr/ncl/tree/master/ni/src/db/colormaps), a text file containing RGB values in many lines. The number of lines was not known before starting the program:

```auto
int [][] colorMatrix;
String selectedFile;

void setup() {
  // Open a file chooser dialog to select a matrix file
  selectInput("Select a file to process:", "fileSelected");

  // Wait for selectedFile
  while (selectedFile == null) {
    delay(200);
  }

  // Load matrix from file
  colorMatrix = loadMatCSV(selectedFile);

  // Set display window height to no. of lines in file
  size(50, colorMatrix.length);

  // Display colormap
  int i = height;
  for (int[] row : colorMatrix) {
    if (row.length == 3) {
      stroke(row[0], row[1], row[2]);
      line(0, i, width, i);
      i--;
    }
  }
} // end of setup()

// Load matrix from file
int[][] loadMatCSV(String fileName) {
  String lines[] = loadStrings(fileName);
  int rows = lines.length;
  int[][] x = new int[rows][rows];
  for (int i=0; i<rows; i++) {
    x[i] = int(splitTokens(lines[i]));
  }
  return x;
}

// 'callback' function for selectInput
void fileSelected(File selection) {
  if (selection == null) {
    println("Window was closed or the user hit cancel.");
    System.exit(0);
  } 
  else {
    selectedFile = selection.getAbsolutePath();
  }
}

```

Meanwhile I’ve found this closed issue: [image() in void setup() along with surface.setSize() #3935](https://github.com/processing/processing/issues/3935). It is very similar to my problem, and from there I got the idea of reproducing the “zooming phenomenon” 🙂 with a much shorter example:

```auto
PImage img;

void setup() {
  img = loadImage("https://i.imgur.com/zvG5m03.png");
  surface.setSize(img.width, img.height);
  image(img, 0, 0);
  delay(4000);
  noLoop();
}

void draw() {
  image(img, 0, 0);
}

```

Finally, thank you for expaining the concept of _immediate mode_.👍