P5.js mousePressed() function not working , and it is outside drawfunction

Question

I don t understand why isn't working,I think is a problem with the draw and setup function.Here is the full code:

function setup() {
    var height = 400;
    var length = 400;

    createCanvas(length,height);
    textSize(50);
}

function draw() {

    background(224,224,224);//grey_color

    var vx1 = 0;
    var vy1 = 0;
    var vx2 = 0;
    var vy2 = 400;
    //vertical

    for (i = 0 ; i < 5 ; i++){

        line(vx1,vy1,vx2,vy2);
        stroke(40);

        if(i == 1 || i == 3 ){
            strokeWeight(10);
        }
        else {
            strokeWeight(4);
        }

        vx1 += 100;
        vx2 += 100;
    }

    var ox1 = 0;
    var oy1 = 0;
    var ox2 = 400;
    var oy2 = 0;
    //orizontal

    for (i = 0 ; i < 5 ; i++){

        line(ox1,oy1,ox2,oy2);
        stroke(40);

        if(i == 1 || i == 3 ){
            strokeWeight(10);
        }
        else {
            strokeWeight(4);
        }

        oy1 += 100;
        oy2 += 100;
    }

    text('3', 33, 65);//1
    text('4', 233, 65);//2
    text('1', 133, 165);//3
    text('3', 333, 165);//4
    text('2', 33, 265);//5
    text('3', 133, 265);//6
    text('1', 33, 365);//7
    text('2', 333, 365);//8
    //nr_sudoku

    if(mouseX > 100 && mouseX < 200 && mouseY < 100)
    {
        cursor(CROSS);
    }
    //1
    else if(mouseX > 300 && mouseX < 400 && mouseY < 100)
    {
        cursor(CROSS);
    }
    //2
    else if( mouseX < 100 && mouseY > 100 && mouseY < 200)
    {
        cursor(CROSS);
    }
    //3
    else if( mouseX > 200 && mouseX < 300 && mouseY > 100 && mouseY < 200)
    {
        cursor(CROSS);
    }
    //4
    else if( mouseX > 200 && mouseX < 400 && mouseY > 200 && mouseY < 300)
    {
        cursor(CROSS);
    }
    //5
    else if( mouseX > 200 && mouseX < 400 && mouseY > 200 && mouseY < 300)  
    {
        cursor(CROSS);
    }
    //6
    else if( closed > 100 && mouseX < 300 && mouseY > 300 && mouseY < 400)
    {
        cursor(CROSS);
    }
    //7
    else {
        cursor('grab');
    }
}//draw_fct

function mousePressed() {
    text('A', 10, 10);
}

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

I tried a lot of things but is the same result

Can you please try to be more specific? What do you mean when you say it isn't working? Can you please try to narrow this down to a [mcve]? — Kevin Workman, Feb 09 '19 at 20:35
Make the question more specific. For example is the question, "Why is there no output created by the call to the text method inside of mousePressed()? The question can also be more clear if the code example is reduced to the minimum to reproduce the behavior for the question. — Charlie Wallace, Feb 11 '19 at 17:28

score 1 · Accepted Answer · answered Feb 09 '19 at 20:50

It won't work to draw anything in an event. Note, the first operation in draw() is background(224,224,224). background() fills the entire window and clears everything what you've drawn in the event function.

Create a container a variable, where you can store the "click" position:

var clickPos;

Store the mouse position in the mousePressed event:

function mousePressed() {
    clickPos = [mouseX, mouseY];
}

Do the drawing in the draw function:

function draw() {

    background(224,224,224);//grey_color

    if (clickPos) {
        text('A', clickPos[0], clickPos[1]);
    }

    // [...]

}

At the beginning clickPos is undefined and the 'A' is not drawn. When the mouse is clicked the position is stored to clickPos. In the next frame the 'A' is drawn on the position of the click. This causes that the 'A' is always drawn on the last position of the mouse click.

See the example, where I applied the changes to your original code:

function setup() {
    var height = 400;
    var length = 400;

    createCanvas(length,height);
    textSize(50);
}

var clickPos;

function draw() {

    background(224,224,224);//grey_color

    if (clickPos) {
        text('A', clickPos[0], clickPos[1]);
    }

    var vx1 = 0;
    var vy1 = 0;
    var vx2 = 0;
    var vy2 = 400;
    //vertical

    for (i = 0 ; i < 5 ; i++){

        line(vx1,vy1,vx2,vy2);
        stroke(40);

        if(i == 1 || i == 3 ){
            strokeWeight(10);
        }
        else {
            strokeWeight(4);
        }

        vx1 += 100;
        vx2 += 100;
    }

    var ox1 = 0;
    var oy1 = 0;
    var ox2 = 400;
    var oy2 = 0;
    //orizontal

    for (i = 0 ; i < 5 ; i++){

        line(ox1,oy1,ox2,oy2);
        stroke(40);

        if(i == 1 || i == 3 ){
            strokeWeight(10);
        }
        else {
            strokeWeight(4);
        }

        oy1 += 100;
        oy2 += 100;
    }

    text('3', 33, 65);//1
    text('4', 233, 65);//2
    text('1', 133, 165);//3
    text('3', 333, 165);//4
    text('2', 33, 265);//5
    text('3', 133, 265);//6
    text('1', 33, 365);//7
    text('2', 333, 365);//8
    //nr_sudoku

    if(mouseX > 100 && mouseX < 200 && mouseY < 100)
    {
        cursor(CROSS);
    }
    //1
    else if(mouseX > 300 && mouseX < 400 && mouseY < 100)
    {
        cursor(CROSS);
    }
    //2
    else if( mouseX < 100 && mouseY > 100 && mouseY < 200)
    {
        cursor(CROSS);
    }
    //3
    else if( mouseX > 200 && mouseX < 300 && mouseY > 100 && mouseY < 200)
    {
        cursor(CROSS);
    }
    //4
    else if( mouseX > 200 && mouseX < 400 && mouseY > 200 && mouseY < 300)
    {
        cursor(CROSS);
    }
    //5
    else if( mouseX > 200 && mouseX < 400 && mouseY > 200 && mouseY < 300)  
    {
        cursor(CROSS);
    }
    //6
    else if( closed > 100 && mouseX < 300 && mouseY > 300 && mouseY < 400)
    {
        cursor(CROSS);
    }
    //7
    else {
        cursor('grab');
    }
}//draw_fct

function mousePressed() {
    clickPos = [mouseX, mouseY];
}

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

P5.js mousePressed() function not working , and it is outside drawfunction

1 Answers1