Can i create a mask from a shape??

RafaelAzevedo

Hello!

Can i create a mask from a shape (in this case an ellipse) and change background color but keep the mask untouched? This ellipse would have its size changed according to the screen and i would have a function windowResized()

Thanks! :)

KevinWorkman

Sure. Just create an image ahead of time and resize it to fit the screen or draw it to a buffer using createGraphics() and use that as your mask. Try something out and post a MCVE if you get stuck. Good luck.

jeremydouglass

Here is a previous example using a triangle rather than an ellipse:

• https://forum.processing.org/two/discussion/comment/77997/#Comment_77997

Edit: this is a Processing(Java) example, it is now clear this is a p5.js (JavaScript) question

RafaelAzevedo

And if i wanted to draw outside the circle instead of making a mask (crashed when i tried to make the mask), can i do it?

KevinWorkman

Can you please be more specific? What exactly was the error you got? It's pretty hard to help you without seeing any code.

RafaelAzevedo

https://gist.github.com/RafaelRAzevedo/5d999fecdf6012b817fa22da651fb10c

GoToLoop

Tip: Include the "index.html" code to your Gist as well, so it can be run online at: *-:)
http://Bl.ocks.org/RafaelRAzevedo/5d999fecdf6012b817fa22da651fb10c

Howto: https://Bl.ocks.org/-/about B-)

RafaelAzevedo

done, it might crash your page :|

GoToLoop

Avoid unnecessary creation of objects, especially heavy 1s like those from createGraphics() and such. :-SS

Do them all at once in setup() and re-use them over & over in draw(). *-:)

For example, p5.Graphics got methods clear() & background() for "resetting" them: :\">

1. https://p5js.org/reference/#/p5/clear
2. https://p5js.org/reference/#/p5/background

And here's an online example about re-using objects in order to avoid memory spikes & crashes: O:-)
https://OpenProcessing.org/sketch/421073

And a similar forum thread about the issue: B-)
https://Forum.Processing.org/two/discussion/22039/using-creategraphics-get-in-the-draw-loop-causing-memory-usage

RafaelAzevedo

But it will be resizable since the setup only runs once...

GoToLoop

What's the frequency of that resizing? Does it need to be every single 60 FPS draw() frame? :-/

Can't you just resize it only at the moment it needs to be rather than all the time? :-?

RafaelAzevedo

I wanted to, when you resize the canvas, you resize the graphics aswell... Is there any way of calling an function (that i wrote) into the mask? (Making the ellipse mask, a mask for the function)

GoToLoop

I wanted to, when you resize the canvas, you resize() the graphics as well...

You already resizeCanvas() the sketch's canvas inside windowResized() callback.

Why don't you take the opportunity to size() your other stuff along there? *-:)

https://p5js.org/reference/#/p5.Element/size

RafaelAzevedo

Why don't you take the opportunity to size() your other stuff along there? >

That might work, but still how do i protect the bola() function with a mask? i wanted to map bg color with mouseX and mouseY, but it clear the previous lines...

Can i protect it?

GoToLoop

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