Over a million developers have joined DZone.

Converting an Image to Negative using SDL2

DZone's Guide to

Converting an Image to Negative using SDL2

SDL2 can be great for altering images. Here's how to convert a picture to a negative.

Free Resource

Download our Introduction to API Performance Testing and learn why testing your API is just as important as testing your website, and how to start today.

In “Converting an Image to Grayscale using SDL2,” we manipulated the pixels of an existing image in order to convert it to grayscale. It is now very easy to add all sorts of effects by changing pixel values in different ways.

Another effect we can apply is the negative of an image. This means that the dark areas become light, and the light areas become dark. For instance, if we have this image of a Canadian goose:


By using any image editor, say Irfanview, we can get the following Negative:


This is a very easy effect to apply. Since each of the red, green, and blue channels is represented by a byte, its value is in the range between 0 and 255. So we can compute the negative by subtracting each value from 255. That way a bright value (e.g. 210) will become dark (e.g. 45), and vice versa.

Here’s the code for the negative image effect:

            case SDLK_n:
                for (int y = 0; y < image->h; y++)
                    for (int x = 0; x < image->w; x++)
                        Uint32 pixel = pixels[y * image->w + x];

                        Uint8 r = pixel >> 16 & 0xFF;
                        Uint8 g = pixel >> 8 & 0xFF;
                        Uint8 b = pixel & 0xFF;

                        r = 255 - r;
                        g = 255 - g;
                        b = 255 - b;

                        pixel = (0xFF << 24) | (r << 16) | (g << 8) | b;
                        pixels[y * image->w + x] = pixel;

The code for negative is very similar to Grayscale in that we’re looping over each pixel, calculating new values for red, green, and blue, and then applying the new value to the pixel.

Let’s try this out with a photo I took of Eldon House in London, Canada last September. Here’s the photo in its normal state:


When I press the N key to apply the negative effect, here’s the result:


I can also press N again to apply negative on the negative, and end up with the original image again:


That’s an important difference between grayscale and negative. Grayscale is an operation that loses colour information, and you can’t go back. Negative, on the other hand, is symmetric, and you can go back to the original image simply by applying the same operation again.

The source code for this article is available at the Gigi Labs BitBucket repository. It’s the same as in the Grayscale article, plus the code for the Negative effect in this article.

Find scaling and performance issues before your customers do with our Introduction to High-Capacity Load Testing guide.

game dev ,c & c++ ,performance

Published at DZone with permission of Daniel D'agostino, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}