Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pixel art

70,950 views

Published on

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/)

Published in: Education
  • ho iniziato lo scorso anno con una classe seconda con questi esercizi, ora i miei alunni in terza sono bravissimi. Hanno imparato a scrivere codici complessi, sono sempre più motivati è appassionati. Grazie prof. anche i genitori si sono appassionati, ormai è diventata una sfida a chi la fa più complessa...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Pixel art

  1. 1. Pixel Art Pensiero computazionale Grafica digitale CodeMOOC compie un anno codemooc.org alessandro.bogliolo@uniurb.it FotodiAlfonsinaCinziaTroisi 25 gennaio 2017
  2. 2. Convenzioni Dimensione della griglia: 3x3 Posizione iniziale: (A,1) A B C 1 2 3 Prepariamo il foglio… Quadretti pieni o vuoti
  3. 3. Spostati a destraA B C 1 2 3 Definiamo le istruzioni…
  4. 4. Colora il quadrettoA B C 1 2 3 Definiamo le istruzioni…
  5. 5. Spostati a destraA B C 1 2 3 Definiamo le istruzioni…
  6. 6. Spostati sottoA B C 1 2 3 Definiamo le istruzioni…
  7. 7. Spostati a sinistraA B C 1 2 3 Definiamo le istruzioni…
  8. 8. A B C 1 2 3 Proviamo a disegnare…
  9. 9. A B C 1 2 3 Proviamo a disegnare…
  10. 10. A B C 1 2 3 Proviamo a disegnare…
  11. 11. A B C 1 2 3 Proviamo a disegnare… https://studio.code.org/unplugged/unplug3.pdf
  12. 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. 13. A B C 1 2 3 Si può semplificare? Convenzioni Passa al quadretto successivo
  14. 14. A B C 1 2 3 Si può semplificare? Convenzioni Colora il quadretto e passa a quello successivo
  15. 15. A B C 1 2 3 Il nuovo codice… Convenzioni Colora il quadretto e passa a quello successivo
  16. 16. Usiamolo…
  17. 17. Aggiungiamo il colore…
  18. 18. Usiamolo…
  19. 19. Semplifichiamo ancora 5 5 3 2 2
  20. 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. 21. Altri punti di vista Prova a far muovere CodyRoby sulla scacchiera per andare a colorare i quadretti
  22. 22. Altri punti di vista L’artista di Code.org si muove sullo schermo per tracciare disegni riferiti al suo punto di vista
  23. 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. 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. 25. Grafica vettoriale Formato svg (simple vector graphics) Inkscape

×