Problem with showing and hiding a visual in P5.js

[Nicolem]

Hi!
I would like to show and hide this visualization in P5.js with the button that is show, but I do not succeed, even though I tried it the whole evening.

Does someone maybe know how to make this work? (:

This is the code:

https://editor.p5js.org/mnicole/sketches/3Bcvxts3M

[Sky020]

Welcome there,

This is the simplest way:

1. Fix the syntax here (you have created a new block for your code within draw, and there is no reason to):

function draw() {
  {
    translate(width/2+130, height/2);
  for (var i = 0; i < dots.length; i++) {
    dots[i].update();
   dots[i].show();}
  }        
}

2. Add a global variable (I would call it isShowDots), and set it to either true or false (you will decide what the initial value should be, based on what you want)
3. Wrap the display logic (inside draw) within a statement to do it or not:

if (isShowDots) {
  for (var i = 0...) {...}
}

4. Use the showDots function to update the isShowDots variable. This should only be one line, and I will leave you to figure out how to set up the logic so the variable isShowDots can be toggled between true and false.

If you get stuck again, be sure to ask specific questions.

Hope this helps

[Nicolem]

Thank you very much! I tried it out and eventually it worked out (: