Onion Texture in Javascript and Canvas
When I’m focused on other things and doodling, one of the textures that regularly emerges is a fill pattern of concentric irregular circles.
(click to enlarge)
Now, doodling is a way of letting my mind idle. Why I’d want to automate that, I couldn’t say. But for some reason, I did.
|
So the question was: how do I draw a “sloppy circle,” or one that’s not exactly regular, especially if I want to then draw another similar circle inside of it, and so on.
I settled on the idea of picking a set of points around a circle, with roughly the same radius. If I just drew a line between these points, it would be a regular polygon, and not as gentle as I’d like. So, instead of lines, I needed gentle Bezier curves from point to point. To get the Bezier control points, I need to create a tangent to the radial line, and put the control points for the curve on that tangent. But how far away from the original point? Better make it a variable! So, with some playing, I was able to get reasonable values. You can play with it yourself! You can easily get results like these:
|
 |
