Come viene memorizzato un pixel sul computer?

I dati dei pixel sono memorizzati come numeri. Chiaro e semplice. Quindi, i "valori" dei pixel sono memorizzati in un "array", che è solo un altro modo di dire "una tabella."

Per questa spiegazione, userò il semplice RGB, dato che fa capire il concetto di base, ma sappiate che ci sono alcuni modi diversi e più complessi di guardare i valori dei pixel.

Un'immagine RGB

Avete mai guardato nel proiettore che lancia la ESPN su una parete in un ristorante per pizza party negli anni '90 per tutti i papà costretti a stare intorno a palloncini e cappelli da festa? Potresti aver notato 3 colori accecanti: rosso, verde e blu. Rosso, Verde, Blu... RGB... A volte le convenzioni di denominazione hanno un senso nell'informatica (non spesso, ma a volte).

Se hai mai urinato nell'abisso blu inchiostro di un bagno chimico e hai notato che la tua pipì gialla fa diventare verde la piscina blu, o hai usato mani non guantate per mescolare vernice a base di piombo all'asilo, hai visto esattamente come funziona RGB. Mescolare i colori per ottenere più colori.

Il modo in cui il colore finale è determinato, è basato sulla forza di ogni componente di rosso, verde e blu. Il rosso a tutta forza, nessun verde e il blu a tutta forza danno il viola. Tutto zero per R, G, e B ti dà il nero (assenza di colore), e valori pieni per tutti e 3 ti danno il bianco. Etc etc. La miscelazione dei colori non è sempre valore pieno o nessuno, è una scala scorrevole tra 0 e 255 (per i "colori a 8 bit"). Usando qualsiasi selezionatore di colori nella maggior parte delle applicazioni si può vedere come funziona:

Questo è dalle basi dello spettro dei colori visibili. Diventa MOLTO più avanzato, ma questo è il punto di partenza.

Siccome ora sai che il colore è memorizzato come un valore di 3 numeri, possiamo passare alla sua memorizzazione.

Array di immagini

Per un'immagine RGB, i valori dei pixel sono memorizzati come un array tridimensionale; più precisamente, 3 array separati di 2 dimensioni. Il rosso è memorizzato in uno, il verde nel successivo e il blu nell'ultimo.

Cominciamo quindi con un'immagine e vediamo come viene memorizzata.

L'immagine finale visualizzata sullo schermo:

Quell'immagine suddivisa nei suoi valori rosso, verde e blu dove ogni immagine è solo la forza di ogni colore. Ricordate il punto precedente di 0 = nero, e 255 = bianco? Questo è solo per mostrarvi quale valore è memorizzato in quel pixel in forma visiva:

La griglia in quelle immagini è più ampia di quanto lo sia effettivamente nell'immagine (dato che è pixel per pixel) ma li ho messi per mostrare come funziona un array.

L'array è essenzialmente come un foglio di calcolo excel dove la cella A1 è il valore del pixel più in alto a sinistra, B1 è quello appena a destra di quello, A2 è il pixel più a sinistra sulla riga 2, e così via fino a quando tutti i valori sono memorizzati. Poi, ricordate che ci devono essere 3 di questi: il foglio 1 sono i valori rossi, il foglio 2 sono i valori verdi, e il foglio 3 sono i valori blu.

Come questo per un'immagine 18px x 9px:

Quindi, ogni valore di pixel ha essenzialmente una coordinata X, Y, e Z per una facile navigazione. Come questo:

[Array rosso, verde o blu][coordinata x all'interno di quell'array di colori][coordinata y all'interno di quell'array di colori] (per tua informazione, a volte y e x sono scambiate, dipende dal codice.)

Questo significa che ogni pixel di 3 colori, una volta che hai le coordinate X e Y, il valore "finale" del pixel sta semplicemente esprimendo il valore memorizzato in ognuno di quegli array a quella coordinata. Come questo:

Red Array, valore del pixel memorizzato nello slot (20,40): [0][20][40] = 255

Green Array, valore del pixel memorizzato nello slot (20,40): [1][20][40] = 128

Fila blu, valore del pixel memorizzato nello slot (20,40): [2][20][40] = 145

In definitiva, questo ti dà qualcosa come questo:

(255, 128, 145), o "rosso a tutta forza, metà forza del verde, e un po' più di metà forza del blu" che ti dà il glorioso pixel che sembra così: