Refulgent is a generative art collection released on opensea for my previous collections holders. Refulgent was solely created in p5.js, without any use of other libraries or shaders.

This article provides background on the creation of Refulgent, as well as details on the approaches and techniques I used.

I had recently visited Universal Studios with my family, and the Transformers ride gave me inspiration to create this collection. I was like “it would be fun to make something similar with code.” You know, this was one of the several times when you initially have an idea of what you want to make and it comes out to be completely different from what you first imagined and sometimes much better.

Construction

My very first sketch phase looked like this. I hadn’t really added much to it, just a simple starting out sketch. This had a bunch of distorted rectangles with gradients. I had also gotten the effect that I wanted, which was having vertical symmetry such as in the transformer.

The next phase included an improved gradient on the shapes. The gradient in the above image was only a simple one, whereas the one in the image below is a more comprehensive one. In order to achieve this effect, I added many bands of colors in the gradient. Here’s how it looks:

The image on the left shows the different gradient bands. I have drawn dashed lines on the positions of the bands in the image on the right for better visualization. Here’s the code on OpenProcessing: https://openprocessing.org/sketch/1574958

This gradient was implemented in the next phase shown below. Along with this, I fixed a few bugs and drew more shapes. This time, I varied the perspective even more, allowing for not only linear but also other directions. Achieving and implementing the gradient look wasn’t that hard, but adding a more complicated composition, reminiscent of swords, while allowing parallelism to blend in was rather a bit challenging. In the end, this is how it looks:

Just by adding more figures, you get a completely different composition!

After this, I began adding a shine to the composition. This shine appeared to be difficult at first. I wanted to achieve a shine, fading at the ends. I made a mockup of this in photoshop, here’s what I wanted to achieve.

To achieve this effect, I thought curveVertex would be a good option. I tried to make this shape in curveVertex, but it never quite turned out the way I wanted it to and it was becoming really challenging to get this effect. As you can see, the red arrows show the fading sides that I made in the mockup. These sides were fading in a circular path, not a straight one. This made it even more challenging as even if I was able to draw the shape, getting the fading effect was challenging.

After thinking about this for an hour and trying out different methods, I asked myself: Can I achieve this with an ellipse? I quickly drew an ellipse, making an oval shape. Here’s how it looks:

Okay, the ellipse is drawn. Now what?

I got an idea to use gradient, but not linear, radial so we get the circular fading effect mentioned above. I set the starting color to white, and the ending color to transparent, so it slowly blends together and goes transparent when the stop radius has been reached.

Here’s how it looks now, through code: