Why can a loaded image live in both setup() and draw()?

Hello, the title says it all. I am just a bit surprised about how it works. I am sure there is some logic why it was featured like this...


  • You mean like this?

    PImage img;
    void setup(){
      img = loadImage("someImage.png");
    void draw(){
      image(img, 0, 0);

    The short answer is that the image is being stored in the heap, not the stack. But really it's a bit more complicated than that. How far down the rabbit hole do you want to go?

  • When a variable is declared before setup() it is a global var (it has global scope) and is known in the entire sketch (as tfguy has scown)

    This is very comfy for every var we need everywhere

    when a var is declared inside a function only it is known only inside the function and not somewhere else. This is a local variable. It is wise to use local vars when possible because it is clearer

    When you have a global var and declare a local var with the same name (which is possible but unwise) the local var overshadows the global var (only the local var gets used)

  • @TfGuy44 : this is the p5js category so best to write a JS example - and best practice is to use preload.

  • Hey, thank you for the answers. What I had in mind is the following: Here is the p5.js loadImage() reference:


    There is a preload, ok, but then, the method to make the image appear is in setup(). This is for me the confusing part because this wouldn't work with shapes. There, you have no choice but to use function draw() for the displaying.

    ...of course you can use loadImage like this:

    var img;
    function preload() {
    img = loadImage("assets/laDefense.jpg");
    function draw() {
    image(img, 0, 0);

    ...which would be the more straightforward way. I was just wondering why is it possible to use setup()

  • edited April 2016

    setup(), besides its main role at initializing & pre-configuring the canvas, can be used for static canvas results. That is, if something isn't dynamically "animated", there's no need for draw().

  • Answer ✓

    Here's an online static example written in Java/JS mode:

    It merely renders a fractal image and displays it once finished. There's no animation of it at all.
    Notice that it doesn't even have a setup() callback there! =P~
    Although if you wish to convert it to p5.js, you're gonna need to wrap it up in setup() though. :-@

  • I feel a bit stupid, posting here without properly checking, indeed drawing into setup() works for anything, not only loaded images. And your fractal example is powerful. So it is actually possible to combine visual layers of stuff that lives in setup() and draw()? Which would mean only adding layers to draw() with lots of transparency...

  • Of course I am assuming that it would be more CPU saving in some situations.

Sign In or Register to comment.