Hello How can we divide the whole page into equal circles without using shader and using SDF
exactly like the image below?
For example, divide the entire image into 36 equal circles so that it covers the entire screen
Of course, in such a way that the edges of the circles have a soft state and are not sharp
Here is the basic idea. You multiply a circular gradient by a few numbers 2*PI will give you the period range for sine, then you can multiply by however many circles you want.
From range will put the sine wave into a 0-1 range so it’s in the texture’s visible range.
Then you can use step or smooth step to define the width of the rings. Smooth step will give smoother edges, of course.
These patches can help you refine the look of the edges
Thank you for your explanation
I think I did not ask my question well, I apologize
I actually said draw by SDF so that I can access the texture of each circle Actually, I wanted to design the time warp effect in the form of a circle, so I need to access the texture of each circle so that their collection together will show the cameratexture.
And that’s why I said that the edges of the circles should be blurred when the camera moves, because the texture of each circle is supposed to have a little delay Finally, the effect should be natural and not artificial
The gradient is the same as an SDF, but you can also use distance(uv, vec2(.5, .5)), or an SDF circle. They are all single channel fields.
You could create these with a for-loop inside of a sparkSL script, but more simply, I think it’s just a matter of mapping the rings to the proper texture. I’ve done this with time delay effects before. You can use stepped distance from the center as an index to select a cell from a sprite sheet.
Yes, the solution is interesting, thank you 
