Coding, pixel art, pensiero computazionale e rappresentazione digitale delle immagini. Analizziamo la relazione tra questi concetti in occasione del primo compleanno di CodeMOOC (http://codemooc.org/)

1. Pixel Art
Pensiero computazionale
Grafica digitale
CodeMOOC compie un anno
codemooc.org
alessandro.bogliolo@uniurb.it
FotodiAlfonsinaCinziaTroisi
25 gennaio 2017

2. Convenzioni
Dimensione della griglia: 3x3
Posizione iniziale: (A,1)
A B C
1
2
3
Prepariamo il foglio…
Quadretti pieni o vuoti

3. Spostati a destraA B C
1
2
3
Definiamo le istruzioni…

4. Colora il quadrettoA B C
1
2
3
Definiamo le istruzioni…

5. Spostati a destraA B C
1
2
3
Definiamo le istruzioni…

6. Spostati sottoA B C
1
2
3
Definiamo le istruzioni…

7. Spostati a sinistraA B C
1
2
3
Definiamo le istruzioni…

8. A B C
1
2
3
Proviamo a disegnare…

9. A B C
1
2
3
Proviamo a disegnare…

10. A B C
1
2
3
Proviamo a disegnare…

11. A B C
1
2
3
Proviamo a disegnare…
https://studio.code.org/unplugged/unplug3.pdf

12. A B C
1
2
3
Si può semplificare?
Convenzioni
Quadretto successivo
Quando arrivi in fondo alla
riga ricomincia dal primo
quadretto della riga
successiva

13. A B C
1
2
3
Si può semplificare?
Convenzioni
Passa al quadretto
successivo

14. A B C
1
2
3
Si può semplificare?
Convenzioni
Colora il quadretto e passa a
quello successivo

15. A B C
1
2
3
Il nuovo codice…
Convenzioni
Colora il quadretto e passa a
quello successivo

16. Usiamolo…

17. Aggiungiamo il colore…

18. Usiamolo…

19. Semplifichiamo ancora
5
5
3
2 2

20. 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 5N
Sequenza 3: B 3N B B N B N B B 3N B B N B N B B N B N B

21. Altri punti di vista
Prova a far muovere CodyRoby sulla
scacchiera per andare a colorare i
quadretti

22. Altri punti di vista
L’artista di Code.org si muove sullo
schermo per tracciare disegni riferiti al
suo punto di vista

23. Altri punti di vista
I personaggi di Scratch si portano
dietro una penna colorata che possono
abbassare per lasciare una traccia
quando si spostano

24. 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

25. Grafica vettoriale
Formato svg (simple vector graphics)
Inkscape