P5=1
  • Overview
  • Transcript

3.1 Listening for User Input

p5.js can also respond to user input. In this lesson you’ll learn how to detect when and where the user has clicked their mouse, and check to see if they’ve burst one of our bubbles.

Related Links

3.1 Listening for User Input

So many lovely little bubbles, don't you wish you could pop them? Seems like a good idea to me. Luckily p5 has us covered. As well as being great for drawing, p5 provides us with some nice helpers for capturing user input. The one we're going to use here is called mouseClicked. Let's just write this lower draw function. When the user clicks anywhere in our canvass this function is called automatically. And inside this function we get two values, mouseX and mouseY. These are the x and y coordinates, or where the mouse is clicked on your canvas. Let's head to the browser, and open up the console. Now you can see as we click around, the x and y positions are printed out. This means that if we know where the user has clicked, then we can check if he clicked on a bubble. The first thing we should do is write a function to check just that. We'll call it, wasClickInsideBubble. And we'll want to pass bubble as a parameter. We'll call this function from the mouseClicked function. So in here, remove the console log and replace it with bubbles.forEach. And again, we have a function to call for each bubble in our array. With bubble being the individual bubble. if {wasClickInsideBubble (bubble)}. And let's just set a property inside our bubble object to say, bubble.popped = true. So if the bubble is clicked then its status becomes popped. We'll still need to fill out that wasClickInsideBubble function though. Now because we know the dimensions of our bubble, we just want to keep things simple and check if the x and y positions of the click were inside the bubble. Because our coordinates are for the center of the bubble, then from the middle to the edge is the radius. Let's create a variable for that. Far bubble radius equals bubble.diameter divided by two. Okay, let's write an if statement to check if we are clicking inside the bubble. This is going to be big so let's put it on a new line. We first want to check if the mouse clicks x position is to the right of the left most edge of the bubble. That means we write mouseClicked MouseX > bubble.x- bubbleRadius. This is saying that mouse click was somewhere to the right of the left-hand edge of the bubble. We should put this in parentheses, as we're going to use an and here, Next mouseX So this is saying that the mouse clicks x position was to the left of the right edge of the bubble. And because we're using an and, we now know that if the mouse click was between these two points, then we know the x position at least was inside the bubble. All we have to do now is do the same with the y position, so another and, mouseY > bubble.y- bubbleRadius. And mouseY Remember the bubble y is just the starting position of our bubble, so we need to take our off center into account so we know the actual position of our button when the mouse is clicked. We do that by just taking bubble.offset away from bubble y, like so. Okay, so we'll return true if these four criteria are met. Meaning the click was inside the bubble, and false if it wasn't. Great. At this stage, you might want to stick another console log statement, to check that your code is working. So then we are setting bubble.popped to be true, write, console.log('popped!'), and reload your browser. Looks like that's working well. In the next lesson, we'll look at how we can visually burst those bubbles.

Back to the top