Trying to make an image disappear after clicking it p5

[rimai]

So I have very beginner knowledge with code, and am trying to make a ‘forest’ scene where the user can click on 5 little blobs of slime mould, and once they click on them they disappear.

Right now the 5 blobs of slime mould are there, but nothing is happening when they are clicked.

I copied a lot of this code from someone else but didn’t get to see all their code so don’t know what I’m missing.

I have no idea what to do from here, but this is my code:

Any help is appreciated

var slimeMould1x = 210;
var slimeMould1y = 550;
var slimeMould2x = 400;
var slimeMould2y = 540;
var slimeMould3x = 650;
var slimeMould3y = 560;
var slimeMould4x = 930;
var slimeMould4y = 580;
var slimeMould5x = 1100;
var slimeMould5y = 565;


var slimeMouldx = [210, 400, 650, 930, 1100];
var slimeMouldy = [550, 540, 560, 580, 565];
var slimeMouldClicked = [slimeMould1Clicked, slimeMould2Clicked, 
slimeMould3Clicked, slimeMould4Clicked, slimeMould5Clicked];
var slimeMould = [slimeMould1, slimeMould2, slimeMould3, slimeMould4, 
slimeMould5];

var forest;

function preload () {
slimeMould1 = loadImage("assets/slimemould-01.png");
slimeMould2 = loadImage("assets/slimemould-01.png");
slimeMould3 = loadImage("assets/slimemould-01.png");
slimeMould4 = loadImage("assets/slimemould-01.png");
slimeMould5 = loadImage("assets/slimemould-01.png");


forest = loadImage("assets/forest-03.png");
} 


function setup() {
  createCanvas(1200, 800);
     imageMode(CENTER);

}


function draw() {
  background(10);


  image(forest,width/2,height/2);


  fill(255);
  noStroke();
  textAlign(CENTER, CENTER);
  textSize(25);
  text("collect all the slime mould!", width/2, height*0.97);


     image(slimeMould1,slimeMould1x,slimeMould1y);
     image(slimeMould2,slimeMould2x,slimeMould2y);
     image(slimeMould3,slimeMould3x,slimeMould3y);
     image(slimeMould4,slimeMould4x,slimeMould4y);
     image(slimeMould5,slimeMould5x,slimeMould5y);


      slimeMould1Click();
      slimeMould2Click();
      slimeMould3Click();
      slimeMould4Click();
      slimeMould5Click();


   var noslimeMould = true;
    for (i = 0; i < slimeMould.length; i++){
        if (slimeMouldClicked[i] == false) {
           image(slimeMould[i], slimeMouldx[i], slimeMouldy[i]);
            noslimeMould = false;

        }
    }
}


function slimeMould1Click() {
    if (slimeMouldClicked[0] == false) {
        if ((mouseX > slimeMould1x) && (mouseX < (slimeMould1x+ 50)) && 
(mouseY > slimeMould1y) && (mouseY < (slimeMould1y+ 50))) {
            slimeMouldClicked[0] = true;
        }
    }
}


    function slimeMould2Click() {
       if (slimeMouldClicked[1] == false) {
        if ((mouseX > slimeMould2x) && (mouseX < (slimeMould2x+ 50)) && 
(mouseY > slimeMould2y) && (mouseY < (slimeMould2y+ 50))) {
            slimeMouldClicked[1] = true;
        }
     }
}


function slimeMould3Click() {
    if (slimeMouldClicked[2] == false) {
        if ((mouseX > slimeMould3x) && (mouseX < (slimeMould3x+ 50)) && 
(mouseY > slimeMould3y) && (mouseY < (slimeMould3y+ 50))) {
            slimeMouldClicked[2] = true;
        }
    }
}


    function slimeMould4Click() {
      if (slimeMouldClicked[3] == false) {
        if ((mouseX > slimeMould4x) && (mouseX < (slimeMould4x+ 50)) && 
(mouseY > slimeMould4y) && (mouseY < (slimeMould4y+ 50))) {
            slimeMouldClicked[3] = true;
        }
    }
}


    function slimeMould5Click() {
      if (slimeMouldClicked[4] == false) {
        if ((mouseX > slimeMould5x) && (mouseX < (slimeMould5x+ 50)) && 
(mouseY > slimeMould5y) && (mouseY < (slimeMould5y+ 50))) {
            slimeMouldClicked[4] = true;
        }
    }
}

[bmoren]

I’d say that the number one wall that I see beginners run into is trying to do too much at once.

I’d suggest you (for a moment) set this code aside and try to do one thing at a time so you understand what each part is doing.

here are some steps:

1. Get a slime mold to display - looks like you are doing this great in the preload and on line 55
2. recognize a click - you are doing this on lines 80-126 but using perhaps some over complicated hit detection. I’d suggest you look into using the mouseClicked() function to do this.
3. Once you are confident that you are recognizing the click (console.log() or print() are your friend) then you might start to look at hit detection to tell where you’re at, or you might bind a click handler directly to the image variable itself!
4. Next is to figure out how to get the slime mold to disappear. There are many ways to do this too! One way is to use conditionals like in the code above to skip the drawing code for the image. If we’ve clicked on it, dont draw the image anymore.
5. Ok, now that you have one slime mold working, displaying, clicking, disappearing… It’s time to scale up, implement a second mold, then a third, etc.
6. Once you’ve got them all implemented, don’t forget to save a copy
7. Next you can go back in and refactor and/or optimize the code. Perhaps you want to use an array instead of a list of variables? maybe it makes sense to write some re-usable functions? etc.

Here’s some simplified code with a nod to what you have above for you to play with. Also! – don’t forget that Lauren, Ben & Casey’s book is a great place to start! https://p5js.org/books/

let slimeMold; //make a storage variable for our slime mold file to live inside of.
let slimeWasClicked = false; //start this false since we've not clicked it yet... we'll re-set it below in the click handler once we click within some hit detection.

function preload(){
  slimeMold = loadImage('assets/image.png') //preload our image
}

function setup() {
  createCanvas(500,500) //create a canvas
}

function draw() { //this is happening at 60 frames per second....
  background(0); //re-draw the background every frame...

  if(slimeWasClicked == false){
    image(slimeMold,200,200, 100,100) //render the stored slime mold image file to the canvas at 200,200 x/y position and 100x100 pieels high and wide
  }

}

function mouseClicked(){
  console.log('confirmation that the mouse got clicked!');
  console.log(mouseX, mouseY); //where is the mouse anyway?

  if(
    mouseX > 200 && //if the mouse is greather than 200 we're over the image
    mouseX < 300 && //if the mouse is less than 300 were over the image (since the image is at 200 and is 100 wide = 300)
    mouseY > 200 && //same idea but on the vertical axis.
    mouseY < 300
  ){
    slimeWasClicked = true //set the click boolean to be true since we clicked, this will turn off the conditional statement above in the draw step and should make the image no-longer render since that code is now 'skipped'
  }

}

[VansiusProductions]

the slime click functions should be in the mouseClicked() function

see the above post for an example

[rimai]

omg this is the best answer ever <3 thank you

[GoToLoop]

You should create a class to represent 1 Slime:

constructor

Some sketches using the class structure:

1. http://p5js.SketchPad.cc/sp/pad/view/ro.CaQVvhrEKxAeXd/latest
2. http://p5js.SketchPad.cc/sp/pad/view/ro.CwHWpJ$SP1EN8i/latest
3. http://p5js.ProcessingTogether.com/sp/pad/export/ro.CxS6E9WWAMC$EO

P.S.: For the 2nd & 3rd links, copy & paste those links as regular text instead of clicking at them.
This forum is replacing the character $ w/ %24, which messes up those links!

[rimai]

Thanks!! just a quick question, how do I import an image into a class?

[GoToLoop]

The class requests the already loaded resource as 1 of the parameters of its constructor():

class Slime {
  constructor(img) {
    this.img = img;
  }
}

Or if there’s only 1 shared image for all Slime objects, the class can instead use the global variable holding that image’s reference.

[bmoren]

This might be a helpful tutorial if you want to go the class route. It’s a good idea in the long term, but In the short term, as a beginner, it’s not the easiest – most straight forward concept to grasp. It’s a somewhat more advanced topic and you can certainly accomplish what you want without going for classes. In my list of steps above I’d put this as part of #7 or you might even think on it as the ultimate direction for the next version of you’re code.

6.2: Classes in JavaScript with ES6 - p5.js Tutorial