# Image-1 Introduction to Digital Images

In this section we'll look at how digital images work. (Hat tip to Mark Guzdial and Barbara Ericson for promoting the media computation idea of using images, sounds etc. to introduce computing.)

## Digital Images

• Digital images are everywhere
• Look natural, smooth
• Behind the scenes: lots of little numbers
• Aside: more compelling internet use: text or images?

You see images on computers all the time. Here we will look behind the curtain, seeing how images are put together. What looks like a whole image to us, in the computer is a structure made of many little numbers.

Here is a digital image of some yellow flowers:

## Zoom In - Pixels

• Zoom in 10x on upper left flower
• The image is made of "pixels"
• Each pixel: small, square, one color
• Perceive the whole scene, not tiny pixels
• "megapixel" is 1 million pixels
• How many pixels in an image 800 pixel wide, 600 pixels high?
- just multiply
- 800 x 600 = 480,000 pixels = 0.48 megapixels
• Typical digital image = 5-20 megapixels

Zooming in on the upper left flower, we can see that it is actually made of many square "pixels", each showing one color.

## X/Y Grid of Pixels

We will not work with individual x/y coordinates too much. You just need to appreciate that there is this x/y coordinate system, so that every pixel in an image has some x/y coordinate that identifies its location within the image grid.

• Pixels are organized as a x/y grid
• x=0, y=0 "origin" upper left corner - aka (0, 0)
• X grows going to the right
• Y grows going down
• Just like typesetting a page of text
• x=0, y=0 "origin" at upper left - (0, 0)
• x=1, y=0 neighbor to the right of origin - (1, 0)
• x=0, y=1 neighbor below the origin - (0, 1)

## History Aside - Newton's Color Prism

• One of Newton's famous experiments
• White light - broken up into pure colors, continuous
• Red, orange, yellow, green, blue, indigo, violet (ROY G BIV)
• Mix select colors to make other colors
• Like running the experiment backwards to make white

Sir Isaac Newton did the famous prism experiment in 1665, showing that white light is made up of a spectrum pure colored light. Here is a picture of the experiment on my floor. White sunlight is coming in from the left into the glass triangular prism which splits up the light. Coming out of the prism we have a continuous range of pure colors, and a few are picked out by name: red, orange, yellow, green, blue, indigo, violet (ROY G BIV).

## RGB Color Scheme - Red Green Blue

• How to represent the color of a pixel?
• RGB - red/green/blue scheme
• Make any color by combining red/green/blue lights
• There are other schemes, but RGB is very common
• Note: mixing lights works differently from mixing paints
• Aside: technically color is a 3-dimensional space, not getting into details
- The Newton prism shows the "hue" dimension
- Other dimensions are brightness and saturation (pastel)

How to represent the color of a pixel? The red/green/blue (RGB) scheme is one popular way of representing a color in the computer. In RGB, every color is defined as a particular combination of pure red, green, and blue light.

## RGB Explorer

The best way to see how RGB works is to just play with. This RGB Explorer page which shows how any color can be made by combining red, green, and blue light. Each light is encoded as a number from 0 (off) to 255 (brightest).

## RGB - Three Numbers

• Make any color by combining red/green/blue light
• Each red/green/blue light is represented by a number 0.255
255 = maximum brightness
0 = turned off
• Therefore any color can represented by three numbers 0..255
• Not just 0 and 255, intermediate values 12, 238, 39
• e.g. r:250 g:10 b:240 - purple, or just say "250 10 240"
• e.g. r:100 g:100 b:0 - dark yellow, or just say "100 100 10"

So essentially, any color can be encoded as three numbers .. one each for red, green, and blue.

Color Red number Green number Blue number
red 255 0 0
purple 255 0 255
yellow 255 255 0
dark yellow 100 100 0
white 255 255 255
black 0 0 0

In RGB, a color is defined as a mixture of pure red, green, and blue lights of various strengths. Each of the red, green and blue light levels is encoded as a number in the range 0..255, with 0 meaning zero light and 255 meaning maximum light.

So for example (red=255, green=100, blue=0) is a color where red is maximum, green is medium, and blue is not present at all, resulting in a shade of orange. In this way, specifying the brightness 0..255 for the red, blue, and green color components of the pixel, any color can be formed.

Pigment Note -- you may have mixed color paints, such as adding red and green paint together. That sort of "pigment" color mixing works totally differently from the "light" mixing we have here. Light mixing is, I think, easier to follow, and in any case, is the most common way that computers store and manipulate images.

It's not required that you memorize, say, what blue=137 looks like. You just need to know the most common RGB patterns we use.

## You Try It Challenge

1. In the RGB Explorer, play with the sliders to make the light tan color of a cafe latte.

2. Figure out how to make orange

3. Figure out how to make brown. Brown is basically dark orange.

## In Class Demo - Super Bright LEDs

Demo! MaxM RGB Module

Incandescent lights can pass through a filter to give colored light. In contrast, LEDs intrinsically emit light of a specific color.

• Show pure red green blue - LED light
• Show 2-color combinations
• Show white

## Image Diagram with RGB

• Now have the complete diagram of an image
• Pixels in a grid, each identified by an x,y coordinate
• Each pixel has 3 numbers to define its color
• Written as "red:6 green:250 blue:7"
• Or just "6 250 7"