Roberto Ranon Sistemi Multimediali e Laboratorio Esercitazione 23

Roberto Ranon
Sistemi Multimediali e Laboratorio
Esercitazione 23/3/2014
!
In questa esercitazione, lavoreremo con colori e immagini.
Esercizio 1 (modello colore)
La funzione colorMode() modifica il modo in cui Processing interpreta i valori che vanno a definire un colore.
Per default, i parametri per fill(), stroke(), background() e color() sono valori da 0 a 255 interpretati
secondo il modello di colore RGB(A). La funzione colorMode() può cambiare sia il range, che il modello di
colore. Ad esempio:
colorMode(HSB, 100); imposta modello di colore Hue Saturation Brightness con valori tra 0 e 100
colorMode(RGB, 1.0); imposta modello di colore RGB con valori tra 0 e 1
colorMode(HSB, 360,100,100); imposta modello di colore HSB (anche detto HSL) con di hue tra
0 e 360, valori di saturation e brightness tra 0 e 100
!
Settare le dimensioni della finestra a 360x100 pixel. Disegnare 360 rettangoli affiancati verticalmente, ciascuno
largo un pixel e alto come la finestra. Disabilitare lo stroke. Settare il colore di riempimento dei rettangoli in
modo che coprano tutti i possibili livelli di hue. I livelli di saturation e brightness devono rispettivamente
dipendere dalla posizione x e y del mouse, con la posizione (0,0) corrispondente a saturation e brightness al
massimo, e la posizione (width, height) corrispondente a saturation e brightness al minimo.
!
Esercizio 2 (colori complementari, percezione)
Disegnare un quadrato al centro della finestra in modo che:
- lo hue dello sfondo sia proporzionale a mouseY (dove mouseY = 0 corrisponde a hue=0 e mouseY =
height corrisponde al valore massimo di hue (saturation e brightness a piacere)
- lo hue del riempimento del quadrato e’ il colore complementare (valore massimo di hue - hue dello sfondo).
- il lato del quadrato sia pari a mouseX + 1
!
Esercizio 3 (colori e immagini)
Il codice seguente carica un’immagine e la visualizza:
omehow,
had reading
to writethis
code
that
translates
function
f you have someone
been diligently
book
in precisely
thethese
prescribed
order,c
elsthe
ononly
the oﬀ
screen
to reflfor
ectdrawing
the requested
shape.
A line does
not app
ar,
ered means
to the screen
is through
a function
call.
ausepoints
we color
all the
pixelswith
along
linear
between
points.
hese
” or “Fill
an ellipse
reda” or
“ loadpath
this JPG
image two
and place
it o
img; // la someone
classe predefinita
PImage
perthat
la gestione
di immagini
omewhere,
somehow,
had toon
write
code
translates
these
function
ge
this PImage
a serve
day-to-day
basis.
We
have
the
!lower-level-pixel-setting
ndividual
pixels
on{the drawing
screen to refl
ect the requested
not a
void
setup()
thank
for
the
many
functions
that takeshape.
care A
ofline
thisdoes
business
size(800,600); t appears because
we color all the pixels along a linear path between two point
img = loadImage("sunflower.jpg");
}
have
to time
manage
lower-level-pixel-setting
a day-to-day
basis. Weshape
have t
from
to this
time,
we do want to breakonout
of our mundane
!
and
Java)
tothe
thank
void
draw()
{ for the many drawing functions that take care of this busin
pixels
on
screen
directly. Processing provides this functionality vi
background(0);
image(img, 0, 0);
// disegna l’immagine alle coordinate specificate
Nevertheless,
from
time
to
time, we do want to break out of our mundane shap
}
ar
with
the
idea
of
each
pixeldirectly.
on theProcessing
screen having
anthis
X and
Y posit
deal with! the pixels on the screen
provides
functionality
window.Consultate
However,
the array
pixels
hasperonly
dimension,
storing
c
la guida di riferimento
delle funzioni
di Processing
maggiorione
dettagli su
PImage, loadImage()
,e
image(). In particolare,
per image()
, controllate
possibili argomenti
loro significato
.
We
are familiar
idea of
each i pixel
on thee ilscreen
having
an X and Y po
Figure
15.5. with the
dimensional
window.
the array
pixels
has onlycopiate
onenello
dimension,
storing
Importante:
le immaginiHowever,
riferite nel programma
devono essere
precedentemente
sketch folder
mediante il comando di menu Sketch -> Add File ...
equence. See Figure 15.5.
L’accesso ai singoli pixel di un’immagine può essere effettuato in diversi modi. Il più efficiente consiste
nell’accedere ad un array, chiamato pixels, che e‘ associato ad ogni immagine, e ne memorizza i
pixel, organizzati in una sequenza lineare. 0
1
2
3
4
7 0 81 92 3 4
7 8 9
10 11 125 136 14
10 11 12 13 14
15 16 17 18 19
15 16 17 18 19
20 21 22 23 24
5
How the pixels look
How the pixels look
6
20 21 22 23 24
How the pixels
How the pixels
are stored.
are stored.
Pixel dell’immagine
2 7
3 48 596 .7 .8 .9 . . .
0 1 2 3 40 51 6
15.5
fig. 15.5 I pixelfig.dell’immagine
nell’array pixels
!
Il codice seguente mostra come accedere ai singoli pixel di un’immagine, ed eventualmente modificarne il
valore, prima di visualizzarla:
Take the following example. This sketch sets each pixel in a window to a rando
wingarray
example.
Thisansketch
sets each
pixel
a window
to do
a random
PImage
img; like
ixels
just
other array,
the only
diﬀin
erence
is that we
not have
!void issetup()
{variable.
just likesize(200,200);
an other
array, the only diﬀerence is that we do not have to
Processing
built-in
img = loadImage("sunflower.jpg");
lt-in variable.
Example 15-5: Setting pixels
}
!
!
void draw() {
!
!
!
!
// carichiamo i pixel dell’immagine nel suo array pixels
img.loadPixels();
for (int y = 0; y < img.height; y++ ) {
for (int x = 0; x < img.width; x++ ) {
int loc = x + y*img.width;
// le funzioni red(), green(), and blue() accedono alle singoli componenti
float r = red(img.pixels [loc]); float g = green(img.pixels[loc]);
float b = blue(img.pixels[loc]);
// Qui va inserito eventuale codice per modificare le componenti
// scrive il pixel risultato nell’immagine.
img.pixels[loc] = color(r,g,b);
}
}
image(img, 0,0);
}
Il codice che legge e scrive i pixel potrebbe anche essere eseguito nella funzione setup(); la sua esecuzione
nella funzione draw() consente di modificare l’immagine ad ogni frame. Esiste anche la funzione alpha() per
l’accesso al canale alpha, e le funzioni hue(), saturation() e brightness() per
accedere ai valori HSB.
Modificare il programma precedente in modo da visualizzare solo la componente
rossa di ogni pixel dell’immagine (provate anche con la sola componente verde e
blu).
Esercizio 4 (modificare i colori di un’immagine)
Modificate il programma precedente in modo da dimezzare il valore di ogni
componente RGB (provate anche a raddoppiare il valore di ogni componente).
Esercizio 5 (modificare i colori di un’immagine)
Modificate il programma precedente in modo da dimezzare il valore di saturation di ogni pixel (provate anche
a raddoppiare, e a dimezzare / raddoppiare il valore di brightness).
Esercizio 6 (visualizzare le componenti)
Così come e’ possibile leggere e scrivere i pixel di un’immagine, e’ possibile leggere e scrivere i pixel della
finestra, usando la funzione loadPixels(), l’array pixels (che funziona come per le immagini), e la funzione
updatePixels(), che aggiorna la finestra con il contenuto dell’array pixels.
Scrivete un programma che carichi un’immagine, la visualizza, e mostra in tre rettangoli affiancati il valore dei
canali R, G e B del pixel dell’immagine su cui il mouse e’ posizionato.
!
!
Esercizio 7 (immagini come palette di colori)
In questo esercizio, useremo un’immagine come palette di colori. Dovete:
- caricare un’immagine
- disegnare una popolazione di oggetti in movimento (griglia di rettangoli, particelle: qualsiasi cosa da uno dei
nostri esercizi precedenti), in cui ognuno usa il colore di un pixel a caso dell’immagine. Provate con diverse immagini, sia con pochi che con molti colori.
Esercizio 8 (immagini come palette di colori)
In questo esercizio, useremo un’immagine come palette di colori. Dovete:
- caricare un’immagine
- creare un array in cui memorizzare i colori di tutti i pixel dell’immagine.
- ordinare l’array per brightness.
- visualizza l’array ordinato disegnando, righe di quadrati di 5x5 pixels, in cui ogni quadrato visualizza un
elemento dell’array a partire dall’alto a sinistra, e procedendo verso destra e verso il basso. Provate con diverse immagini, sia con pochi che con molti colori.
!
!
!
!

Download Report