So what I am trying to do is make a clicker game, yet when I use the standard:
let Coins = 0;
function setup() {
createCanvas(400, 400)
}
//draws the circle
function draw() {
background(100)
circle(200, 200, 50)
//creates the text to show the amount of coins
text(Coins, 200 - (textWidth(Coins) / 2), 150)
}
//detects when the mouse is pressed
function mouseClicked() {
//changes the number of coins
Coins = Coins + 1
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>I can click anywhere and it will count up the Coins, but I want it so that if the mouse is On the shape/element it will then count. I don't want to use the "If (mouseX => width / 2)" but just know when the mouse is over/hovering over the element.
In p5js you need to implement "hit testing" yourself. In this case you can do so by checking if the distance between the mouse and the center of the coin is less than the radius of the coin.
let Coins = 0;
function setup() {
createCanvas(400, 400)
}
let coinPosition = new p5.Vector(200, 200);
let coinRadius = 25;
//draws the circle
function draw() {
background(100)
push()
if (dist(mouseX, mouseY, coinPosition.x, coinPosition.y) <= coinRadius) {
fill('gold')
}
circle(coinPosition.x, coinPosition.y, coinRadius * 2)
// restore the previous fill value
pop()
//creates the text to show the amount of coins
text(Coins, 200 - (textWidth(Coins) / 2), 150)
}
//detects when the mouse is pressed
function mouseClicked() {
if (dist(mouseX, mouseY, coinPosition.x, coinPosition.y) <= coinRadius) {
//changes the number of coins
Coins = Coins + 1
}
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>