Disappearing/ appearing items when I click a button

p5.js Coding Questions
1

Hi all, I’m pretty new at p5 so I’m sure my problem is fairly easy to solve, but I’ve been trying to figure it out for some time and have not been able to successfully.

My Project
Basically, I am trying to create a bunch of different clothes choices that can be put on a mannequin to essentially ‘dress them up’. The person will select a shirt, a pair of pants or a skirt, and shoes by clicking different buttons on the right side of the mannequin, and should be able to change items of clothing (like switch between pairs of shirts) which seems like a pretty straight- forward thing to due.

The Issue
What ends up happening, is if I click a button (let’s say Shirt 1 for example), and then click Shirt 2 directly after, Shirt 2 just gets layered on top of Shirt 1, and if I click Shirt 1 again, Shirt 1 gets layered on top of Shirt 2. I expected that this would happen, and assumed that I would need some type of code to fix this, however, I have failed to come up with something.

What I want to happen
Hopefully, what will end up happing is that when one clicks a button (again, say Shirt 1), and then clicks Shirt 2 after this, Shirt 2 will appear and Shirt 1 will disappear, instead of Shirt 2 just going in front of Shirt 1.

I’ve attatched my code below, and it is a WIP, as I’ve only drawn shirt 1 and shirt 2 so far (but I assume whatever code is used to figure out those can be used throughout the rest of the project)

Thanks so much!

Code

var button;
function setup() {
  createCanvas(800, 500);
  background(255)
    button = createButton("Shirt 1");
    button.position(400, 50);
    button.mousePressed(clickFunction);
    button = createButton("Shirt 2");
    button.position(400, 75);
    button.mousePressed(clickFunction2);

}
function preload(){ 
  Girl= loadImage('GIRL.png')
  } 

function draw() {
  noLoop()
  image(Girl,0,0,400,400);
  textSize(35)
  text('Shirts',400,40) 
  text('Skirts',600,40) 
  text('Pants',400,300) 
  text('Shoes',600,300)
  
}
function clickFunction(){
  fill(255,255,255) 
  beginShape()
  fill(0,0,0) 
  vertex(157,110)
  vertex(173,101)
  vertex(166,181)
  vertex(231,181)
  vertex(225,105)
  vertex(242,113)
  vertex(251,102)
  vertex(237,88)
  vertex(212,80) 
  vertex(199,86)
  vertex(186,80)
  vertex(176,86)
  vertex(165,86)
  vertex(149,98)
  vertex(157,110) 
  endShape()
  fill(255, 255, 0) 
  ellipse(185,131,15,15) 
  ellipse(210,131,15,15) 
  arc(198,158,30,25,0,PI); 
}
function clickFunction2(){
  beginShape()
  noStroke()
    fill(255,0,128) 
  vertex(178,166)
  vertex(168,86) 
  vertex(182,84)
  vertex(199,92) 
  vertex(216,84)
  vertex(230,86) 
  vertex(221,166) 
  vertex(178,166)
  endShape()
  fill(255) 
  triangle(199,119,180,147,217,147) 
  triangle(180,130,217,130, 199,160)
}
1 Like
2

Hello,

and welcome to the forum!

I wouldn’t use noLoop(); in this sketch
instead start draw() with background(0)

Now in the button functions store (in var currentItem) which item has been clicked:

  • currentItem = 0; would mean shirt 1
  • currentItem = 1; would mean shirt 2
  • currentItem = 2; would mean shirt 3

Now in draw() just evaluate currentItem and draw the current shirt.


if(currentItem == 0) {
     // draw shirt 1
}

else if(currentItem == 1) {
     // draw shirt 2
}

else if(currentItem == 2) {
     // draw shirt 3
}

Regards, Chrisir

2 Likes
3

@Chrisir Omg that worked perfectly, thank you so so much!!

Just a question: why would noLoop(); not work well in this sketch?

4

noLoop() stops draw() from running on and on (60 times per second).

Hence all activity in the sketch would stop. No interactivity is possible anymore.

(You could counter this by using redraw() but that’s even more complicate)

See reference for details: Reference / Processing.org

Chrisir

1 Like