I wanted this background, custom to my own taste

I couldn't find it anywhere.

I could've made the image in photo manipulation tools like Photoshop, Affinity, or even Gimp, but it's not easily adjustable, requires actual editing skills (which I don't immediately have, it's been a while), and I'm also lazy. I also needed something quick and easy for me to grab for my projects - either as backgrounds or card images. So, I thought that maybe raster wasn't the approach.

My immediate thought was to pivot to Generative Art, which is a practice of creating art/shaders using code and mathematical functions. Using a programatic approach meant I can easily adjust parameters to my needs and allows easy templating.

My biggest inspiration was this site called fffuel.co. It's a site that allows the creation of what seems to be shader images that can be adjusted using sliders, very convenient. However, there are two things that I needed that wasn't provided. First, it's to be able to change a specific value (e.g. magic numbers) that wasn't available on the slider. The second is to be able to add my own image generator using GLSL.

I could've simply browsed Shadertoy or use glslViewer to create images. But both lack the ease of fffuel.co.

So, that's where the thought of building shader shot came to be.

Simplicity in UX

The app is simple. First, choose from a list of templates or create your own. Then, adjust the code for the shader and adjust the values. Last, export an image that captures the shaders.

On the left is the sidebar that shows a list of templates that a user can modify/use. Upon clicking, the sidebar becomes a browser code editor that can compile GLSL. The right side is a preview of the shader along with a section to adjust the uniform values of the shaders.

What's next

• Sharing a shader through links
• Saving states on the browser to protect form refreshes
• UI/UX improvements - possibly a UI rehaul.