How can I draw a chart to visualise an SDL gamma ramp?

Question

Ryan McCombe · Accepted Answer

This program creates a visual representation of a gamma ramp with a gamma value of 2.0. Here are the key components:

Part 1: We create a 256x256 pixel window - wide enough to show all 256 possible input values, and tall enough to show the complete output range.

Part 2: For each x-coordinate from 0 to 255:

We get the corresponding gamma ramp value and convert it from the SDL range (0-65535) to our visualization range (0-255)
We draw a white vertical line up to that height
The background is drawn in dark blue to make the curve stand out
A gray reference line is drawn to show what a gamma value of 1.0 would look like

Part 3: We write directly to the window's surface pixels for performance and to avoid dependencies on SDL's renderer.

Part 4: We keep the window open until the user closes it, so they can study the curve.

1#include <SDL.h>
2#include <iostream>
3
4int main(int argc, char* argv[]) {
5  SDL_Init(SDL_INIT_VIDEO);
6
7  SDL_Window* Window{
8    SDL_CreateWindow("Gamma Ramp Visualizer",
9                     SDL_WINDOWPOS_UNDEFINED,
10                     SDL_WINDOWPOS_UNDEFINED,
11                     256, 256,
12                     SDL_WINDOW_SHOWN)};
13
14  SDL_Surface* WindowSurface{
15    SDL_GetWindowSurface(Window)};
16
17  // Create our gamma ramp with gamma = 2.0
18  Uint16 Ramp[256];
19  SDL_CalculateGammaRamp(2, Ramp);
20
21  // Lock surface for pixel access
22  SDL_LockSurface(WindowSurface);
23
24  // Get pixel format information
25  const auto Format{WindowSurface->format};
26  Uint32* Pixels{
27    static_cast<Uint32*>(WindowSurface->
28      pixels)};
29
30  // Draw the gamma ramp visualization
31  for (int x{0}; x < 256; ++x) {
32    // Convert gamma ramp value (0-65535) to
33    // height (0-255)
34    int Height{
35      static_cast<int>((Ramp[x] * 255) /
36        65535)};
37
38    // Draw vertical line
39    for (int y{0}; y < 256; ++y) {
40      Uint32 Color;
41
42      if (255 - y <= Height) {
43        // Part of the curve - white pixel
44        Color = SDL_MapRGB(
45          Format, 255, 255, 255);
46      } else {
47        // Background - dark blue
48        Color = SDL_MapRGB(Format, 0, 0, 40);
49      }
50
51      // Draw pixel at (x,y)
52      Pixels[y * WindowSurface->w + x] = Color;
53    }
54
55    // Draw reference line in gray
56    if (255 - x >= 0) {
57      Pixels[(255 - x) * WindowSurface->w + x] =
58        SDL_MapRGB(Format, 128, 128, 128);
59    }
60  }
61
62  SDL_UnlockSurface(WindowSurface);
63  SDL_UpdateWindowSurface(Window);
64
65  // Wait for window close
66  SDL_Event Event;
67  bool Running{true};
68  while (Running) {
69    while (SDL_PollEvent(&Event)) {
70      if (Event.type == SDL_QUIT) {
71        Running = false;
72      }
73    }
74  }
75
76  SDL_DestroyWindow(Window);
77  SDL_Quit();
78  return 0;
79}

The resulting visualization shows how a gamma value of 2.0 affects brightness - the curve drops more steeply at first compared to the reference line, meaning darker input values become even darker in the output.

Try modifying the gamma value passed to SDL_CalculateGammaRamp() to see how different gamma values affect the curve:

Values less than 1.0 will curve above the reference line, brightening the image
Values greater than 1.0 will curve below the reference line, darkening the image
A value of exactly 1.0 will match the reference line perfectly

Brightness and Gamma

Creating a Gamma Curve Visualisation

Brightness and Gamma

Game Development with SDL2

Questions & Answers