Is it possible to use an irregular image as a button?
That is, an image that along the X has different measures of Y, and vice versa, I can use to MousePressed ?
Thanks!
The short answer is yes.
Create an image and make the non-button face pixels transparent. Load this image into a PGraphics object, you can use image("button_image.png", x, y) to show the button in the sketch. When the mouse is over the image calculate the pixel position in the image corresponding to the mouse position and if it is non-transparent it is over the button face.
1 Like
I’m sorry, I do not know the program so well! I’m still a beginner.
Could someone give an example of the code?
The example given is basically to treat it as rectangular button for clicking purposes, but use an image where the part you want to not be visible is transparent. So you detect the press / release / click, but then use some code to decide whether the exact spot clicked was in the visible region and only do the button’s action if it was.
The simple way is to use the get(x, y) method to get the color of a a particular pixel in the display area, such as the one at the mouse coordinates. For a transparent image the color you’ll get when clicking on the transparent region is the one of whatever was behind it when drawn, but that’s not important as you’re only concerned with whether it is the color of the button. However that does mean that the two must be different colors and the desired region of the “button” image must be one solid color.
If you want to use any image, even one with text and other stuff on it then you need to do something a bit more complicated to determine that the mouse falls in the intended region since the difference between button and not has nothing to do with a simple dimension like being the right color.
1
A simple and messy (i.e. computationally expensive) way would be to use two images, one the original and the second to be used to “slice” the desired region out before drawing. You can use then use the original image to build up some sort of representation of the pixels that don’t belong to the desired region so you can test against them later (i.e. a one for one test of your pixels against all the ones you know aren’t in the desired region). Of course the undesired region needs to be distinguishable, like making it a color you never use in any button.
2
Another way might be to load up the pixels array (of the image) and scan all through of them, checking when you have a pixel that is bordered by a color not found in the image and then store some data for each of them and basically generate one more polygons that define the shape and then test if the point clicked is inside and outside of the polygons. In an ideal world you want to somehow reduce it to a simple polygon so you can just be lazy and use simpler tests…
Test algorithm (for a simple irregular shape that’s solid)
For every pair of consecutive external points (basically an edge of a shape) on a polygon describing a solid, but irregular image, take those two points and draw a rectangle using them as opposite corners. That should give you a rectangle where half is inside the shape and half is outside. You can fairly easily calculate the slope of the line and thus a point on the line with the same X or Y coordinate and then it’s a simple greater than/less than comparison to see if it’s in the included triangle. That’s one rectangle for each point. Next, you need to describe rectangles for any leftover space outside the shape and those rectangles. Then you can just figure out which rectangle the point to check is in, see if it’s an edge rectangle or an outer rectangle, then check whether it is inside or outside the triangle…
3
If the images can be approximated by a common geometric shape such as a square, rectangle, circle, ellipse, or a combination thereof you could also hardcode that data and use it to do several tests before deciding the mouse is inside the button.
1 Like
If you want a more precise detection of whether the mouse is over the image you can pick vertices along the image, then test whether the mouse is over the polygon using collision detection.
A good example of this can be found here, but if your program prioritizes speed over accuracy, @Nathan’s approach would be more favorable.
1 Like
Thank you very much!