Digital Doctor: Image Restoration Lab – Interface Theory

Objective:

This interactive lab allows users to simulate real-world image degradation and restoration using
various filters and operations. It helps learners visualize the effects of noise and the corrective power of
restoration algorithms.

Interface Components Explained:

1. Image Upload

 Function: Users can upload any .jpg or .png file for testing.
 Use Case: Offers flexibility to test restoration techniques on diverse images.

Add Noise

 Add Gaussian Noise: Introduces smooth, bell-curve-shaped noise, mimicking sensor or

environmental interference.
 Add Salt & Pepper Noise: Adds black-and-white pixels randomly, simulating data dropouts or
transmission errors.

Apply Filters

 Apply Mean Filter: Smooths the image using a basic averaging technique. Effective for low-
intensity noise but can blur details.
 Apply Adaptive Filter (Wiener-like): Reduces noise while preserving edges, adapting to local
variance.
 Gaussian Blur: Applies a weighted average that favors nearby pixels. Used to smooth images
before processing.
 Sharpen: Enhances edges and details by amplifying high-frequency components.

Parameter Controls

 Mean Filter Kernel Size: Controls the size of the neighborhood used for averaging. Larger
kernels smooth more but risk over-blurring.
 Adaptive Filter Noise Variance: Adjusts filter sensitivity to noise. Lower values preserve
details better.
 Gaussian Blur Radius: Determines the intensity of the blur—larger radius means stronger
smoothing.

Color Operations

 Grayscale: Converts the image to black and white by removing color information.
 Sepia: Applies a warm brown tone, useful for visualizing image tone transformations.
 Invert Colors: Reverses brightness values, making dark areas light and vice versa.

Morphological Operations (on Grayscale)

 Erosion: Shrinks white regions, helpful in removing small white noise specks.
 Dilation: Expands white regions, useful for filling gaps and restoring structure.
 Morphological Kernel Size: Controls how much area each operation affects (3x3, 5x5, etc.).
 EXCEL ENGINEERING COLLEGE
(Autonomous)
Approved by AICTE, New Delhi & Affiliated to Anna University, Chennai
Accredited by NBA (AERO, CSE, ECE, MECH), NAAC with “A+” and recognized by UGC (2f &12B)
KOMARAPALAYAM - 637303
Department of Electronics and Communication Engineering
Beyond Lectures-Transforming Learning through Gamification

20EC702-Digital Image Processing

Game Idea: Pixel Puzzle - The Digital Perception Challenge

Concept: "Pixel Puzzle" is an educational puzzle game designed to teach students fundamental concepts
in digital image processing, focusing on pixel relationships, color models (RGB to HSI), and image
quantization. Players will engage with interactive tools to solve challenges, deepening their
understanding of how digital images are constructed and perceived.

1. Pixel Pattern Match: The Neighborhood Watch

 Concept: This task focuses on understanding pixel relationships within an image, particularly
how a pixel's value is influenced by its neighbors. This is foundational to concepts like filters,
edges, and texture.
 Gameplay:

Puzzle: The game displays a small grid (e.g., 3x3 or 5x5) representing a section of an
image. One central pixel is highlighted or missing.
 Task: Players must analyze the given pixel grid and drag-and-drop the correct "pattern
card" that describes the relationship leading to the central pixel's value, or predict the
central pixel's value based on a given relationship.

Content Explained:

 Neighborhoods: Introduces 4-connectivity (vertical/horizontal neighbors) and 8-

connectivity (all surrounding neighbors).
 Convolution/Filtering Basics: Implicitly teaches how a central pixel's value can
be derived from its neighbors, a precursor to understanding convolution kernels
for blurring, sharpening, or edge detection.
 Pixel Values: Reinforces that pixels are numerical data points.
 Example Scenario:
o Grid: 100 110 100
120 ??? 130
110 100 110

o Cards: "Average of 4-neighbors," "Median of 8-neighbors," "Vertical Edge."

o Solution (if '???' is 115): "Average of 4-neighbors" ( (110+120+130+100)/4 = 115 )

2. Color Converter: RGB to HSI Alchemy

 Concept: This task deepens understanding of color models, specifically the transformation
between RGB (Red, Green, Blue), which is hardware-oriented, and HSI (Hue, Saturation,
Intensity/Luminance), which is more aligned with human perception.
 Gameplay:

Puzzle: The game presents a color swatch with a specific RGB value (e.g., R:255, G:0,
B:0 - pure red).

Tools:

 RGB Sliders: Three sliders (0-255) for Red, Green, Blue.

 HSI Sliders: Three sliders for Hue (0-360 degrees), Saturation (0-100%),
Intensity (0-100%).
 Conversion Button: A button that, when clicked, performs the conversion from
the set RGB to HSI, or vice-versa.
 Matching Target: A target HSI color swatch or numerical values.

Task:

 Forward Conversion: Given an RGB color, players must adjust the HSI sliders
to predict the corresponding HSI values and match the target.
 Reverse Conversion: Given an HSI color, players adjust RGB sliders to create
the corresponding RGB color.
 "Hue Hunt": Given an image, players identify regions based on specific hue
ranges.

Content Explained:

 RGB Model: How colors are mixed additively from primary light sources.
  HSI Model: The perceptual components of color:
 Hue: The pure color (e.g., red, green, blue, yellow).
 Saturation: The purity or vividness of the color (how much white is
mixed in).
 Intensity/Luminance: The brightness of the color.
 Practical Applications: Why HSI is useful for image analysis (e.g., separating
color information from brightness, which is useful for lighting invariant object
recognition).
 Example Scenario:
o Given: RGB (255, 128, 0) - Orange
o Task: Set the HSI sliders to the correct values.
o Solution: Hue ~30 degrees, Saturation ~100%, Intensity ~75%.