SLIDE 1
CS 1666
www.cs.pitt.edu/~nlf4/cs1666/
- First real-time computer display
- 1950's, MIT/US Government development
- Used as an air defense system into the 1980's
Graphics history: Whirlwind/SAGE
2
CS 1666 www.cs.pitt.edu/~nlf4/cs1666/ Introduction to SDL and 2D - - PowerPoint PPT Presentation
CS 1666 www.cs.pitt.edu/~nlf4/cs1666/ Introduction to SDL and 2D - - PowerPoint PPT Presentation
CS 1666 www.cs.pitt.edu/~nlf4/cs1666/ Introduction to SDL and 2D computer graphics Graphics history: Whirlwind/SAGE First real-time computer display 1950's, MIT/US Government development Used as an air defense system into the 1980's
SLIDE 2
SLIDE 3
CRTs - Cathode Ray Tubes
3
SLIDE 4
- Pass list of objects to display to the hardware
- Once each object in the list is drawn, start over with a
new/revised list
- Each object could simply be a list of points to trace a
polygon
Vector/calligraphic displays
4
SLIDE 5
Asteroids
5
SLIDE 6
Laser light shows
6
SLIDE 7
Raster displays
7
SLIDE 8
- Frame aspect ratio:
○ Horizontal pixel count / vertical pixel count ■ E.g.,
- 16:9
- 4:3
- Pixel aspect ratio:
○ Pixel width / pixel height ■ At this point in time, almost always 1
Aspect ratios
8
SLIDE 9
Color CRT displays
9
SLIDE 10
LCD and OLED
10
SLIDE 11
Why RGB?
11
SLIDE 12
- How much memory needed to store the object list for a vector
display?
- How much memory is needed to store a raster image?
○ … How much space is needed per pixel?
Memory utilization
12
SLIDE 13
- Number of bits used to express the color of a pixel
○ Or a single color component of a pixel (i.e., R, G, or B)
- 8-bit
○ 256 total colors available ○ Normally 3 bits R, 3 bits G, 2 bits B
- 16-bit "High color"
○ Up to 65536 colors available ○ Commonly 5R, 6G, 5B
- 24-bit "True color"
○ 16,777,216 colors available ○ 8R, 8G, 8B ■ 256 options for each channel
- "Deep color"
○ 1.07 billion+ colors ○ 30/36/48 bits per pixel ■ 10/12/16 bits per color
Color depth
13
SLIDE 14
Color Channels
14
SLIDE 15
- Assuming only 8-bit color, a 256x240 raster image would need
61,440 bytes of memory to store ○ 60KiB! ○ The NES only had 2KiB of RAM...
Back to memory needs...
15
SLIDE 16
- With the availability of cheaper RAM, became feasible to store an
entire "frame" of output in memory
- Allows us to decouple presentation of the image from compilation
- f a raster image frame
- Also leads very easily to double buffering to avoid flickering
○ One buffer used to render the frame ○ Other is presented to the display
- FYI, "framebuffer" is somewhat of an overloaded term…
Framebuffers
16
SLIDE 17
Vector vs. raster graphics
17
SLIDE 18
- May want to blend pixel colors with images being drawn "behind"
the current image
- The alpha channel can be used to accomplish this
- 16-bit:
○ 5R, 5G, 5B, 1 bit for transparent or not
- 32-bit:
○ 8R, 8G, 8B, 8a ○ Another 256 steps for level of transparency
- Deep color:
○ 30/36/48 bit RGB -> 40/48/64 bit RGBa
Transparency
18
SLIDE 19
- Cross-platform library
○ Linux ○ Windows ○ macOS ○ iOS ○ Android
- Abstracts multimedia hardware
○ E.g.: ■ Video ■ Audio ■ Input devices
- We'll be using SDL 2.0 in this class
○ Not backwards-compatible with SDL 1.2!
SDL - Simple DirectMedia Layer
19
SLIDE 20
Hello world
20
SLIDE 21
- A sprite is a 2D bitmap that is a part of some larger scene
- We will end up adding sprites to the larger scene by blitting them
- n to a surface
○ SDL blits essentially copy and instance of the sprite onto a surface ■ "You should call unless you know exactly how SDL blitting works internally and how to use the other blit functions."
Some definitions
21
SLIDE 22
- A texture is a driver-specific representation of pixel data
○ Can be efficiently rendered into a scene using an
- By rendering textures in SDL as opposed to blitting sprites,
we'll be using the GPU for drawing instead of the CPU
More definitions
22