Pixel art
-
Upload
alessandro-bogliolo -
Category
Education
-
view
5.103 -
download
0
Transcript of Pixel art
![Page 1: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/1.jpg)
Pixel Art Pensiero computazionale Grafica digitale
CodeMOOC compie un anno
codemooc.org
Foto
di A
lfons
ina
Cinz
ia T
roisi
25 gennaio 2017
![Page 2: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/2.jpg)
ConvenzioniDimensione della griglia: 3x3Posizione iniziale: (A,1)
A B C
1
2
3
Risoluzione
Prepariamo il foglio…
Quadretti pieni o vuoti
![Page 3: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/3.jpg)
Spostati a destraA B C
1
2
3
Definiamo le istruzioni…
![Page 4: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/4.jpg)
Colora il quadrettoA B C
1
2
3
Definiamo le istruzioni…
![Page 5: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/5.jpg)
Spostati a destraA B C
1
2
3
Definiamo le istruzioni…
![Page 6: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/6.jpg)
Spostati sottoA B C
1
2
3
Definiamo le istruzioni…
![Page 7: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/7.jpg)
Spostati a sinistraA B C
1
2
3
Definiamo le istruzioni…
![Page 8: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/8.jpg)
A B C
1
2
3
Proviamo a disegnare…
![Page 9: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/9.jpg)
A B C
1
2
3
Proviamo a disegnare…
![Page 10: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/10.jpg)
A B C
1
2
3
Proviamo a disegnare…
![Page 11: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/11.jpg)
A B C
1
2
3
Proviamo a disegnare…
https://studio.code.org/unplugged/unplug3.pdf
![Page 12: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/12.jpg)
A B C
1
2
3
Si può semplificare? ConvenzioniQuadretto successivo
Quando arrivi in fondo alla riga ricomincia dal primo quadretto della riga successiva
![Page 13: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/13.jpg)
A B C
1
2
3
Si può semplificare? Convenzioni
Passa al quadretto successivo
![Page 14: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/14.jpg)
A B C
1
2
3
Si può semplificare? Convenzioni
Colora il quadretto e passa a quello successivo
![Page 15: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/15.jpg)
A B C
1
2
3
Il nuovo codice… Convenzioni
Colora il quadretto e passa a quello successivo
![Page 16: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/16.jpg)
Usiamolo…
![Page 17: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/17.jpg)
Aggiungiamo il colore…
![Page 18: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/18.jpg)
Usiamolo…
![Page 19: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/19.jpg)
Semplifichiamo ancora
55
32 2
![Page 20: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/20.jpg)
Cosa rappresentano?
Sequenza 1: B N B N B 5N 5N B 3N B 2B N 2B
B (bianco) N (nero)
Sequenza 2: 5N N 3B N N 3B N N 3B N 5NSequenza 3: B 3N B B N B N B B 3N B B N B N B B N B N B
![Page 21: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/21.jpg)
Altri punti di vistaProva a far muovere CodyRoby sulla scacchiera per andare a colorare i quadretti
![Page 22: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/22.jpg)
Altri punti di vistaL’artista di Code.org si muove sullo schermo per tracciare disegni riferiti al suo punto di vista
![Page 23: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/23.jpg)
Altri punti di vistaI personaggi di Scratch si portano dietro una penna colorata che possono abbassare per lasciare una traccia quando si spostano
![Page 24: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/24.jpg)
Grafica vettoriale
Bitmap: immagine rappresentata come sequenza dei codici dei colori da assegnare ad ogni pixel
Grafica vettoriale: immagine descritta attraverso la costruzione di forme geometriche
![Page 25: Pixel art](https://reader033.fdocumenti.com/reader033/viewer/2022052116/58997dda1a28abb97c8b4733/html5/thumbnails/25.jpg)
Grafica vettorialeFormato svg (simple vector graphics)
Inkscape