Nell'informatica dobbiamo rappresentare le informazioni che riceviamo nella nostra vita reale mediante informazioni numeriche. I nostri occhi possono percepire una quantità praticamente infinita di sfumature di colore: come possiamo tradurre questi colori in numeri?
Un aiuto ce lo da la fisica stessa, che spiega come ogni colore si possa ottenere mescolando tre soli colori fondamentali: i pittori ne usano di più, ma teoricamente potrebbero usarne solo tre per ottenere tutti gli altri. Quindi, fissati questi tre colori, ogni altro colore si ottiene descrivendo numericamente le proporzioni dei tre colori fondamentali.
In informatica il modello più usato è l'RGB, che usa come colori fondamentali il rosso (Red), verde (Green) e blu (Blue). Ogni colore è quindi rappresentato da tre numeri da 0 a 255 (cioè, in linguaggio informatico, 3 bytes) che indicano i livelli di rosso, verde e blu che lo caratterizzano. Questo metodo permette di codificare 2563 = 16777216 colori diversi, che sono sufficienti per rappresentare una fotografia sul nostro monitor in maniera praticamente indistinguibile da una fotografia reale (si parla di colore a 24 bit, cioè 3 bytes x 8 bit ciascuno).
I numeri che indicano i livelli usano la sintesi sottrattiva: un basso livello indica un colore scuro, uno alto un colore chiaro; ecco quindi alcuni colori (per vederli sullo schermo potete usare uno dei programmi che avete sviluppato con pygame, oppure potete usare un programma di disegno).
| (0,0,0) | Nero:assenza di tutti e tre i colori |
| (255, 255, 255) | Bianco: tutti e tre i colori alla massima intensità |
| (255, 0, 0) | Rosso intenso: il rosso al massimo, gli altri due a 0 |
| (0. 255. 0) | Verde intenso (simile al precedente) |
| (0, 0, 255) | Blu intenso |
Per avere un colore più scuro possiamo diminuire il suo livello, per averlo più chiaro possiamo aggiungere gli altri due nella stessa proporzione in modo da "avvicinarlo" al bianco.
| (40, 0, 0) | Rosso molto scuro (più il numero è piccolo più è vicino al nero) |
| (160, 0, 0) | Un po' più chiaro del precedente |
| (255, 40, 40) | Rosso chiaro: ho aggiunto gli altri due colori nella stessa misura (più i numeri sono alti più siamo vicini al bianco) |
| (255, 200, 200) | Rosa molto chiaro |
Infine possiamo miscelare i colori per ottenerne altri: rosso + verde danno il giallo, rosso + blu il viola e verde + blu il cyan. Di nuovo potete variare le percentuali per ottenere, ad esempio, un viola tendente al blu o un fucsia
| (255, 255, 0) | Giallo |
| (160, 0, 160) | Viola scuro |
| (0, 240, 100) | Verde tendente al blu |
| (20, 20, 20) | Grigio molto scuro (il grigio ha sempre le stesse percentuali dei tre colori) |
| (200, 200, 200) | Grigio chiaro |
Una volta capito come funzionano i colori, ci resta da vedere come fa il computer a disegnare un'immagine (una foto, un nostro disegno o un videogame) sullo schermo. Saprete già che l'area dello schermo (o di una finestra di Windows) è divisa in pixel, cioè in puntini: ad esempio una finestra 800 x 600 è costituita da 480000 puntini allineati su file parallele. Ad ogni pixel viene assegnato un colore e in questo modo l'immagine viene disegnata sullo schermo.
Un pixel è individuato da due coordinate (x, y) simili a quelle del piano cartesiano. La differenza è che esse partono dal punto in alto a sinistra dello schermo (o della finestra), che avrà coordinate (0, 0). Andando a destra aumentano le x, andando verso il basso aumentano le y. Ecco ad esempio uno schermo 10 x 10 pixel:
| (0, 0) | (1, 0) | (2, 0) | (3, 0) | (4, 0) | (5, 0) | (6, 0) | (7, 0) | (8, 0) | (9, 0) |
| (0, 1) | (1, 1) | (2, 1) | (3, 1) | (4, 1) | (5, 1) | (6, 1) | (7, 1) | (8, 1) | (9, 1) |
| (0, 2) | (1, 2) | (2, 2) | (3, 2) | (4, 2) | (5, 2) | (6, 2) | (7, 2) | (8, 2) | (9, 2) |
| (0, 3) | (1, 3) | (2, 3) | (3, 3) | (4, 3) | (5, 3) | (6, 3) | (7, 3) | (8, 3) | (9, 3) |
| (0, 4) | (1, 4) | (2, 4) | (3, 4) | (4, 4) | (5, 4) | (6, 4) | (7, 4) | (8, 4) | (9, 4) |
| (0, 5) | (1, 5) | (2, 5) | (3, 5) | (4, 5) | (5, 5) | (6, 5) | (7, 5) | (8, 5) | (9, 5) |
| (0, 6) | (1, 6) | (2, 6) | (3, 6) | (4, 6) | (5, 6) | (6, 6) | (7, 6) | (8, 6) | (9, 6) |
| (0, 7) | (1, 7) | (2, 7) | (3, 7) | (4, 7) | (5, 7) | (6, 7) | (7, 7) | (8, 7) | (9, 7) |
| (0, 8) | (1, 8) | (2, 8) | (3, 8) | (4, 8) | (5, 8) | (6, 8) | (7, 8) | (8, 8) | (9, 8) |
| (0, 9) | (1, 9) | (2, 9) | (3, 9) | (4, 9) | (5, 9) | (6, 9) | (7, 9) | (8, 9) | (9, 9) |
Ricordate che, come avviene spesso nei linguaggi di programmazione, se la risoluzione è, ad esempio, 800 x 600, i valori delle x andranno da 0 a 799, e quelli delle y da 0 a 599.
Infine sono ammessi di solito anche valori negativi, ma essi si trovano fuori dallo schermo (si usano qualche volta per "parcheggiare" un oggetto che temporaneamente non si deve vedere). Ad esempio il punto (-10, 0) si trova sulla prima riga in alto, 10 pixel a sinistra della prima colonna visibile, il punto (20, -50) si trova sulla ventesima colonna 50 pixel più in alto della prima riga.
Con l'evolversi delle schede grafiche (sempre più potenti) è stato possibile creare degli effetti di trasparenza, che sono oggi molto apprezzati anche nelle moderne interfacce grafiche. Ad esempio, molto spesso quando trasciniamo un'icona o una finestra con il mouse sullo schermo questa diventa semitrasparente, lasciando vedere gli elementi che sono sotto di essa.
Questo è stato possibile aggiungendo, oltre ai tre byte r, g, b, un quarto byte detto di solito alpha value, che determina la trasparenza del colore. Un valore alpha di 255 rende il colore completamente solido (non si vede quello che c'è sotto) mentre un valore 0 lo rende completamente trasparente (in pratica non si vedrà sullo schermo). Valori intermedi tra 255 e 0 lo rendono via via sempre più trasparente.
La libreria pygame ha un supporto un pò limitato per la trasparenza: ad esempio possiamo indicare un Color con una tupla di quattro valori (r, g, b, a), ma se usiamo la fill() su una Surface il quarto byte sarà scartato ed il colore risulterà sempre solido. Nella Lezione 10 del tutorial tratteremo le funzioni di pygame per gestire la trasparenza.