CS 101

Images

Plan for Today

We'll learn how computers store images and how to write code to manipulate images.

Digital Cameras

figure
Source: https://upload.wikimedia.org/wikipedia/commons/6/66/Delta-Doped_Charged_Coupled_Devices_%28CCD%29_for_Ultra-Violet_and_Visible_Detection.jpg
  • Lens focuses light
  • Charged Coupled Device (CCD) records light (grid of cells)
    • Counts the number of electrons per cell
  • Some commonality with film cameras: aperture (opening size) and shutter speed
  • Camera in Slow Motion

Pixels

figure
  • Pixel: one "cell" of an image
  • Each pixel is one color
    • Corresponds to one cell in CCD
  • Pixels are stored in a grid:

Displaying Color

  • Every color can be made from red, green, and blue
  • Each pixel is stored in four bytes
    • Red
    • Green
    • Blue
    • Transparency (won't discuss as much)
  • How do you make the following colors?
    • Yellow
    • Orange
    • Lime-Green
    • Gray
    • Your favorite color

Screen resolution

  • Resolution measures how fine the image can be
  • Pixels are measured in "dots-per-inch" (dpi)
    • 100 dpi is generally good
    • iPhone's retina display is 300 dpi
    • Virtual Reality requires 500+ dpi (closer to your face)
  • dpi = (number of pixels) / (number of square inches)
  • 4K monitors have around 4000 pixels (horizontally)
  • Full HD: 1920x1080 pixels
  • Note: Aspect ratio is the number of pixels horizontally divided by the number of pixels vertically

Liquid-Crystal Display (LCD)

figure
figure
Source: https://techterms.com/definition/lcd
  • White backlight
  • Liquid Crystal "turns" the light, turning the pixel on or off (acting as a shutter)
  • Red, green, and blue subfilters over parts of the pixel
  • Temporary image persistence

Organic Light-Emitting Diode (OLED)

figure
Source: https://commons.wikimedia.org/wiki/File:Nexus_one_screen_microscope.jpg
  • Red, green, and blue LEDs combine to form a pixel.
    • Extra green because human eyes are more perceptive to green
  • Color is formed by rapidly turning the LEDs on and off
    • Higher percentage of the time on -> brighter color
    • "True black" - turn the LEDs off
      • In contrast, light is always on for LCD
    • Screen "burn in": static images (such as a taskbar) will wear different LEDs more quickly, leading to a slightly different color in that area

Announcements

  • First homework due yesterday
  • A note on my OH: email me if you want to meet with me

Key Idea

We can edit individual pixel colors to change images

Images in Code

  • img = new SimpleImage("IMAGE NAME");
    • Opens the image stored in the file "IMAGE NAME" into the variable img
    • A SimpleImage is a "type" of data (we've already seen doubles, integers, and text)
    • SimpleImage collects all the pixels together in one variable and has functions that allow programmers to edit the image
  • print(img);
    • Outputs (displays) the image

Editing Pixels

  • pixel = img.getPixel(x, y);
    • Gets the pixel from the image img at the location (x, y)
  • pixel.setRed(NUMBER);
    • NUMBER should be a number between 0 and 255
    • Changes just the red component of the pixel
    • pixel.setGreen and pixel.setBlue

First Image Example

Let's change the top left pixel to be red








 

You try it!

  • Set the center pixel to be red
  • Make the center to bottom left corner diagonal blue








 

Changing many pixels at once

  • Recall: Computers are good at performing lots of calculations
  • Images have lots of pixels. What if we want to do something for all pixels in the image?
  • Next time: for loop!

Recap

Images are stored as a grid of pixels made of red, green, and blue components. Computers can modify images by changing pixels.