Pixel art

25
Pixel Art Pensiero computazionale Grafica digitale CodeMOOC compie un anno codemooc.o rg alessandro.bogliolo@un iurb.it Foto di Alfonsina Cinzia Troi 25 gennaio 2017

Transcript of Pixel art

Page 1: Pixel art

Pixel Art Pensiero computazionale Grafica digitale

CodeMOOC compie un anno

codemooc.org

[email protected]

Foto

di A

lfons

ina

Cinz

ia T

roisi

25 gennaio 2017

Page 2: Pixel art

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

Spostati a destraA B C

1

2

3

Definiamo le istruzioni…

Page 4: Pixel art

Colora il quadrettoA B C

1

2

3

Definiamo le istruzioni…

Page 5: Pixel art

Spostati a destraA B C

1

2

3

Definiamo le istruzioni…

Page 6: Pixel art

Spostati sottoA B C

1

2

3

Definiamo le istruzioni…

Page 7: Pixel art

Spostati a sinistraA B C

1

2

3

Definiamo le istruzioni…

Page 8: Pixel art

A B C

1

2

3

Proviamo a disegnare…

Page 9: Pixel art

A B C

1

2

3

Proviamo a disegnare…

Page 10: Pixel art

A B C

1

2

3

Proviamo a disegnare…

Page 11: Pixel art

A B C

1

2

3

Proviamo a disegnare…

https://studio.code.org/unplugged/unplug3.pdf

Page 12: Pixel art

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

A B C

1

2

3

Si può semplificare? Convenzioni

Passa al quadretto successivo

Page 14: Pixel art

A B C

1

2

3

Si può semplificare? Convenzioni

Colora il quadretto e passa a quello successivo

Page 15: Pixel art

A B C

1

2

3

Il nuovo codice… Convenzioni

Colora il quadretto e passa a quello successivo

Page 16: Pixel art

Usiamolo…

Page 17: Pixel art

Aggiungiamo il colore…

Page 18: Pixel art

Usiamolo…

Page 19: Pixel art

Semplifichiamo ancora

55

32 2

Page 20: Pixel art

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

Altri punti di vistaProva a far muovere CodyRoby sulla scacchiera per andare a colorare i quadretti

Page 22: Pixel art

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

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

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

Grafica vettorialeFormato svg (simple vector graphics)

Inkscape