A Spreadsheet-based Manipulative Support for Teaching Convolution STEM Teaching and Learning Conference March 7, 2014 Georgia Gwinnett College School of Science and Technology Dr. Jim Rowan

Sections of today’s talk -A moment about GGC and Digital Media -About blurring images before digital images Camera Artistically -About blurring digital images -The powerpoint manipulative

GGC and Digital Media GGC has been built from the ground up since it’s founding in 2005 I arrived in 2007 before any classes were being offered to Freshmen or Sophomores This was an extraordinary opportunity Digital Media, a sophomore level class, was my choice

GGC and Digital Media Two parts: Projects and Theory Projects: Using Open Source software… Audacity for audio Inkscape for 2D vector graphics GIMP for bitmapped graphics Blender for 3D animation Theory look under the covers know a little about what is going on strip away the “magic” banish the wizards empowering students

GGC and Digital Media In this class we deal with bitmapped images how they are stored on a computer how to manipulate them how to do editing Part of the editing involves the use of filters One of the filters we use on a project is blur So… The question is How does a digital image get blurred?

Image Blur… How does this happen? Before the advent of digital cameras there were a variety of ways to blur an image Using a film camera an image could become blurred if the lens wasn’t focused on the subject of interest You could intentionally blur background while keeping the subject in focus using the F stop to affect the depth of field Aging actresses might insist the “soft” focus caused by applying vaseline to the lens

Pre-Digital Image Blur: The entire image Photographically you can de-focus the lens If you are an aging diva you can insist that vaseline be applied to the lens to get this “soft” focus

Pre-Digital Image Blur: Just the background Photographically you can adjust the F stop imageSource

Pre-Digital Image Blur: Artistically You can use your fingers to smooth and spread out the charcoal imageSource

Image Blur: Digital? You can’t reach into the computer to smear the charcoal… What do you do? The simple answer is use some image software… But how does that work? Before the advent of digital cameras there were a variety of ways to blur an image Using a film camera an image could become blurred if the lens wasn’t focused on the subject of interest You could intentionally blur background while keeping the subject in focus using the F stop to affect the depth of field Aging actresses might insist the “soft” focus caused by applying vaseline to the lens

Digital Blur Blur (as well as many other digital image filters) use a process known as convolution Convolution is simple… it’s just multiplication and addition Convolution is hard… there’s a lot to keep up with

Underlying any digital image… Is a huge collection of numbers In the case of 24 bit color depth there are 3 bytes -one for red -one for green -one for blue for each pixel! This image measures 1983 X 2252 pixels Doing the math you get 4,465,716 pixels and a file size of 4,465,716 X 3 or 13,397,148 bytes

Homing in on the car’s front grill If you drill down you can finally see the pixels and the numbers that define the colors

Digital Blur Blur is accomplished by applying a “convolution matrix” to every pixel of the image to create a new blurred image This convolution matrix is a square matrix that contains numbers that frequently add up to 1 can be negative can be as small as 3 X 3 can be much larger The choice of convolution matrix determines the affect that it has on the image

GIMP Convolution Matrix GIMP allows up to a 5 X 5 convolution matrix as well as showing a preview. Design and test your own. BUT how does it work?

Showing how it works To show the underlying workings of convolution simplifications must be made -Use a 3 X 3 convolution matrix -Operate on black/white/grey scale images -each pixel then has only one number associated with it -Select a very small but representative sample of the original image -Calculate only a few but representative pixels in the new blurred image -Extrapolate the result to the rest of the image

A simple example: A two pixel wide horizontal line The image 255 The image The underlying numbers

The convolution matrix 1/3 To calculate a single pixel (X) in the new blurred image you need center the matrix over the pixel of interest and then multiply each cell of the matrix by the associated color value of it’s underlying pixel and then add all 9 of these up 255 X

The calculations are blinding! 1/3 255 X

That’s a lot of work to make my point That’s a lot of work to make my point! Students get lost in the trees and miss the forest!

Instead use a powerpoint slide to do the calculation 1/3 Instead use a powerpoint slide to do the calculation It is much easier to keep track of where you are… short enough to make the point 255 X

Made easier with powerpoint! 1/3 Select the convolution matrix 255 X

Made easier with powerpoint! Drag and center the matrix over the pixel of interest in the original image… You can “see” the multiplications and the additions 255 X 1/3

Made easier with powerpoint! You can “see” the multiplications! 0X255 + 1/3X255 + 0X255 + 0X0 + 1/3X0 + 0X0 = 85 + 85 = 170 255 170 1/3

This method made a HUGE difference in student success

One Complete Example!

255` 255 0/9 3/9 X

255` 255 0/9 3/9 X

255 0/9 3/9 255 0/9 x 255 + 3/9 x 255 + 0/9 x 255 + 0/9 x 255 + 3/9 x 255 + 0/9 x 255 = 0 + 85 + 0 + 0 + 85 + 0 = 255

255 0/9 3/9 255 X

255 0/9 3/9 255 170 0/9 x 255 + 3/9 x 255 + 0/9 x 255 + 0/9 x 0+ 3/9 x 0 + 0/9 x 0= 0 + 85 + 0 + 0 + 0 + 0 = 170

255 0/9 3/9 255 170 X

255 0/9 3/9 255 170 0/9 x 255 + 3/9 x 255 + 0/9 x 255 + 0/9 x 0 + 3/9 x 0+ 0/9 x 0+ 0/9 x 255 + 3/9 x 255 + 0/9 x 255 = 0 + 85 + 0 + 0 + 0 + 0 + 0 + 85+ 0 = 170

255 0/9 3/9 255 170 X

255 0/9 3/9 255 170 0/9 x 0 + 3/9 x 0 + 0/9 x 0 + 0/9 x 255 + 3/9 x 255 + 0/9 x 255 + 0/9 x 255 + 3/9 x 255 + 0/9 x 255 = 0 + 0 + 0 + 0 + 85+ 0 + 0 + 85+ 0 = 170

255 0/9 3/9 255 170 X

255 0/9 3/9 255 170 0/9 x 255 + 3/9 x 255+ 0/9 x 255 + 0/9 x 255 + 3/9 x 255 + 0/9 x 255 + 0/9 x 255 + 3/9 x 255 + 0/9 x 255 = 0 + 85 + 0 + 0 + 85+ 0 = 255

This matrix blurs horizontal lines (but not vertical ones!) 255 0/9 3/9 255 170 This matrix blurs horizontal lines (but not vertical ones!)

Another complete example… Sometimes a mask has no effect

255 0/9 3/9

255 0/9 3/9 255 0/9 x 255 + 0/9 x 255 + 0/9 x 255 + 3/9 x 255 + 3/9 x 255 + 3/9 x 255 + 0/9 x 255 + 0/9 x 255 + 0/9 x 255 = 0 + 0 + 0 + 85 + 85 + 85 + 0 + 0 + 0 = 255

255 0/9 3/9 255 0/9 x 255 + 0/9 x 255 + 0/9 x 255 + 3/9 x 255 + 3/9 x 255 + 3/9 x 255 + 0/9 x 255 + 0/9 x 255 + 0/9 x 255 = 0 + 0 + 0 + 85 + 85 + 85 + 0 + 0 + 0 = 255

255 0/9 3/9 255 0/9 x 255 + 0/9 x 255 + 0/9 x 255 + 3/9 x 0+ 3/9 x 0+ 3/9 x 0+ 0/9 x 255 + 0/9 x 255 + 0/9 x 255 = 0 + 0 + 0 + 0 + 0 + 0 = 0

255 0/9 3/9 255 0/9 x 255 + 0/9 x 255 + 0/9 x 255 + 3/9 x 255 + 3/9 x 255 + 3/9 x 255 + 0/9 x 255 + 0/9 x 255 + 0/9 x 255 = 0 + 0 + 0 + 85 + 85 + 85 + 0 + 0 + 0 = 255

255 0/9 3/9 255 0/9 x 255 + 0/9 x 255 + 0/9 x 255 + 3/9 x 255 + 3/9 x 255 + 3/9 x 255 + 0/9 x 255 + 0/9 x 255 + 0/9 x 255 = 0 + 0 + 0 + 85 + 85 + 85 + 0 + 0 + 0 = 255

This matrix does nothing to a horizontal line… 255 0/9 3/9 255 This matrix does nothing to a horizontal line… What about a vertical one?

Other example setups Try your hand at it!

What values would be in the turquoise cells? 255 1/3 Diagonal Image, Diagonal Mask: What values would be in the turquoise cells?

A different diagonal Mask: What values would be in the 255 1/3 Diagonal Image, A different diagonal Mask: What values would be in the turquoise cells?

A wider horizontal line, The mask can be signed numbers: 255 -1 9 A wider horizontal line, The mask can be signed numbers: What values would be in the turquoise cells?

Further information A collection of related images and convolution matrices

Further information My GGC wiki site

Further information My eBook text used to support the Digital Media course

Contact jrowan@ggc.edu