Molto spesso ci troviamo a lavorare con le immagini quando programmiamo. Abbiamo già visto come salvare le immagini in formato JPEG, come conoscere la loro dimensione prima di salvarle su disco e anche come ottenere l’effetto GrayScale. Vediamo come applicare alle immagini presenti in un Image un effetto particolarmente suggestivo per quanto banale possa risultare: l’effetto sepia.

Rimanendo sull’onda dell’articolo precedente, creiamo una funzione che ci modifichi i pixel secondo alcune regole di cambio colore:

private Color TransformColorToSepia(Color inputColor)
{
int outputRed = (int)((inputColor.R * .393) + (inputColor.G * .769) + (inputColor.B * .189));

int outputGreen = (int)((inputColor.R * .349) + (inputColor.G * .686) + (inputColor.B * .168));

int outputBlue = (int)((inputColor.R * .272) + (inputColor.G * .534) + (inputColor.B * .131));

Color outputColor = Color.FromArgb((outputRed < = 255) ? outputRed : 255, (outputGreen <= 255) ? outputGreen : 255, (outputBlue <= 255) ? outputBlue : 255);

return outputColor;

}

(All'interno dell'articolo una soluzione sicuramente più performante)

Testando l’algoritmo otteniamo il risultato desiderato anche se in un tempo di esecuzione piuttosto lungo e pari a 10,799 secondi.

Come per l’altro articolo, vediamo di ottenere un tempo più decente utilizzando le ColorMatrix:

private Image FastTransformToSepia(Image inputImage)

{

Bitmap outputBitmap = new Bitmap(inputImage.Width, inputImage.Height);

ImageAttributes attributes = new ImageAttributes();

ColorMatrix colorMatrix = new ColorMatrix(new float[][] {

new float[] {0.393f, 0.349f, 0.272f, 0, 0},

new float[] {0.769f, 0.686f, 0.534f, 0, 0},

new float[] {0.189f, 0.168f, 0.131f, 0, 0},

new float[] {0, 0, 0, 1, 0},

new float[] {0, 0, 0, 0, 1}

}

);

attributes.SetColorMatrix(colorMatrix);

Graphics outputGraphics = Graphics.FromImage(outputBitmap);

Rectangle rectInput = new Rectangle(0, 0, inputImage.Width, inputImage.Height);

outputGraphics.DrawImage(inputImage, rectInput, 0, 0, inputImage.Width, inputImage.Height, GraphicsUnit.Pixel, attributes);

outputGraphics.Dispose();

return outputBitmap;

}

In questo caso otteniamo un tempo di esecuzione di ben 894 millisecondi, molto meglio. Buon lavoro!

Prima di iniziare, occore capire bene come ottenere questo effetto e Wikipedia ci aiuta molto in questo, infatti cercando “grayscale” nella versione inglese dell’enciclopedia troviamo:

To convert any color to a grayscale representation of its luminance, first one must obtain the values of its red, green, and blue (RGB) primaries in linear intensity encoding. Then, add together 30% of the red value, 59% of the green value, and 11% of the blue value.

Ovvero, in italiano:

Per convertire ogni colore in una rappresentazione in scala di grigi, è necessario ottenere i suoi valori di Rosso, Verde e Blu (RGB). A questo punto basta sommare i tre valori rispettivamente al 30% del rosso, 59% del verder e 11% del blu.

(All'interno la spiegazione dettagliata di come ottenere il risultato)

In pratica ci dice che per ottenere un effetto che a occhio umano sia correttamente calibrato è necessario eseguire questa operazione su ogni singolo pixel dell’immagine:

int eyeGrayScale = (int)(inputColor.R * .3 + inputColor.G * .59 + inputColor.B * .11);

Adesso non è difficile creare una funzione ad-hoc per eseguire l’operazione:<

private Image TransformToBlackWhite(Image inputImage)
{
Bitmap outputBitmap = new Bitmap(inputImage.Width, inputImage.Height);

for (int x = 0; x < outputBitmap.Width; x++)
{
for (int y = 0; y < outputBitmap.Height; y++)
{
Color currentBWColor = TransformColorToBW((inputImage as Bitmap).GetPixel(x, y));
outputBitmap.SetPixel(x, y, currentBWColor);
}
}

return outputBitmap;
}

In questa funzione si richiede in input un oggetto di tipo Image e in uscita si restituisce un nuovo oggetto sempre di tipo Image ma trasformato in scala di grigi. Si scorre quindi l’immagine pixel per pixel, sia sull’asse x, sia sull’asse y e per ogni pixel viene eseguita la funzione:

private Color TransformColorToBW(Color inputColor)
{
int eyeGrayScale = (int)(inputColor.R * .3 + inputColor.G * .59 + inputColor.B * .11);
Color outputColor = Color.FromArgb(eyeGrayScale, eyeGrayScale, eyeGrayScale);

return outputColor;
}

La funzione TransformColorToBW non fa altro che fare quanto specificato da Wikipedia. Ogni pixel viene quindi scritto per mezzo della funzione SetPixel sull’immagine di uscita nella stessa posizione XY dell’originale.

Per vedere l’algoritmo all’opera, ecco un’immagine di test:

Quello che si nota tuttavia, è una incredibile lentezza nell’esecuzione dell’algoritmo tantochè per l’immagine sopra che ha una risoluzione di 2592×1944 pixel, ovvero 5.038.848 corrispondenti a 5MegaPixel, impiega ben 11,069 secondi.

Per sapere come fare a calcolare questo valore leggi l’articolo che ho scritto sul calcolo delle performance degli algoritmi in C#.

Questo ci lascia intendere che ci sono modalità ben più performanti per ottenere il medesimo risultato, utilizzando le ColorMatrix, vediamo qui un esempio:

private Image FastTransformToBW(Image inputImage)
{
Bitmap outputBitmap = new Bitmap(inputImage.Width, inputImage.Height);

ImageAttributes attributes = new ImageAttributes();

ColorMatrix colorMatrix = new ColorMatrix(new float[][] {
new float[] {.3f, .3f, 0.3f, 0, 0},
new float[] {.59f, .59f, .59f, 0, 0},
new float[] {.11f, .11f, .11f, 0, 0},
new float[] {0, 0, 0, 1, 0},
new float[] {0, 0, 0, 0, 1}
}
);

attributes.SetColorMatrix(colorMatrix);

Graphics outputGraphics = Graphics.FromImage(outputBitmap);
Rectangle rectInput = new Rectangle(0,0,inputImage.Width,inputImage.Height);

outputGraphics.DrawImage(inputImage, rectInput, 0, 0, inputImage.Width, inputImage.Height, GraphicsUnit.Pixel, attributes);
outputGraphics.Dispose();

return outputBitmap;
}

Calcolando la performance di questo algoritmo, vediamo che abbiamo ottenuto lo stesso risultato in ben 838 millisecondi, ovvero un incremento in velocita pari al 1221%! Per facilitarvi nella comprensione, ho scritto appositamente un articolo per utilizzare al meglio le ColorMatrix. Buon lavoro!

Quando noi scattiamo una fotografia, ad esempio questa, il sensore CCD della nostra fotocamera cattura ogni singola informazione luminosa proveniente dall’ottica in modo ordinato ed in base alla sua risoluzione restituisce una serie di bit che solitamente compongono il formato RAW della fotografia che vengono poi immagazzinati sotto forma di un’immagine JPEG, ad esempio questa:

Una volta che riportiamo questa fotografia su uno schermo qualsiasi, i bit di colore devono venire nuovamente riclassificati secono i loro valori fondamentali, il Rosso, il Verde ed il Blu (in inglese RGB) in modo che il nostro occhio possa vedere le differenze tra un punto e l’altro. A tal proposito, quando fu inventato il primo schermo a colori, pensarono bene di accostare una moltitudine di punti (i pixel) costituiti a loro volta da 3 puntini luminosi guarda caso rossi, verdi e blu e dare loro tanta più illuminazione quanta ne è specificata nell’informazione da rappresentare.

(All'interno una spiegazione approfondita sull'utilizzo delle ColorMatrix)

Questa immagine serve per far capire meglio come vengono rappresentati i colori sugli schermi:

Se non vi è molto chiaro il concetto, vi consiglio di leggervi l’ottimo articolo di Wikipedia sui Pixel. Ora che abbiamo visto l’aspetto teorico, occorre addentrarsi un pò di più su quello pratico della questione, perchè in fondo è questo che ci interessa.

Grazie alle ColorMatrix che ci sono state messe a disposizione da Microsoft, è possibile applicare dei filtri pixel per pixel ad una qualsiasi immagine in input ed ottenerne una in output modificata secondo quanto abbiamo specificato nel nostro filtro. L’utilizzo è abbastanza semplice, in quanto occorre “semplicemente” assegnare i valori desiderati proprio ad una matrice, questa:

In pratica lo strumento che ci mette a disposizione .NET è una matrice 4×4 [R;G;B;A] dove A rappresenta la trasparenza del colore che viene moltiplicata ad un vettore colore di 4 elementi [R,G,B,A]. Tuttavia le uniche trasformazioni rappresentabili in 4 dimensioni sono solo quelle lineari, come la rotazione e la scalatura e quindi per garantire il supporto anche alle operazioni non lineari (ad esempio le traslazioni) è stato introdotta una quinta dimensione. In totale si hanno perciò 5 dimensioni totali per la matrice. In particolare ho mostrato nell’immagine quali righe e quali colonne si occupano della trasformazione del colore. In grigio chiaro vediamo quanto riguarda il canale Alpha mentre in grigio scuro vediamo quello che riguarda l’intensità del colore.

La quinta colonna, a parte l’elemento (5,5), è settata a 0 (zero) in quanto non serve a nulla, è stata messa per rendere quadrata la matrice (e quindi velocizzare parecchio i calcoli sottostanti).

A questo punto manca solo da vedere un pò di codice:

private Image FastNullTransform(Image inputImage)
{
Bitmap outputBitmap = new Bitmap(inputImage.Width, inputImage.Height);

ImageAttributes attributes = new ImageAttributes();

ColorMatrix colorMatrix = new ColorMatrix(new float[][] {
new float[] {1, 0, 0, 0, 0},
new float[] {0, 1, 0, 0, 0},
new float[] {0, 0, 1, 0, 0},
new float[] {0, 0, 0, 1, 0},
new float[] {0, 0, 0, 0, 1}
}
);

attributes.SetColorMatrix(colorMatrix);

Graphics outputGraphics = Graphics.FromImage(outputBitmap);
Rectangle rectInput = new Rectangle(0,0,inputImage.Width,inputImage.Height);

outputGraphics.DrawImage(inputImage, rectInput, 0, 0, inputImage.Width, inputImage.Height, GraphicsUnit.Pixel, attributes);
outputGraphics.Dispose();

return outputBitmap;
}

In questo caso particolare abbiamo utilizzato una matrice identità, ovvero una matrice avente come valori tutti zeri a parte che nella diagonale principale (quella che parte dall’elemento 0,0 e va fino al 5,5) dove invece sono presenti degli “uni”. Domani e dopodomani vedremo come utilizzare le ColorMatrix per ottenere effetti molto conosciuti: il GrayScale e il Sepia. A presto!

Questo programma si interpone tra tutti quei programmi 3D come Maya, Cinema 4D, 3D Studio Max e tantissimi altri e devo dire che compie veramente il suo dovere, con una resa grafica eccezionale (ricordo che stiamo parlando di software open!!).

(All’interno del post i dettagli del cartoon)

Proprio con Blender è stato realizzato il primo cartone animato open source. Cosa significa? Significa che per la sua realizzazione è bastato un team di 9 persone ed il risultato è a dir poco impressionante. Sto parlando di Big Buck Bunny, che racconta la storia di un enorme coniglio al risveglio dopo il lungo letargo invernale che viene preso di mira senza motivo da tre antipatici roditori. La storia è ovviamente molto semplice, ma la resa finale è molto carina e soprattutto è bella dal punto di vista morale: chi la fa, l’aspetti.

Il corto, della durata di 9:56 è stato realizzato in 6 mesi di lavorazione secondo una precisa scaletta di lavoro:

Per vederlo potete cliccare direttamente sull’immagine sottostante:

Il lavoro è stato diretto da un certo Sacha Goedegebure, un olandese ed il team è multiculturale: comprende due olandesi, due tedeschi, un americano, un danese, un australiano e ovviamente anche un italiano, Enrico Valenza.

Per avere informazioni sul progetto e i lavori futuri, potete andare alla pagina relativa al progetto Big Buck Bunny.

Tuttavia ho voluto lo stesso rendervi partecipi di questa cosa. Essendo che sto realizzando un sito multilingue mi è capitata la necessità di avere le bandierine con cui identificare appunto le varie lingue, in cui poi l’utente clicca e cambia la lingua del sito. Fin qui tutto Ok, se non fosse che non si sa dove trovarle. Allora vi aiuto io, ho messo insieme due zip contenenti praticamente un numero spropositato di icone di paesi di tutto il mondo.

(All’interno dell’articolo i link per il download)

Il primo è un pacchetto di iconcine della dimensione 16x11px, molto carine ed estremamente dettagliato.

Scarica il primo pacchetto di bandierine (fonte famfamfam)

Il secondo invece contiene diverse dimensioni, 16×16, 24×24, 32×32 e 48×48.

Scarica il secondo pacchetto di bandierine (fonte bloggemini.com)

Buon multilingua!

Scrivo quest’articolo per far felice il caro Fabius di Standweb, visto che mi ha chiesto come cambiare i colori di una foto, come spiegato in questo articolo per Photoshop, ma utilizzando il gratuito The Gimp.

Pagina di download per The Gimp (Win, Linux e MaxOS)
Come spiegato nell’altro articolo, l’effetto che vogliamo realizzare è questo:

Con Photoshop abbiamo visto che era possibile ottenerlo abbastanza facilmente, smanettando un pò con la finestra di cambio tonalità. Con The Gimp, ho scoperto, in questo caso può essere ancora più semplice. Prendiamo lo strumento lazo dalla barra degli strumenti (tasto F) e selezioniamo l’area contornante la macchina:

qui è mostrata la selezione, non centra la quick-mask

A questo punto andiamo nel menu Colori -> Tonalità/Saturazione e selezioniamo la tonalità Blu:

Modifichiamo il valore della proprietà “Tonalità” al valore 140, poi selezioniamo la tonalità Ciano e spostiamo il valore della proprietà Tonalità al valore 140.

L’effetto che otteniamo è proprio quello cercato:

Buon lavoro!

Secondo articolo di grafica per oggi, sono ispirato L’effetto che vogliamo ottenere é nientepopodimeno che questo:

Ovvero: come cambiare i colori di un oggetto senza alterare tutti gli altri? Lo vediamo all’interno del post.

Prendiamo l’immagine iniziale:

Come abbiamo già visto nell’articolo precedente, è possibile rendere in bianco e nero solamente alcune zone dell’immagine, per l’esattezza delle zone colorate con determinati colori, lasciando inalterate (o quasi) tutte le altre. Dato questo, è possibile perciò supporre che Photoshop abbia in dotazione qualcosa per modificare semplicemente il colore, senza interferire con tutti gli altri. Effettivamente questo strumento esiste, ed è lo stesso visto nell’articolo precedente, Hue/Saturation (raggiungibile da Image -> Adjustements -> Hue/Saturation oppure digitando CTRL-U).

La finestra è la medesima:

Ciò a cui vogliamo arrivare è modificare unicamente le tonalità di blu, fino a renderle rosse. Per prima cosa, selezioniamo l’area comprendente solo la macchina:

Da notare che non ho eseguito una quick-mask, ho solo voluto evidenziare la zona selezionata (quella normale) e quella esterna alla selezione (in rosso).

Adesso possiamo aprire la finestra per modificare la tonalità vista poco fa (CTRL-U) e scegliere direttamente dalla lista in alto il colore Blu. Adesso dobbiamo modificare i parametri della gamma dei blu che vogliamo modificare, i valori si riferiscono ai cursori, come descritto in questa immagine:

Impostiamo perciò i valori dei blu in questo modo:

Adesso possiamo sbizzarrirci cambiando il valore della proprietà Hue (Tonalità):

Il risultato finale sarà questo:

Buon lavoro!

Tag Technorati: effetto, Photoshop, colore, Hue, Tonalità

(Vediamo come poterlo applicare anche noi!)

Effettivamente, è molto accattivamente come effetto e nemmeno troppo complicato da realizzare, a meno di situazioni particolari che analizzo fra un pò.

Iniziamo prendendo l’immagine iniziale, questa:

Scaricatela (cliccateci sopra) e poi apritela in Photoshop tramite il menu File -> Open. Adesso andate nel menu Image -> Adjustements -> Hue/Saturation, o direttamente digitando CTRL-U. Apparirà una finestra simile a questa:

Ciò che dobbiamo fare ora è molto semplice. Tramite questo potente strumento, cercheremo di eliminare dall’immagine tutte quelle frequenze di colore che non ci interessano. Nel nostro caso vogliamo fare risaltare solo la tonalità rossa del giubbino della bimba. Questo significa che dovremo eliminare tutte le altre tonalità di colore. Scegliamo perciò il canale verde (Green) e abbassiamo del tutto il valore di Saturation (Saturazione), come mostrato in quest’immagine:

Facciamo la stessa cosa con tutti i canali tranne il Master e il Rosso (Red). Otteniamo questo:

Come vediamo abbiamo eliminato tutte le tonalità non desiderate… o quasi… L’effetto è già molto bello, ma vogliamo eliminare anche quel marroncino della panca. Selezioniamo perciò la tonalità gialla (Yellow) dalla lista in alto, e andiamo a modificare la gamma di valori compresa in questo canale, seguendo questo schema:

Questi sono i valori per i Gialli, i Magenta e i Rossi:

Inserendo correttamente i vari valori (attenzione che la saturazione dei rossi è stata portata a 22), l’effetto che otteniamo è questo:

Veramente molto bello!

Il problema nasce invece nel caso in cui ci siano troppi dettagli indistinti, come ad esempio una folla o una serie di oggetti di colorazioni simili (giallo e verde-giallo ad esempio) che vogliamo dividere. In questo caso, il modo migliore per agire è quello di selezionare con attenzione delle macro-aree su cui applicare con certezza la desaturazione completa (Image -> Adjustements -> Desaturate) oppure tramite i tasti CTRL-SHIFT-U, e poi applicare man mano queste operazioni su selezioni sempre più dettagliate, fino ad arrivare alla versione finale.

Buon lavoro

Tag Technorati: effetto, Photoshop, Adjustements, Hue/Saturation, Desaturate

Prendiamo un’immagine bella, di quelle adatte a stare nell’header di un sito web. Personalmente mi piaceva particolarmente questa:

Supponiamo ora di volerla abbinare ad uno sfondo, ad esempio un gradiente, di quelli che vanno tanto di moda ora, in pieno stile web2.0. Creiamo perciò una nuova immagine andando in File -> New, ed assegnamo le dimensioni 500×200 pixel. A questo punto ci apparità la nostra immagine con il classico sfondo bianco.

Quello che dobbiamo fare ora è aprire l’immagine del flauto che ho mostrato qui sopra tramite il menu File -> Open e poi effettuare un Drag & Drop di questa sull’altra usando lo strumento Move.

Adesso ci troviamo in questa situazione:

Quello che dobbiamo fare ora è aggiungere il gradiente allo sfondo, usando lo strumento Gradient (si trova sotto il secchiello, tenete premuto su quest’ultimo e dovreste trovarlo). Per utilizzarlo dobbiamo tenere premuto il mouse e nella parte alta e trascinarla verso quella bassa, in modo da disegnare una linea retta:

Adesso ci troviamo in questa situazione:

Ci resta unicamente da creare una sfumatura con la maschera di livello, ciò per cui state leggendo il post

Aprite perciò la finestra dei livelli (solitamente associata al tasto F7, oppure la trovate nel menù Windows -> Layers) e potete vedere che abbiamo inconsciamente creato due livelli, dove il flauto si viene a trovare esattamente sopra al gradiente.

Selezioniamo il livello del flauto con un click e andiamo a cliccare sullo strumento maschera:

Vediamo che ci viene visualizzato un rettangolo bianco accanto all’immagine del flauto nella finestra dei livelli. Questo rettangolo esprime tramite un canale alfa, quali sono le parti che devono essere visibili e quali no dell’immagine.

• Bianco = visibile
• Nero = invisibile

Ecco perciò che prendo lo strumento gradiente e disegno un gradiente esattamente come ho fatto prima dal bianco al nero partendo da poco prima che l’immagine del flauto finisca per terminarlo appena finisce. Ecco il risultato:

Ovviamente così è un pò bruttino, possiamo arricchire il tutto con altri effetti o altre immagini, fino ad ottenere anche cose del genere :

Buon lavoro!

• CPU: Pentium 4 da 2,8GHz, socket 478
• RAM: 2,5 GB PC3200 DDR a 400MHz
• Scheda Video: ATI Sapphire x1650 PRO AGP da 512MB
• HDD: 2 dischi SATA II, totale 400GB

Prima dell’installazione della nuova ati x1650 pro avevo una ATI Sapphire 9600 AGP. In base a questi dati potete decidere quali sono i settaggi migliori per il vostro sistema. Cambiamenti rispetto a prima? Devo dire che la qualità grafica di COD4 è aumentata considerevolmente. Controllando adeguatamente tutti i settaggi riesco a giocare alla risoluzione di 1024×768 senza rallentamenti, a parte quel breve glitch all’inizio di ogni livello, dovuto probabilmente ad un bug della versione per PC perchè non sono l’unico ad averlo. L’antialiasing è settato nel gioco a 2x, perdo un pò di qualità ma riesco a giocare fluidamente. Ecco qua tutti i miei settaggi, della scheda video:

e del gioco:

Diciamo che con questi settaggi la resa grafica è praticamente ottima, fluida e senza intoppi, come potete vedere da questi screen-shots: