Mr. Latte


Lesson 1 of 10

Store an Image in Pixels

A circle can be stored as a center and radius, or as colors assigned to a grid of small cells. Vector descriptions store shape rules; raster images store pixel values.

Small cells on a screen

A pixel is one cell in an image grid. RGB represents red, green, and blue components. Alpha supplies opacity information for compositing. Resolution is the number of horizontal and vertical pixels; a frame buffer stores values such as the colors used to draw a frame.

width, height = 100, 60
bytes_per_pixel = 4
print(width * height * bytes_per_pixel)

A 100×60 image with one byte per RGBA component requires 24000 bytes of raw color data. This excludes compression, file headers, and additional buffers such as depth.

Vectors still become pixels

A vector circle can be recalculated at a new size. Displaying it on a pixel screen still requires deciding which cells it covers, and edges may look jagged. A vector file alone does not eliminate screen aliasing.

Likewise, 3D graphics converts coordinate-based objects into pixel values. The following lessons examine the stages of that conversion.

Check your understanding

If both width and height double, how much does a buffer of the same color format grow?

Show explanation

Fourfold, because the pixel count grows by 2 × 2. Looking at only one dimension misses the increase. Per-pixel lighting and depth work may also grow.

Looking for a product partner? Founders, teams, businesses: from problem framing to launch.