Вам нужно переместить свой код в mousePressed обработчик событий
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
}
};
Код в Khanacdemy
https://www.khanacademy.org/computer-programming/spin-off-of-mousepressed-processingjs/5395110149373952
Если вы хотите для запуска в файле HTML необходимо добавить код скрипта в тег скрипта с помощью 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>