If(mousePressed) is not working (Processing.js)

Question

If(mousePressed) is not working (Processing.js)

551 Views Asked by Sheryl At 22 April 2020 at 13:46

I want to make a door open when the user clicks on it. Here's how the code looks like:

with(processing) {
        noStroke();
        size(1200, 900);
        background(255, 153, 153);
        var x = 50;
        var y = 50;
        if(mousePressed && (mouseButton === LEFT)) {
            fill(139, 69, 19);
            rect(x+150, y, 150, 200); // door opened
            fill(89, 60, 31);
            rect(x, y, 150, 200); // doorway
            fill(255, 222, 173);
            ellipse(x+(335-50), y+100, 10, 10); // handle
        }
        else {
            fill(139, 69, 19);
            rect(x, y, 150, 200); // door unopened
            fill(89, 60, 31);
            rect(x, y, 150, 200); // doorway
            fill(255, 222, 173);
            ellipse(x+15, y+100, 10, 10); // handle
        }
    };

However, when I click on the door, it won't open. It seems like it doesn't even understand when my mouse is pressed. I wonder what's wrong with my code. I try copy-pasting the same code to Khan Academy (except that I use mouseIsPressed instead of mousePressed) and it works!! So why is it not working in my IDE? I use VSCode btw.

Thank you!

Original Q&A

There are 1 best solutions below

**Hien Nguyen** · Answer 1 · 2020-04-22T13:55:17.557000

You need move your code to mousePressed event handler

mousePressed = function() {
    noStroke();

        background(255, 153, 153);
        var x = 50;
        var y = 50;
        if(mousePressed && (mouseButton === LEFT)) {
            fill(139, 69, 19);
            rect(x+150, y, 150, 200); // door opened
            fill(89, 60, 31);
            rect(x, y, 150, 200); // doorway
            fill(255, 222, 173);
            ellipse(x+(335-50), y+100, 10, 10); // handle
        }
        else {
            fill(139, 69, 19);
            rect(x, y, 150, 200); // door unopened
            fill(89, 60, 31);
            rect(x, y, 150, 200); // doorway
            fill(255, 222, 173);
            ellipse(x+15, y+100, 10, 10); // handle
        }
};

Code in Khanacdemy

https://www.khanacademy.org/computer-programming/spin-off-of-mousepressed-processingjs/5395110149373952

If you want to run in HTML file, you need include script code to script tag with type="application/processing"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="processing.js"></script>
  <script type="application/processing">
    /* @pjs preload="images/grass.jpg"; */

// When mouse is clicked, grow the flower
void mouseClicked(){
    alert(1)
    draw();
  };

void draw(){

        background(255, 153, 153);
        var x = 50;
        var y = 50;
        if(mousePressed && (mouseButton === LEFT)) {
            fill(139, 69, 19);
            rect(x+150, y, 150, 200); // door opened
            fill(89, 60, 31);
            rect(x, y, 150, 200); // doorway
            fill(255, 222, 173);
            ellipse(x+(335-50), y+100, 10, 10); // handle
        }
        else {
            fill(139, 69, 19);
            rect(x, y, 150, 200); // door unopened
            fill(89, 60, 31);
            rect(x, y, 150, 200); // doorway
            fill(255, 222, 173);
            ellipse(x+15, y+100, 10, 10); // handle
        }
};
  </script>

</body>
</html>

If(mousePressed) is not working (Processing.js)

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in PROCESSING.JS

Trending Questions

Popular # Hahtags

Popular Questions