#Inkscape gradient 2 colors code

So after I changed the procedure that initializes the color vector, I just modified the rendering part to read the color into a floating point quadruplet, and then performed the dithering normally. This is a fixed-point approach, different from floating-point. On the second half I stored the next 8 most significant bits, 8 extra “binary places”, just like you would with decimal places. On the first half of the extended vector I stored just the exact same numbers that were originally being written. What I did instead was extending the vector size from 1024 to 2048 quadruplets of unsigned chars.

#Inkscape gradient 2 colors code

I could have tried to change the whole code to use floating point instead of unsigned chars, but that is a lot of work. The key to make it work was to be able to store in the vector that is used in the rendering the same colors, but with more depth. Really just hack”the code to make the dithering. But what I wanted was just a quick and dirty way to make it work. I would probably make it work with floating point in all parts of the processing, and only convert to 8-bit or whatever in the last steps. If I wanted to make the program right, I would have to change a lot of things. But because this vector is created with colors in the final bit depth, the rounding has already been done by the time we are rendering the pixels, and know their coordinates to sum the proper value from the dithering matrix. That makes it faster and also easier to deal with all the stop point coordinates and stuff like that. Before calculating the pixel colors they first define a large vector where the colors from the gradient are calculated beforehand. The way Inkscape and other similar programs work prevents us from doing that. Well, that is the theory, but there is a problem in practice. To implement dithering in this gradient rendering to prevent that, all we needed was to add that pattern matrix before the rounding. And if the colors from the beginning and end of the gradient are too close to each other compared to the length of the gradient, there will be regions of pixels that will be rounded to the same value. It then rounds the value to the 8-bit palette. To create a gradient, a program such as Inkscape has first to make a floating-point calculation that yields a floating-point representation of the color levels in all channels. The Bayer matrix creates a pattern that looks like cross-stitches, and should look familiar to you if you like low-tech stuff. Or you can create patterns such as lines and circles. You can sum a random uniform white noise for example. To make a dithering you sum a certain signal to the image before rounding. 8-bit depth is to simply round the value. When you have an image with large depth, such as in floating point, the normal way to convert it to e.g. There are different ways to create this pattern, the one I used is based on the Bayer matrix. It is based on the fact that if you smooth out a pattern with two different color tones you get an intermediary tone. It seems to be working fine, I’ll show here some demonstration pictures and also provide a patch.ĭithering is a technique to reduce the number of color levels of an image, or its bit depth. So I challenged myself to implement a basic dithering into Inkscape’s gradient during the weekend. It all started when I created a logo for my school department, rendered it in high resolution and was disappointed with how the gradient looked. Last sunday at 22:00 I finished a cool weekend hacking project! This post tells how I tweaked the Inkscape source code to enhance its gradients with a dithering technique, to make them look better and avoid the so-called “banding” effect.