# 1. Objective

• To introduce a ubiquitous image manipulation technique.

# 2. Motivation

• To apply the concepts of nested for loops and if statements to a basic image manipulation problem.
• To prepare for doing a computational simulation on a 2-D grid.

# 3. Pre-question

 Which looks better? Top: Antialias and Hinting Middle: Antialias only Bottom: No antialias and no hinting

# 4. Notes

## 4.1. Creating an image

• To draw a number or letter on a screen, create a matrix.
• Place 1s where you want white, 0s where you want black.
 A visual representation of the matrix using imagesc and colorbar. 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 

## 4.2. The problem

• The sharp edges make letters look "unpleasant" when zoomed out.

----- zoom out -----

From [1]

## 4.3. Eye trick

• Fill in places where black is near white with gray.
• Translated to a mathematical statment:
If a 0 is next to a 1, replace the 0 with a 0.5.

From [2].

## 4.4. Eye trick cont.

• Fill in places where black is near white with gray.
• The small antialiased letter is considered "more pleasant" by most readers.

---- zoom out -----

## 4.5. Question

This trick has been known for a long time. Why wasn't it used on old computers?

 A visual representation of the matrix using imagesc and colorbar. 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 

## 4.7. Part I

• An important part of computation is identifying the important part of the problem that you want to solve. The above examples are two-dimensional (each pixel has a horizontal and vertical position and is represented as a matrix).
• Before trying the two-dimensional problem, try a one-dimensional problem (apply the algorithm to an array instead of a matrix).
• Write a program that implements the algorithm:
If a 0 is next to a 1, replace the 0 with a 0.5.
• Write a program that implements the above algorithm on any array of 1s and 0s. To test your algorithm, use this array:
A = [0,1,0,0,1, 1,1,0,0,0];

• Instructions: Work on your own or with a partner on this problem. I will ask for students to suggest solutions in 5-10 minutes.

## 4.8. Part II

(Don't start doing this until I finish the explanations of the instructions.)

Create a script file named antialias.m and copy the following code into it. In the same file, below this code, write a program that antialiases the image that is created when your run the program.

% This program creates a circular shape.
clear;clf;
for i = [1:16]
for j = [1:16]
if ( (i - 8)^2 + (j - 8)^2 ) <= 17
M(i,j) = 0;
else
M(i,j) = 1;
end
end
end
imagesc(M);
M
axis square;grid on;
C = [0,0,0; 0.5,0.5,0.5; 1,1,1];
colormap(C);


## 4.9. Instructions Part II

• Discuss how you will approach this problem with a partner (you may work on your own).
• After 5 minutes, I will ask a few students to come to the board and explain the algorithm.

# 5. Questions

## 5.1. 1-D Antialias

In this problem you will write a program using the techniques covered in If_Statement and Antialias that antialiases a given array. Then, you will use a special function to create an array of randomly placed 1s and 0s. You will first test your algorithm on this given array:

A = [0,1,0,1,0,0,0,1,0,1,0]


Then you will test your algorithm on the 10-element array created using this command:

A = round(rand(1,10))


To see what the above command does, enter it on the command line twice in a row. Each time you should see an array with 10 elements that are either 0 or 1. The array (will almost always) be different each time you execute the command.

Instructions:

• Open a text file named hw8_1d.m. On the first line enter
A = [0,1,0,1,0,0,0,1,0,1,0]

• Below this, write a program (using for loops and if statements) that replaces any 0 that is next to a 1 with 0.5 in the array A.
• When you are able to get this result:
A = [0.5,1.0,0.5,1.0,0.5,0.0,0.5,1.0,0.5,1.0,0.5]

then your program correctly antialiases the given array A.
• In your text file, replace the line
A = [0,1,0,1,0,0,0,1,0,1,0]

with
A = round(rand(1,10))

and run your program several times. Your program is working if after each time you run it, any 0 that was next to a 1 was replaced with a 0.5.

(Extra credit: Write a program that repeats your program 1000 times. That is, write a program that would do the same thing as if you typed hw8_1d and the enter key 1000 times.)

## 5.2. 2-D Antialias

Copy the following program into a script file:

close all;
clear all;
n = 16;

for i = [1:n]
for j = [1:n]
if ( (i - n/2)^2 + (j - n/2)^2) <= (n/4)^2
M(i,j) = 0;
else
M(i,j) = 1;
end
end
end
C = [0,0,0;0.5,0.5,0.5;1,1,1];
figure(1);hold on;axis square;grid on;
imagesc(M);
colormap(C);
print -dpng circle_before.png


In the same file, copy the commands

i = 8;
for j = [1:n-1]
if (M(i,j) == 0)
if (M(i,j+1) == 1)
M(i,j) = 0.5;
end
end
end
figure(2);hold on;axis square;grid on;
imagesc(M);
colormap(C);
print -dpng circle_after.png


By building on the above set of commands (starting at i=8), write a program that converts the circle created in figure 1 to the circle shown in figure 2 below.

## 5.3. 2-D Antialias II

Copy the following program into a matlab:

close all;
clear all;
n=16
for i = [1:n]
for j = [1:n]
if ( (i - 8)^2 + (j - 8)^2 ) <= 17
M(i,j) = 1;
else
M(i,j) = 0;
end
if (j>7 && j<9)
M(i,j) =0;
end
end
end
imagesc(M);
M
axis square;grid on;
C = [0,0,0; 0.5,0.5,0.5; 1,1,1];
colormap(C);


In the same file, copy the commands

i = 8;
for j = [1:n-1]
if (M(i,j) == 0)
if (M(i,j+1) == 1)
M(i,j) = 0.5;
end
end
end
figure(2);hold on;axis square;grid on;
imagesc(M);
colormap(C);
print -dpng circle_after.png


By building on the above set of commands, write a program that converts the image in figure 1 to the image shown in figure 2 below.

## 5.4. Extra Credit

Right click on the following image: and save it to the directory that is shown when you type

pwd


on the Octave command line.

Open a file named hw8ec.m and enter

M = imread('a.png');


Below this command, write a program that

1. Plots the matrix as a black-and-white image, and
2. Antialiases the image.

# 6. References

• Interactive Applet demonstrating antialiasing [3]