Skip to content

Convolution

Copy this iframe to your website:

1
<iframe src="https://dmccreary.github.io/signal-processing/sims/convolution/main.html" width="100%" height="267px" scrolling="no"></iframe>

Run MicroSim in Fullscreen

Edit in the p5.js Editor

Description

Convolution measures how much two functions overlap as one slides across the other. This MicroSim uses the simplest pair that shows the idea: a blue square \(f(x)\) that is 1 unit wide and 1 unit tall, and a red triangle \(g(x)\) with a base of 1 unit and a peak of 1 unit.

Drag the slider to move the square from left to right through the triangle. The purple triangle on the right is a gauge, not the final curve: its height is the area where the square and the triangle overlap, which is the value of \((f * g)(x)\) at the current position. The dashed outline marks the largest it can be, an area of 0.50 (the whole triangle, \(\tfrac{1}{2} \cdot 1 \cdot 1\)), and the read-out under it shows the current area.

The slider runs from 0 to 270 in units chosen so that 60 units move the square by exactly its own width. The label under the slider also gives \(x\), the offset of the square's center from the triangle's center, in square widths. Overlap begins at slider 140 (\(x = -1\)), peaks at 200 (\(x = 0\)) and ends at 260 (\(x = 1\)).

This is the introductory picture. The Convolution Visualizer adds the flip step, more signal pairs and the full output curve. The idea is developed in Chapter 4: Convolution and Correlation.

The three panels

  • Left, blue: the square \(f(x)\), which the slider moves
  • Middle, red: the triangle \(g(x)\), which stays where it is
  • Right, purple: the gauge whose height is the overlap area, \((f * g)(x)\) at the current \(x\)

Mathematical Connection

The convolution integral is

\[(f * g)(x) = \int_{-\infty}^{\infty} f(\tau)\,g(x-\tau)\,d\tau\]

Convolution is commutative, \(f * g = g * f\), so the integral can be read with the roles swapped, \(\int g(\tau)\,f(x-\tau)\,d\tau\). That is the picture in the MicroSim:

  1. \(g(\tau)\) is the stationary triangle.
  2. \(f(x-\tau)\) is the square, flipped and shifted by \(x\). Flipping a symmetric square changes nothing, so only the shift is visible.
  3. The product \(g(\tau)\,f(x-\tau)\) equals \(g(\tau)\) where the square covers the triangle and \(0\) elsewhere, because \(f\) is 1 inside the square.
  4. The integral is the area under that product, which is the area of overlap.
  5. The slider sets \(x\), and the purple height at that position is \((f * g)(x)\).

The area is found by adding up 200 thin slices of the square. It agrees with the exact value to within 0.0001.

Where Convolution Appears

  • Image blurring in photo editing
  • Audio echo and reverberation effects
  • Signal filtering in communications
  • Data smoothing in statistics

Lesson Plan

Learning Objectives

After using this MicroSim, students will be able to:

  1. Explain convolution as a measure of how much a sliding function overlaps a stationary one
  2. Predict the slider positions at which the overlap begins, reaches its maximum and ends
  3. Interpret the height of the purple gauge as the area of overlap, not the height of overlap
  4. Calculate the overlap area at a given position from the geometry of the square and the triangle
  5. Connect the sliding-and-overlapping picture to the convolution integral

Target Audience

Undergraduate students meeting convolution for the first time, in a signals and systems, signal processing or applied mathematics course. Allow 10 to 15 minutes.

Prerequisites

  • Functions and their graphs
  • Area under a curve as an integral
  • Shifting a function, replacing \(x\) by \(x - x_0\)

Activities

Activity 1: Find the three landmarks (3 min). Drag the slider from 0 to 270 and watch the gauge. It stays at 0 until the right edge of the square meets the left corner of the triangle at slider 140 (\(x = -1.00\)). It reaches its full height at 200 (\(x = 0.00\)) and is back to 0 at 260 (\(x = 1.00\)). The output is non-zero over 120 slider units, which is 2 square widths: the width of the square plus the width of the triangle.

Activity 2: Read the values (5 min). Set the slider to 160, 180, 200, 220 and 240 and write down the area each time. The read-outs are 0.11, 0.39, 0.50, 0.39 and 0.11. Explain why the values on the two sides of 200 mirror each other.

Activity 3: Height versus area (3 min). Set the slider to 170. The right edge of the square sits exactly under the apex of the triangle, so the overlap already reaches the triangle's full height, yet the read-out is 0.25, half the maximum. Compare with slider 200, where the square covers the whole triangle and the area is 0.50. Say which quantity the gauge measures.

Activity 4: Predict, then plot (5 min). Before touching the slider, sketch \((f * g)(x)\) for \(x\) from \(-2\) to \(2\). Then set the slider to 140, 150, 160, ... 260 and plot the read-outs against \(x = (\text{slider} - 200)/60\). The points form a smooth bump, 2 widths wide, with a maximum of 0.50. It is not a triangle: near the start the area grows as the square of the overlap width (0.03, 0.11 and 0.25 at slider 150, 160 and 170).

Extension (homework).

  • Sketch the result for two squares, and for two triangles. Which is smoother?
  • Find a real-world example of convolution and say what slides over what.
  • Explain why the result is smooth even though the square has sharp edges.

Assessment

  1. What is the overlap area at slider 200, and why can no other position give more? The area is 0.50, the full area of the triangle, \(\tfrac{1}{2} \cdot 1 \cdot 1\). The square covers the whole triangle there, so nothing more can overlap.
  2. For which slider values is the output non-zero? From 140 to 260, a span of 120 units. This is \(x\) from \(-1\) to \(+1\) widths, so the output is as wide as the square plus the triangle.
  3. At slider 170 the square already touches the apex, but the gauge is only half its maximum height. Why? The square covers only the left half of the triangle's base. By symmetry that half has half the area, 0.25.
  4. The square is made twice as wide and still 1 tall. How do the maximum and the width of the output change? The maximum stays 0.50, because the triangle is already completely covered. The output is non-zero over 3 of the original widths (2 + 1) and has a flat top 1 width long while the triangle lies entirely inside the square.
  5. The convolution integral contains a flip, \(g(x-\tau)\). Why do you not see it in this MicroSim? Both shapes are symmetric about their centers, so the reversed shape looks the same. With an asymmetric function the flip matters, as the Convolution Visualizer shows.

Common Misconceptions

  • "The gauge shows how high the shapes overlap." The gauge shows area. Compare slider 170, where the overlap already reaches the triangle's full height but the gauge is at half height, with slider 200.
  • "The purple triangle is the output signal." It is a gauge whose height is one value of the output at the current \(x\). The output itself is the smooth bump you get by plotting the gauge height against \(x\).
  • "Convolution multiplies the two functions at a point." At each \(x\) the product is a whole function of \(\tau\), and the output value is the integral of that product over all the overlapping points.

References

  1. Convolution - Wikipedia - definition of the convolution integral, its properties and its graphical interpretation
  2. Chapter 6: Convolution - Steven W. Smith, The Scientist and Engineer's Guide to Digital Signal Processing - free online chapter that builds convolution from the impulse response
  3. Impulse response - Wikipedia - why convolution with \(h(t)\) describes what a linear system does to a signal
  4. Linear time-invariant system - Wikipedia - why the output of an LTI system is the convolution of the input with its impulse response
  5. But what is a convolution? - 3Blue1Brown - a visual explanation of the sliding-and-multiplying picture