Help with hiding and showing the canvas

p5.js Coding Questions
#1

Hello everyone,

i started to programm an online gallery of photographs where more pictures are shown on one canvas. I would like to move to second page or create second canvas (then third and so on) with another photographs through the function mousePressed, but always see the images from the first layer with the canvas in the background. Can someone help me?

Thank you!

Michaela

#2

Create a way to store image’s “stage/page/screen/turn/…” or basically a value which tells you what page the picture is supposed to be placed.
After you do that just go through

PImage array[] = new PImage[10];
//replace with code for loading images
//
void draw() {
   for(int i = 0; i < array.length; i++) {
      if(image1page == cPage) {
          image(array[i], x, y)      
       }
   }
}

or create a function (less useful for galleries with hundreds of pages:


void draw() {
    if(cPage == 1) {
         page1;
    } else if(cPage == 2) {
         ...
    }
}
void page1() {
    background(0);
    image(array[0],x,y);
    image(array[1],x2,y2);
   ...
}
void page2() {
    
}

this is a processing example. It should work the same way in p5.js but with different functions