Skip to content

DCT Basis Explorer

Copy this iframe to your website:

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

Run MicroSim in Fullscreen

Description

This MicroSim shows the discrete cosine transform (DCT-II) with orthonormal scaling, the form used by JPEG. The View drop-down list switches between a 1-D view and a 2-D view.

1-D view. The top row shows the eight basis functions \(\phi_k[n] = c_k\cos\big(\pi k(2n+1)/16\big)\) for \(N = 8\). The Signal list picks an 8-sample signal \(x[n]\) (ramp, smooth bump, step edge, a pure basis function, one cosine period, alternating, or noise); drag any blue sample to make your own. The maroon bars are the coefficients \(X[k]\), and the K slider keeps the first \(K\) of them. The purple curve is the reconstruction \(x_K[n]\) and the red panel is the error \(e[n] = x[n] - x_K[n]\). The top read-out (and, on wide screens, the chart at the lower right) gives the fraction of the energy \(\sum x^2\) in the first \(K\) DCT coefficients and in the first \(K\) DFT coefficients, taken from low to high frequency (\(0, \pm1, \pm2, \pm3, 4\)). Click a basis function or a bar to highlight it; the gold dashed curve is its contribution \(X[k]\,\phi_k[n]\).

2-D view. The grid shows the 64 basis images \(\phi_u[m]\,\phi_v[n]\) of the 8×8 DCT. The Block list picks a synthetic 8×8 block. The Quantization step Q slider replaces each coefficient \(C\) by \(Q\cdot\mathrm{round}(C/Q)\), so every coefficient with \(|C| < Q/2\) becomes 0 (its basis image fades). The sim shows the reconstructed block, the pixel error and the PSNR.

\[X[k] = c_k \sum_{n=0}^{N-1} x[n]\cos\!\left[\frac{\pi k(2n+1)}{2N}\right], \qquad c_0 = \sqrt{1/N},\; c_k = \sqrt{2/N}\]
\[C = D\,X\,D^{T}, \qquad \mathrm{PSNR} = 10\log_{10}\frac{255^2}{\mathrm{MSE}}\]

Here \(D\) is the 8×8 DCT matrix with rows \(\phi_k\), and \(X\) is the block minus 128 (JPEG's level shift). Because the basis is orthonormal, \(\sum_k X[k]^2 = \sum_n x[n]^2\) (Parseval). The error energy therefore equals the energy of the dropped coefficients.

This MicroSim is used in Chapter 8: Advanced Transforms.

Lesson Plan

Learning Objectives

After using this MicroSim, students will be able to:

  1. Describe the N = 8 DCT-II basis functions and relate the index \(k\) to the number of half-cycles of the cosine across the block
  2. Calculate the fraction of the energy held by the first \(K\) DCT coefficients and use Parseval's relation to predict the energy of the reconstruction error
  3. Compare the energy compaction of the DCT and the DFT for the same signal, and explain the difference with the mirror (even) extension versus the periodic extension
  4. Apply uniform quantization with step \(Q\) to the 2-D DCT of an 8×8 block and relate the number of nonzero coefficients to the PSNR
  5. Explain why JPEG transforms 8×8 blocks with the DCT before quantizing them

Target Audience

Undergraduate students in a digital signal processing or multimedia course (typically junior or senior year). Plan 30 minutes for the activities below.

Prerequisites

  • The definition of the DFT and Parseval's theorem
  • Inner products and orthogonal bases
  • Signal energy \(\sum x[n]^2\) and uniform quantization (Chapter 5)

Activities

Activity 1: Read the basis (6 min). Look at the top row. \(\phi_0[n] = 1/\sqrt{8} \approx 0.354\) for every \(n\), and \(\phi_k\) is a cosine with \(k\) half-cycles across the block: \(\phi_1\) falls once from 0.49 to −0.49. Choose pure basis k = 3. The bar chart shows a single bar, \(X[3] = 6.00\), and every other coefficient is 0.00. Move K: the DCT energy read-out is 0.00% for \(K \le 3\) and jumps to 100.00% at \(K = 4\). The basis functions are orthogonal, so this signal has no component along any other \(\phi_k\). The DFT of the same signal is spread out: its first 4 bins hold 53.55% and its first 7 hold 95.48%.

Activity 2: Energy compaction of a ramp (8 min). Choose ramp (\(x[n] = n - 3.5\)) with \(K = 3\). Only the odd coefficients are nonzero: \(X[1] = -6.44\), \(X[3] = -0.67\), \(X[5] = -0.20\), \(X[7] = -0.05\). The ramp is antisymmetric about its centre and the even \(\phi_k\) are symmetric. The read-out shows DCT 98.82% against DFT 65.03%. The error panel reports \(\sum e^2 = 0.50\), which is 1.18% of \(\sum x^2 = 42.00\): exactly the energy of the dropped \(X[3]\), \(X[5]\) and \(X[7]\). At \(K = 4\) the DCT holds 99.90% and the DFT 74.56%. The DFT magnitudes decay slowly (3.70, 3.70, 2.00, 2.00, 1.53, 1.53, 1.41). The DFT treats the block as periodic, so the ramp jumps from 3.5 back to −3.5. The DCT-II implies a mirror extension with no jump.

Activity 3: When the DFT wins (6 min). Choose cosine, one period (\(3\cos(2\pi n/8)\)) with \(K = 3\): the DFT holds 100.00%, all of it in bins ±1, while the DCT holds 96.33%. Its coefficients are \(X[1] = 1.99\), \(X[2] = 5.54\), \(X[3] = -1.13\), and so on. Now choose step edge. At \(K = 2\) the DCT leads (82.11% vs 42.68%), at \(K = 3\) the DFT is ahead (85.36% vs 82.11%, because \(X[2] = 0\)), and at \(K = 4\) the DCT leads again (92.23% vs 85.36%).

Activity 4: Quantizing an 8×8 block (10 min). Switch the view to 2-D 8×8 block. With the smooth blob and \(Q = 20\), only 4 of 64 coefficients survive: \(C[0,0] = -240\), \(C[0,2] = C[2,0] = -220\) and \(C[2,2] = 140\). The PSNR is 40.3 dB with a maximum pixel error of 6. The gold-framed basis image (0, 2) is highlighted by default: its coefficient \(C = -228.46\) is quantized to \(20\cdot\mathrm{round}(-11.42) = -220\). At \(Q = 1\) there are 13 nonzero coefficients and the reconstruction is exact (PSNR ∞). At \(Q = 50\) the same 4 coefficients survive but the PSNR falls to 34.5 dB, and at \(Q = 100\) it is 29.5 dB with a maximum error of 16. Then compare the blocks at \(Q = 20\):

  • horizontal gradient: 3 nonzero, all in row \(u = 0\), PSNR 44.2 dB
  • vertical edge: 5 nonzero, all in row \(u = 0\), PSNR 42.1 dB
  • diagonal edge: 32 nonzero, PSNR 35.2 dB
  • random noise: 56 nonzero, PSNR 34.0 dB

Assessment

  1. For \(N = 8\), what is \(\phi_0[n]\), and what does \(X[0]\) measure? Answer: \(\phi_0[n] = 1/\sqrt{8} \approx 0.354\) for every \(n\), so \(X[0] = \sum x[n]/\sqrt{8} = \sqrt{8}\times\) (mean of \(x\)). For the smooth bump, \(X[0] = 5.44\) and the mean is 1.92.
  2. A signal has \(\sum x^2 = 42\) and its first three DCT coefficients are 0, −6.44 and 0. What fraction of the energy do they hold, and what is the error energy if only they are kept? Answer: \(6.44^2/42 \approx 41.50/42 = 98.8\%\); the error energy is about \(42 - 41.50 = 0.50\), the energy of the dropped coefficients (the sim shows 98.82% and \(\sum e^2 = 0.50\)).
  3. Why does the DCT compact the energy of a ramp better than the DFT? Answer: the DFT implicitly repeats the block periodically, so the end of the ramp jumps back to its start, and that discontinuity needs many high-frequency bins. The DCT-II corresponds to a mirror (even) extension with no jump, so its coefficients fall off quickly (−6.44, −0.67, −0.20, −0.05).
  4. With quantization step \(Q = 20\), which coefficients become 0? What happens to \(C = -228.46\)? Answer: every coefficient with \(|C| < Q/2 = 10\) becomes 0. \(C = -228.46\) becomes \(20\cdot\mathrm{round}(-11.42) = -220\).
  5. Why does JPEG apply the DCT to 8×8 blocks before quantizing? Answer: in smooth image regions most of the energy falls in a few low-frequency coefficients (the blob keeps 4 of 64 at \(Q = 20\) with a PSNR of 40.3 dB). After quantization most coefficients are 0, and long runs of zeros compress very well with run-length and entropy coding.

Common Misconceptions

"The DCT always compacts energy better than the DFT." Choose cosine, one period with \(K = 3\): the DFT holds 100.00% and the DCT 96.33%. With the step edge at \(K = 3\) the DFT is also ahead (85.36% vs 82.11%). The DCT's advantage is for smooth, correlated signals such as image rows, not for every signal.

"The highest-frequency DCT basis function is the alternating sequence \((-1)^n\)." Choose alternating ±2: \(X[7] = 5.13\) holds only 82.11% of the energy, and \(X[5] = 1.80\), \(X[3] = 1.20\) and \(X[1] = 1.02\) hold the rest. The DFT puts all of it in bin 4. Compare the \(k = 7\) panel with the blue samples: \(\phi_7\) alternates in sign, but its amplitude follows a slow cosine envelope.

References

  1. Discrete cosine transform - Wikipedia - definitions of the DCT-II, orthonormal scaling, the 2-D separable DCT and the basis images
  2. JPEG - Wikipedia - how JPEG level-shifts, transforms and quantizes 8×8 blocks with the DCT
  3. Transform coding - Wikipedia - why compacting energy into a few coefficients makes lossy compression efficient
  4. Peak signal-to-noise ratio - Wikipedia - the PSNR formula used to score the reconstructed block
  5. Parseval's theorem - Wikipedia - why the error energy equals the energy of the dropped coefficients
  6. Chapter 27: Data Compression - Steven W. Smith, The Scientist and Engineer's Guide to Digital Signal Processing - free chapter section on JPEG transform compression with 8×8 DCT blocks