If(mousePressed) is not working (Processing.js)
Question
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!
1 answers
solution1
0 2020-04-22 13:55:17
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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.