Finding pixels inside a shape

p5.js Coding Questions
1

Hi all ,
I have a ‘bouncing ball’ , of sorts . If you have followed Dan Shiffmans’ tutorials you must have encountered one. I want to show the underlying captured video only within the bouncing ball, like a spotlight.
I am attaching a pic showing the video and the circle .
Capture
Any hints into which direction to explore would be great.
Thanks Jonathan

2

Have you tried the mask() function ?
https://processing.org/reference/PImage_mask_.html

3

Thanks jb4X -
I am using p5.js - does not seem to have a mask .
If it did (or does and I missed it) : how would you go about it ? I think I need an image with the circle white and the rest black (masking part - right ?) and then move the image rather than the circle? Am I in the right direction?
Thanks again , Jonathan.

4

https://p5js.org/reference/#/p5.Image/mask

https://ThimbleProjects.org/gotoloop/97931/

https://ThimbleProjects.org/gotoloop/97931/sketch.js

1 Like
5

Ho sorry,

I didn’t see that you posted in the P5.js section.
I’m working with processing and assume that everyone is :confused:

Anyway, the link that GoToLoop posted is the equivalent in P5.

For the rest you are on the right track I think :slight_smile:

1 Like