fogbound.net




Wed, 27 Jan 2016

Onion Texture in Javascript and Canvas

— SjG @ 9:23 pm

When I’m focused on other things and doodling, one of the textures that regularly emerges is a fill pattern of concentric irregular circles.

onions_1
(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:
onions_2

onions_5

onions_3

onions_4
(click to enlarge any of them)

onion_exp_f