"Interactive overlay" in p5.js

Question

I would like to do the following in p5.js. Say I have a canvas roughly like this:

Let's say I have given those red squares some interactivity using the function mouseClicked() and their respective coordinates in the canvas (as in, if I click on a square, change its color).

Now I'd like to use that blue "i"-button to display some sort of info box, and it should look approximately like this:

I want that "info dialog" to go away if the user clicks on that "OK-button" (whcih is not really a button, but also just a square in a p5 canvas).

Question: Is there an elegant way of deactivating the "square interactivity" and activating that "OK button interactivity" and to have the interactivity the other way around whenever the info box is not being displayed?

The only way I can think of to achieve this goes like this:

function mouseClicked(){
  if(infoBoxIsBeingDisplayed){
    do something
  }else{
    do something else
  }
}

However, this seems a little convoluted.

I'd appreciate any suggestions on how to do this better.

Answer 1

Your solution seems fine, and it also seems much less "convoluted" than any of the other options. Keep it simple.

You might be able to clean up your code by splitting up your logic into smaller utility functions. Something like this:

function mouseClicked(){
  if(infoBoxIsBeingDisplayed){
    mouseClickedInfoBox();
  }else{
    mouseClickedSquaresCanvas();
  }
}

Then your logic would be in those utility functions, specific to each screen. You could further split it up to generalize your bounds-checking, but the idea is the same.

Answer 2

I've run into a similar problem to this before, the best way I came up with to solve this (which is a fairly patchy way to do it) is to move the squares outside of the canvas. sorry my code is probably really messy but look at the function game and you will see what i did

If you run the game make it full screen.

example:(to play the game use A and D or use the arrow keys but i suggest A and D because the way the code snippet is set up the game doesn't fit on the page and the page moves around when you press the arrow keys)

var bs = [];
var speed;
var ship1;
var num = 40;
var d;
var gscore = 0;
var highscore = 0;
var cap = 0;

function setup() {
    createCanvas(windowWidth,windowHeight- 4);
    
    for(var i = 0; i < num; i++) {
        bs[i] = new Box(random(0, width), random(-600,-30));
    }
    
    ship1 = new ship();
    button1 = new button();
    
}

function draw() {
    background(0);
    if(cap == 0){
         gscore = gscore + 0.1;
    }
    if(highscore < gscore){
        highscore = gscore;
    }
    speed = map(gscore,4,100,4,5);
    ship1.show();
    ship1.update();
    
    
    
    for(var i = 0; i < num; i++) {
        bs[i].update();
        bs[i].show();
        if(bs[i].y >= height){
            bs[i].x = random(0, width);
            bs[i].y = random(-600,-30);
        }
        for(var j = 0; j < num; j++) {
            if(bs[i].touch(bs[j])){
                if(bs[i] != bs[j]){
                    bs[j].x = random(0, width);
                    bs[j].y = random(-600,-30);
                }
            }
        }
        if(bs[i].touch(ship1)){
            game();
        }
     }
    push();
    fill(255,0,0);
    textSize(36);
    
    text("score: "+ floor(gscore),0,36);
    text("highscore: "+floor(highscore),0,72);
    pop();
        
    
    
    
    
}


function Box(x, y) {
    
    this.x = x;
    this.y = y;
    this.show = function() {
        fill(255);
        noStroke();
        rect(this.x, this.y, 30, 30);
    }
    this.update = function() {
        this.y = this.y + speed;
    }
    this.touch = function(other){
        d = dist(this.x, this.y, other.x, other.y);
        if(d < 15/*half of the squares*/+15/*the total area of the ship*/){
            return true;
        }else {
            return false;
        }
    }


}

function game(){//look here, game is the end game screen
    for(var i = 0; i < num; i++) {
        bs[i].x = -200;//making all squares x value -200
        bs[i].y = -200;//making all squares y value -200
    }
    ship1.x = -200;//making ship x value -200
    ship1.y = -200;//making ship y value -200
    cap = 1;//cap is a variable made to stop the score from increasing when the end game screen is shown its "capping" the score
    
    
    push();
    fill(255,0,0);
    textAlign(CENTER);
    textSize(64);
    text("You lose", width/2, height/2);
    fill(255);
    text("Try again?", width/2,height/2+64);
    button1.touch();//touch checks if the mouse is over the button(the button sucks ass btw the hitbox for it is a square not a rectangle)
    button1.show();//showing the button
    button1.update();//updates the text and button color when highlighted
    fill(texthover);
    textSize(48);
    text("Yes",width/2, height/2+145);
    pop();
    
}
function button(){
    this.x = width/2;
    this.y = height/2+128;
    this.d;
    
    this.update = function() {
        this.x = width/2;
        this.y = height/2+128;
    }
    this.show = function(){
        push();
        rectMode(CENTER);
        fill(hover);
        rect(this.x, this.y, 128, 64, 50);
        pop();

    }
    this.touch = function(){
        this.d = dist(this.x, this.y, mouseX, mouseY);
        if(this.d <32){
            hover = 51;
            texthover = 255;
            if(mouseIsPressed){
                for(var i = 0; i < num; i++) {
                    bs[i].x = random(0, width);
                    bs[i].y = random(-600,-30);
                
                }
                ship1.x = width/2;
                ship1.y = 450;
                gscore = 0;
                cap = 0;

                
            }
        }else {
            hover = 200;
            texthover = 0;
        }
        
    }
    
}

function ship() {
    this.x = width/2;
    this.y = 450;
    
    this.update = function() {        
        if(keyIsDown(LEFT_ARROW) || keyIsDown(65)) {
            if(this.x>14){
                this.x = this.x - map(gscore,2,100,2,3);
                
            }
        }
        if(keyIsDown(RIGHT_ARROW) || keyIsDown(68)) {
            if(this.x<width- 15){
                this.x = this.x + map(gscore,2,100,2,3);
            }
        
        }
    }
    this.show = function() {
        push();
        rectMode(CENTER);
        fill(200,200,0);
        rect(this.x+15, this.y+5, 5, 30);
        fill(150,100,200);
        rect(this.x+15, this.y + 15,30, 15)
        pop();
        
    }
    
    

    
    
}
function windowResized() {
    createCanvas(windowWidth,windowHeight- 4);
    button1.update();
}


    

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/addons/p5.dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>