Plan for Today
We'll learn how computers store images and how to write code to manipulate images.
- Lens focuses light
- Charged Coupled Device (CCD) records light (grid of cells)
- Counts the number of electrons per cell
- Camera in Slow Motion
- Pixel: one "cell" of an image
- Each pixel is one color
- Corresponds to one cell in CCD
- Pixels are stored in a grid:
- Every color can be made from red, green, and blue
- Each pixel is stored in four bytes
- Transparency (won't discuss as much)
- 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)
- 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)
- 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
We can edit individual pixel colors to change images
img = new SimpleImage("IMAGE NAME");
- Opens the image stored in the file "IMAGE NAME" into the variable
- Outputs (displays) the image
pixel = img.getPixel(x, y);
- Gets the pixel from the image
img at the location
- NUMBER should be a number between 0 and 255
- Changes just the red component of the pixel
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
Images are stored as a grid of pixels made of red, green, and blue components. Computers can modify images by changing pixels.
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!
Tyler has homework solutions.