Beginner p5.js, how to hide images in arrays

Question

I'm a beginner at p5.js and coding in general. For my class project, I'm creating a customizable birthday card. Three sections of the card are customizable: the cake style, hat style, and facial expression on the cake. Ideally, users would click on each section of the card to cycle through the customization options to suit their taste.

What I have right now in the code pasted on this post is just the cake style options. Additionally I coded it so that users can click on a button to choose their cake style rather than clicking on a specific area on the card because that was a lot more simple for me to figure out.

My question is, how would I code it so that on the user's first click on the button, the first cake option would pop up, then on the second click, the second cake option would pop up, etc.? I need one cake option to pop up per click; all the other cake options need to stay hidden.

Another question I have is about cycling back to the first cake option after all cake options have been displayed. I have five cake options, so how would I code it so that not only will the first click bring up the first cake option, but also the sixth, eleventh, sixteenth, etc.?

Thanks in advance.

let clickCount = 0
let cakes
let cakeButton

function preload (){
  card_bg = loadImage ("card_bg.png")
  cake_chocolate = loadImage ("cake_chocolate.png")
  cake_pink = loadImage ("cake_pink.png")
  cake_pinkDrip = loadImage ("cake_pinkDrip.png")
  cake_rainbow = loadImage ("cake_rainbow.png")
  cake_white = loadImage ("cake_white.png")
  hat_chevron = loadImage ("hat_chevron.png")
  hat_dots = loadImage ("hat_dots.png")
  hat_puff = loadImage ("hat_puff.png")
  hat_stars = loadImage ("hat_stars.png")
  hat_stripes = loadImage ("hat_stripes.png")
}

function setup() {
  createCanvas(450, 600);
    background(220);
  image (card_bg, 0, 0)
  cakeButton = createButton("click me", "blue")
  cakeButton.position (125, 600)
  cakeButton.size (200, 150)
  cakeButton.mousePressed (cakePress)  
}

function cakePress() {
  clickCount++
  imageMode (CENTER)
   let cakes = [cake_chocolate, cake_pink, cake_pinkDrip, cake_white, cake_rainbow]
   for (let i = 0; i<5; i++){
    if (clickCount === i+1){
      image (cakes[i], 225, 425)}
    else if (clickCount === i+2 && cakes[i] === true){
      cakes[i].hide()
    }   
  }
}

user_14523947 · Answer

This should work, you don't have to define the imageMode() every single time you draw a new image so I moved it to setup (same with cakes array). To clear all the images behind I put background() in cakePress(), so when you add the other parts like the hat you'll have to draw them again. Now when you click the clickCount goes up and it is checked if it's more than what is in the array. If it is then it's set back to 0 so it loops as you asked above, then it just draws it.

let clickCount = 0
let cakes = [cake_chocolate, cake_pink, cake_pinkDrip, cake_white, cake_rainbow];
let cakeButton

function preload (){
  card_bg = loadImage ("card_bg.png")
  cake_chocolate = loadImage ("cake_chocolate.png")
  cake_pink = loadImage ("cake_pink.png")
  cake_pinkDrip = loadImage ("cake_pinkDrip.png")
  cake_rainbow = loadImage ("cake_rainbow.png")
  cake_white = loadImage ("cake_white.png")
  hat_chevron = loadImage ("hat_chevron.png")
  hat_dots = loadImage ("hat_dots.png")
  hat_puff = loadImage ("hat_puff.png")
  hat_stars = loadImage ("hat_stars.png")
  hat_stripes = loadImage ("hat_stripes.png")
}

function setup() {
  createCanvas(450, 600);
  background(220);
  imageMode (CENTER)
  image (card_bg, 0, 0)
  cakeButton = createButton("click me", "blue")
  cakeButton.position (125, 600)
  cakeButton.size (200, 150)
  cakeButton.mousePressed (cakePress)  
}

function cakePress() {
  background(220);
  clickCount++
  if(clickCount >= cakes.length){
  clickCount = 0;
}
  image (cakes[clickCount], 225, 425)
  
}

Beginner p5.js, how to hide images in arrays

1 Answers