Arc gradients in Processing

Sometimes, while trying to achieve a specific result in Processing, one may need to work with color gradients. There are several different types of gradients, which usually are listed in visual editing tools like Adobe Photoshop, Illustrator and others. Those could be linear, radial, etc.

I had faced challenges when trying to style figures and shapes with color gradientes in Processing before. And in one particular instance, I needed to be able to draw arcs of different lenghts, thicknesses, radius, etc; and I also needed to style them using color gradients of more than just two colors; if possible, I should be able to set up any number of colors within that gradient, much in the same way that one would be able to do in Photoshop.

The way to achieve this in processing is leveraging the use of shapes and vertices. An arc, can be composed of a series of trapezoid-like QUADS, like the ancient romans used bricks to build arcs.

Drawing 2D shapes in Processing isn’t difficult, and one can take advantage that one is able to change the fillcolor between vertices. This way, if I could do some color interpolation, I would be able to make an arc gradient:

With this building block, I went ahead and played a little bit trying to force some compositions.

You can download and play around with the code here:

https://github.com/leacasas/arcs_and_shapes

Leave a comment

Design a site like this with WordPress.com
Get started