6 ms·

This is awesome, but as a kid back in the Pong era, I always wondered how the basic squares of pixels worked. In your travels writing this book, did you ever co

This is awesome, but as a kid back in the Pong era, I always wondered how the basic squares of pixels worked. In your travels writing this book, did you ever come across one that explained that in a way friendly to 12 year olds?

kevin_thibedeau 6y ago
Pong uses discrete logic gates and no microprocessor for its game logic and graphics. It isn't comparable to much else.
foobarian 6y ago
I was dismayed to learn that pixels are not square at all. It got worse with the switch to LCD.
- vram22 6y ago
  Interesting, didn't know that. What shape are they, then? Round? Or other?
corysama 6y ago
Can you be specific of the context you are interested in? On modern machines, a pixel is just a set of three numbers indicating how much red, blue and green light should be shown at a particular point. Ex: {0.75 red, 0.0 blue, 0.5 green} for a kinda-dark, orange pixel. The GPU keeps a big 2D grid of these number-triples in memory and on a regular schedule sends out a copy over the DVI cable to your monitor. The monitor has a bit of memory to hold it's copy. And, it has hardware to scan over the grid of numbers to produce a sequence of voltage levels that are used to change the color of the points on the LCD. There's a bit of math involved in how to do a good job representing colors with numbers and how to convert those numbers to voltages. But, at the most basic level, an image is just a big 2D grid of numbers. If you want to change the image, poke the grid. People want to change images a whole lot. So, we've developed pretty sophisticated hardware and software around poking 2D grid... But, that's a whole other topic.
gamacodre 6y ago
I was a 12 year old when I learned about them :) The idea of a pixel is that it's the smallest area of the screen that can be independently controlled, thus the designation "pixel" for "picture element". In most modern phone screens or monitors, each pixel is formed by a group of three smaller elements with fixed colors (usually red, green, and blue) but _variable brightness_. By controlling the brightness of these sub-elements, we can control what the overall color of the pixel appears to be - once you get more than an inch or two away from the screen, the light from the element group blends into what we see as a single color - so 100% green + 100% red + 0% blue looks like bright yellow. 50% each for red, green, and blue looks like a middling grey. You can usually see the structure of the pixel with a magnifying glass, though this is easier with an old TV or monitor than a modern phone. These pixels are laid out on a regular rectangular grid, and your display controller will offer some way to set the color of each pixel and to then update them all at some (usually) regular interval, for example 60 times per second. In computers, it's common to keep a "frame buffer" around that stores separate values for the red, green, and blue components of every pixel on the screen. If these are 8-bit values, that implies that each R/G/B component can have 256 different levels of brightness, and in combination they allow each pixel to take on one of about 16,000,000 possible colors. So, a program can change pixel colors by writing different values into this buffer and waiting for the updated buffer to be processed by the display controller to change what the display is showing. Of course, the electronics, physics, chemistry, timing, and logic of display generation have changed quite a bit since Pong. And not all displays even have pixels - vector displays used to be a thing, and are still used in some very specialized applications.
- aperrien 6y ago
  I appreciate the explanation, but it's not for me. I'm trying to find a good book to recommend to my grandkids. I've had fun teaching them how to use old retro computers (c64, Apple II, and such). It's been a fun experience, but I'd like to give them some references that aren't me! I've personally come a long way in my computing skills since I was staring at shiny new Pong screens :)
  - TimBurr 6y ago
ggambetta 6y ago
To some extent, I guess that's what I've tried to do here. The linear algebra might be too advanced for a 12 year old (I didn't pick it up until much later!), but on the other hand you don't need to follow all the derivations - a 12 year old can learn a lot just by following the results and the resulting algorithms. There's also a linear algebra appendix [0] that presents the operations, explains how to use them, and how they can be interpreted, without going in any theoretical depth about why these things are the way they are. [0] https://gabrielgambetta.com/computer-graphics-from-scratch/A0-linear-algebra.html https://gabrielgambetta.com/computer-graphics-from-scratch/A...
mmcgaha 6y ago
Graphics programming in C by Roger T Stevens chapters 9-12.

kevin_thibedeau 6y ago

Pong uses discrete logic gates and no microprocessor for its game logic and graphics. It isn't comparable to much else.

foobarian 6y ago

I was dismayed to learn that pixels are not square at all. It got worse with the switch to LCD.

vram22 6y ago
Interesting, didn't know that. What shape are they, then? Round? Or other?

corysama 6y ago

Can you be specific of the context you are interested in? On modern machines, a pixel is just a set of three numbers indicating how much red, blue and green light should be shown at a particular point. Ex: {0.75 red, 0.0 blue, 0.5 green} for a kinda-dark, orange pixel. The GPU keeps a big 2D grid of these number-triples in memory and on a regular schedule sends out a copy over the DVI cable to your monitor. The monitor has a bit of memory to hold it's copy. And, it has hardware to scan over the grid of numbers to produce a sequence of voltage levels that are used to change the color of the points on the LCD. There's a bit of math involved in how to do a good job representing colors with numbers and how to convert those numbers to voltages. But, at the most basic level, an image is just a big 2D grid of numbers. If you want to change the image, poke the grid. People want to change images a whole lot. So, we've developed pretty sophisticated hardware and software around poking 2D grid... But, that's a whole other topic.

gamacodre 6y ago

I was a 12 year old when I learned about them :) The idea of a pixel is that it's the smallest area of the screen that can be independently controlled, thus the designation "pixel" for "picture element". In most modern phone screens or monitors, each pixel is formed by a group of three smaller elements with fixed colors (usually red, green, and blue) but _variable brightness_. By controlling the brightness of these sub-elements, we can control what the overall color of the pixel appears to be - once you get more than an inch or two away from the screen, the light from the element group blends into what we see as a single color - so 100% green + 100% red + 0% blue looks like bright yellow. 50% each for red, green, and blue looks like a middling grey. You can usually see the structure of the pixel with a magnifying glass, though this is easier with an old TV or monitor than a modern phone. These pixels are laid out on a regular rectangular grid, and your display controller will offer some way to set the color of each pixel and to then update them all at some (usually) regular interval, for example 60 times per second. In computers, it's common to keep a "frame buffer" around that stores separate values for the red, green, and blue components of every pixel on the screen. If these are 8-bit values, that implies that each R/G/B component can have 256 different levels of brightness, and in combination they allow each pixel to take on one of about 16,000,000 possible colors. So, a program can change pixel colors by writing different values into this buffer and waiting for the updated buffer to be processed by the display controller to change what the display is showing. Of course, the electronics, physics, chemistry, timing, and logic of display generation have changed quite a bit since Pong. And not all displays even have pixels - vector displays used to be a thing, and are still used in some very specialized applications.

aperrien 6y ago
I appreciate the explanation, but it's not for me. I'm trying to find a good book to recommend to my grandkids. I've had fun teaching them how to use old retro computers (c64, Apple II, and such). It's been a fun experience, but I'd like to give them some references that aren't me! I've personally come a long way in my computing skills since I was staring at shiny new Pong screens :)
- TimBurr 6y ago

ggambetta 6y ago

To some extent, I guess that's what I've tried to do here. The linear algebra might be too advanced for a 12 year old (I didn't pick it up until much later!), but on the other hand you don't need to follow all the derivations - a 12 year old can learn a lot just by following the results and the resulting algorithms. There's also a linear algebra appendix [0] that presents the operations, explains how to use them, and how they can be interpreted, without going in any theoretical depth about why these things are the way they are. [0] https://gabrielgambetta.com/computer-graphics-from-scratch/A0-linear-algebra.html https://gabrielgambetta.com/computer-graphics-from-scratch/A...

mmcgaha 6y ago

Graphics programming in C by Roger T Stevens chapters 9-12.