See the code in action here
Gradient is a tool to help autogenerate code that can be dropped into an already existing project to have a particular behavior; making a particular color gradient. It is ideal in projects that deal with height maps, heat maps, energy levels, and for many other one variable visualizations. The code can be called to preallocate the values of an array or be called every update or frame. The function takes four parameters, one is the input and the other three are references for where to put R, G, B values.
The main part of the application are these sliders that appear on the top half. There are two sliders at the ends whose position cannot be changed (a color gradient is between two colors). The program begins with one slider in the middle that can be moved around with
or
buttons (hold right click to continuously move them, left for pixel precision) You can also move the sliders by dragging them or tapping anywhere on the gradient. You can add additional sliders with the
or delete them with
.
Deleting will remove the current active slider, unless it is one of the ends. To change the active slider simply click on another slider. The color of the current slider can be changed using the RGB sliders on the bottom left, or by pasting a hex color using
.
will generate code based on the state of the sliders and display it to the terminal.
will output a small help section to the terminal.
changes the granularity of the color gradient. Left clicking will make it more fine but it is more graphically intensive to draw the dynamic gradient (depending on your browser and computer of course). Right clicking on this button will lower the resolution making the changes in color more visible. Note that to achieve this affect in a program you can simply pass spaced out values to the autogenerated function.
This was coded in the span of two weeks using C and just SDL from scratch. I use a handy library I created for myself called SDLX which makes it much easier for me to create such applications.
I purchased the sprites from https://cyangmou.itch.io/pixel-menu-gui-hud-icons-basicset and made a few modification where necessary. I created the question and clipboard sprites as best I could to match the style using Aseprite.
It was ported to the web using Emscripten.