mouseClicked to get mouseX and mouseY

p5.js Coding Questions
1

I want to be able to log the position of the mouse when it is clicked on the canvas, I can get it to work with mousePressed but the function mouseClicked() is not working can anyone point me in the right direction?

Code:

 function mouseClicked(){
            let clickx = mouseX;
            let clicky = mouseY;
            let i = null;
            let j = null;
            if(clicky>7&&clicky<52){
                i = 0;
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('[',i,'][',j,']');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }

The else if statement just continues below that but I didn’t want to create a huge post

2

Hi,

Welcome to the forum! :slight_smile:

If you look at the p5js documentation for the mouseClicked() function, it says :

The mouseClicked() function is called once after a mouse button has been pressed and then released.

Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased().

So are you pressing your mouse then releasing it? Are you pressing the left mouse button?

3

Hi josephh,

Yeah I’m clicking and releasing the left mouse button but it doesn’t seem to be registering the clicks
Would it be better if I put the entirety of my code?

4 
<script type='application/javascript'>
    
    function preload(){
        img1 = loadImage("{{url_for('static', filename='images/svg/ambulance.svg')}}");
        img2 = loadImage("{{url_for('static', filename='images/svg/virus.svg')}}");
        img3 = loadImage("{{url_for('static', filename='images/svg/face-mask.svg')}}");
        img4 = loadImage("{{url_for('static', filename='images/svg/lungs.svg')}}");
        img5 = loadImage("{{url_for('static', filename='images/svg/vaccine.svg')}}");
        img6 = loadImage("{{url_for('static', filename='images/svg/skull.svg')}}");
        img7 = loadImage("{{url_for('static', filename='images/svg/cross.svg')}}");
       
    }
    function setup(){
    
        
       let cnv = createCanvas(600,600)
       cnv.id('canvas')
    }

    function draw(){  
        var x = 10;
        var y = 10;
        for(var i =0;i<array.length;i++){
            for(var j=0;j<array[i].length;j++){
                // console.log(array[i][j])
                if (array[i][j] == 1){
                    image(img1,x,y,30,30);
                    x+=45;
                }else if (array[i][j] == 2){
                    image(img2,x,y,30,30);
                    x+=45;
                }else if (array[i][j] == 3){
                    image(img3,x,y,30,30);
                    x+=45;
                }else if (array[i][j] == 4){
                    image(img4,x,y,30,30);
                    x+=45;
                }else if (array[i][j] == 5){
                    image(img5,x,y,30,30);
                    x+=45;
                }else if (array[i][j] == 6){
                    image(img6,x,y,30,30);
                    x+=45;
                }else if (array[i][j] == 7){
                    image(img7,x,y,30,30);
                    x+=45;
                }
                
            }
            y+=45;
            x=10;
        }

        
       
    function mouseClicked(){
            let clickx = mouseX;
            let clicky = mouseY;
            let i = null;
            let j = null;
            if(clicky>7&&clicky<52){
                i = 0;
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('[',i,'][',j,']');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }else if(clicky>52&&clicky<97){
                i = 1;
                console.log('x = 1');
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('y = 0');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }else if(clicky>97&&clicky<142){
                i = 2;
                console.log('x = 2');
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('y = 0');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }else if(clicky>142&&clicky<187){
                i = 3;
                console.log('x = 3');
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('y = 0');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }else if(clicky>187&&clicky<232){
                i = 4;
                console.log('x = 4');
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('y = 0');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }else if(clicky>232&&clicky<277){
                i = 5;
                console.log('x = 5');
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('y = 0');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }else if(clicky>277&&clicky<322){
                i = 6;
                console.log('x = 6');
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('y = 0');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }else if(clicky>322&&clicky<367){
                i = 7;
                console.log('x = 7');
                if(clickx>7&&clickx<52){
                    j = 0;
                    console.log('y = 0');
                    
                }else if(clickx>52&&clickx<97){
                    j = 1;
                    console.log('y = 1');
                    
                }else if(clickx>97&&clickx<142){
                    j = 2;
                    console.log('y = 2');
                }else if(clickx>142&&clickx<187){
                    j = 3;
                    console.log('y = 3');
                }else if(clickx>187&&clickx<232){
                    j = 4;
                    console.log('y = 4');
                }else if(clickx>232&&clickx<277){
                    j = 5;
                    console.log('y = 5');
                }else if(clickx>277&&clickx<322){
                    j = 6;
                    console.log('y = 6');
                }else if(clickx>322&&clickx<350){
                    j = 7;
                    console.log('y = 7');
                }
            }

        }
    }
    
        
    </script>
5

Ok the first thing that I notice is that there’s a lot of repetitions in your code :face_with_raised_eyebrow:

Most of the time, if you have so much if statements, it’s that your code is not optimized. The whole point of programming is not to repeat yourself, otherwise you can do it by hand.

I suppose that you are displaying images on a grid and you want to detect the location of the mouse on the grid when you click. If it’s what you want to do, we can figure out how to do it.

Next point (this is probably the problem) is that you are using a variable array that you never declared in your code. So accessing array[i][j] should give you an error.

1 Like
6

Yeah, I’m pretty new to coding so optimising isn’t my strong point, sorry. Would it be better for me to write a function to check the mouseX and use it each time?

The array I have declared in the head of html code

7

Yeah ok no problem, we’ve all been there once :slight_smile:

I suggest you separate your JavaScript file(s) from your HTML file because it’s much more convenient to have separate files for debugging. So declare your global variables in the same file that your script.

Personally I never use mouseClicked() always mousePressed() because it does the same basically.

And if you think about it, all your if statements are just creating a loop through the length of the array and checking if the mouse is between a certaint column and row.

2 Likes
8

Yeah, my issue will be that I will want to use an AJAX call when the mouse is clicked so I’m worried that if I use mousePressed it will send multiple rather than just the one

9

No it says :

The mousePressed() function is called once after every time a mouse button is pressed.

1 Like
10

Perfect, thanks for your help and sorry for the terrible code

1 Like