More messing around with gradients in Processing

I started playing around again with different ways to make a gradient in Processing other than a linear gradient. I started with this shape and by duplicating the shape. By adjusting the position with translate I can get gradients like below. These are pretty fun to run and see what slight tweaks in the number of duplicates and where the shape starts with on the canvas will give. The gradient itself comes from setting the alpha value in HSBA colors.

Gradients are hard in Processing

This took a while. Yesterday while watching the E3 2021 live stream I tried to work through how to create a gradient in Processing, specifically how I could apply it to an ellipse. I found a few ways to create them while searching but I wanted to try and see if I could work it out myself.

In order to get this to work, I had to draw 1px rectangles from the top to the bottom of the ellipse. I had already worked out a bit of the work in a previous sketch to get arcs of an ellipse and plot points on them. UsingĀ lerpColor I could tween between two colors at each pixel to get the gradient. From the top left arc, I found the mirror point on the top right arc and drew a rectangle from those two points, then continued down the arc to the middle. Then the same was done from the bottom left arc to the right.

Fair warning I’m still a bit new at Java programming and I’m sure there could be some improvements. If you have any suggestions on how I could improve this method I’m all ears.