Image Gradient

Image gradient is a fundamental part of many algorithms for digital image processing and graphics applications. We often use gradients as a cool photo effect, but more importantly, they provide fundamental information in image analysis and computer vision.

Interactive Preview: Image Edge Detection

See Edges: Use The Tool Now ❯

This article will discuss what a gradient is, how to draw gradient images, and furthermore how to extract them for image analysis.

What is image gradient?

Image gradients are parts of the picture where there is a directional change in color or intensity values. They are a key part of many computer graphics and image analysis algorithms.

An image gradient consists of two components: magnitude and orientation. Therefore, we can represent them as a 2D vector.

Relationship between gradients and edges

Edges describe objects boundaries therefore they are an important part of many shape detection algorithms. The parts of the image where there are rapid changes in brightness are usually grouped into curved segments of lines called edges.

One of the most popular ways to find edges in images is to use gradient detectors. Some commonly used contour detection algorithms are:

• Prewitt operator
• Sobel-Feldman operator
• Scharr operator

Once we have a localization of the image gradients, we can use their magnitude and orientation to find the more precise edge positions using the popular non-maximal suppression algorithm.

How to make a gradient image?

In this section, we will discuss how to draw a gradient image using different coding techniques.

First, let’s look at some simple and popular ways to create a gradient background that web developers use.

Use CSS

In this section, we’ll mention a few CSS-based examples without going into too much detail.

Linear gradient from Red to Blue:

.sample-linear{
  background: linear-gradient(to right, red, blue);
}

A simple radial gradient with two colors – Read and Green:

.sample-radial {
  background: radial-gradient(red, green);
}

You can take a look at the MDN docs for more examples and information about CSS gradients.

Use JavaScript

In some cases, we may want to apply a gradient background to a canvas plane. For this purpose, we can use the Canvas 2D API, as in the JavaScript example below:

function drawLinearGradient(){
  const canvas = document.querySelector("canvas");
  const ctx = canvas.getContext("2d");
  const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
  // Add three color stops
  gradient.addColorStop(0, "red");
  gradient.addColorStop(0.5, "green");
  gradient.addColorStop(1, "blue");
  
  // Draw on the canvas
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

In similar way we can draw a conic gradient or radial gradient.

Use WebGL

We can take advantage of WebGL/OpenGL to make gradient images. This allows us to use the power of the GPU to generate images with iridescent colors. The following sample GLSL code shows how to draw a linear gradient with WebGL.

precision mediump float;
uniform vec2 u_textureSize;
uniform vec3 u_start;
uniform vec3 u_stop;
void main()
{
  float d = gl_FragCoord.x/u_textureSize.x;
  gl_FragColor = vec4(mix(u_start, u_stop, d), 1.);
}

The WebGL algorithm generates an image by mixing the u_start and u_stop RGB colors.

Examples

The following image shows examples of different types of gradients:

Shape Detection

As already mentioned, the main purpose of image gradients is for image shape detection and analysis. One of the most popular algorithms for such a task is the Canny edge detector. It is able to extract stable image contours that we can use for further image analysis.

Using the Canny algorithm, we can extract the contours of the image and export them as SVG.

Useful Resources

I believe you may find the following articles about edge detection useful.

• Image edge detection with simple JavaScript
• Fast edge detection with OpenGL/WebGL

Conclusion

This article gives a brief introduction to what an image gradient is. In this post, we discuss how to draw different types of gradient paintings such as linear, radial and conical. The main takeaway is that, in addition to being a visual effect, gradients are an important image feature that is an essential part of many computer vision algorithms.