# data[].attributes.headline
Riproduzione di immagini con chiodini quadrati

# data[].attributes.subject
Riproduzione di immagini con chiodini quadrati

# data[].attributes.headline
Psicomotricità e percezione dello spazio

# data[].attributes.subject
Psicomotricità e percezione dello spazio

# data[].attributes.body
Ttrova la strada per uscire evitando gli ostacoli

# data[].attributes.body
Obiettivo: Alla scoperta della pixelart!

Prima Elementare

Gli elementi fondamentali: punti, linee, quadrati

Realizzazione di un ritmo sulla stessa linea: figure e colori

Ritmo su linee diverse

Cornicette stilizzate semplici + complesse (cercare di creare figure senza tagliare i quadretti)

Introduzione del concetto di griglia: si evidenzia un punto sul foglio, devono contare tot quadretti in basso, a destra, in alto e a sinistra per chiudere la griglia.

Seconda Elementare

Percorsi sulla griglia: il topolino che deve raggiungere il formaggio, mappa dei pirati o qualsiasi tipo di personaggio che si collega ad una materia scolastica.

Coordinate con battaglia navale

Creazione dell'immagine in pixelart alla Lim: l'insegnante detta le coordinate e nello stesso tempo colora con loro la lim così i bambini vedono in diretta le modifiche > usare ZaplyCode.

Simmetrie: colorare la metà dell'immagine mancante sulla griglia

Terza Elementare

Riprendere il concetto delle coordinate

A coppie si dettano i comandi per creare immagini semplici di pixelart. Un bambino ha l'immagine e l'altro la griglia vuota.

Argomento Mosaico per introdurre il concetto di codice: mosaico di classe grande dove ogni bambino ha una tessera colorata. L'insegnate da le coordinate e ogni bambino incolla il suo quadratino.

Dal grande mosaico passiamo al piccolo. Ogni bambino riceve il suo kit: quadratini ritagliati colorati, griglia bianca dove incollare i quadratini, codice per incollare i quadratini nel posto corretto.

# data[].attributes.attachment_link.description
ZaplyCode è uno strumento di programmazione visuale per coinvolgere i bambini nel fantastico mondo del Coding.

# data[].attributes.body
Cosa sono i Pixel?

I bimbi raccolgono tante foglie (dalle foglie semplici) dal giardino della scuola.

In classe l'insegnante fa una foto della foglia e la proietta sulla Lim. Facendo sempre più lo zoom sull'immagine dello schermo, i bimbi si accorgono che è composta da tantissimi pixel che creano l'immagine intera.

Definizione di Pixel

La Pixel Art è una forma d’arte digitale che utilizza piccoli blocchi di colore, chiamati pixel, per creare immagini stilizzate e schematiche.

Il termine "pixel" deriva dall'unione di "picture" e "element" (elemento d'immagine).

Griglia e immagini

Ogni bimbo prende una foglia raccolta dal giardino, poi su un foglio di carta disegna la foglia dal vero e la colora con varie tecniche a scelta (pennarelli/pastelli/pastelli a cera/temperelli) o si traccia il semplice contorno

L'insegnante distribuisce cartellette trasparenti con sopra il disegno di una griglia quadrettata

I bimbi inseriscono il loro disegno all'interno della griglia quadrettata con quadretti da 3x3cm. Obiettivo: farli rendere conto della potenzialità di trasformare un'illustrazione in un'opera di pixel art. In forma semplificata.

# data[].attributes.body
Si passa in Palestra

Si crea una griglia con lo scotch con quadrati abbastanza grandi.

Il primo gruppo lavorerà sulla griglia sul pavimento, il secondo gruppo riporta il percorso sulla griglia cartacea.

-I bambini in classe preparano i quadrati colorati, senza sapere lo scopo finale.

Il gruppo che lavora sulla griglia ha a disposizione dei cartoncini colorati da posizionare sul pavimento.

L'insegnante da le indicazioni e a turno i bambini li posizionano, le indicazioni sono date sottoforma di passi. > verrà fuori un'immagine.

Il gruppo che lavora sulla griglia cartacea riceverà le stesse indicazioni e dovrà colorare i quadratini sul foglio. > viene fuori la stessa immagine?

lavoro sulle coordinate

# data[].attributes.body
Cos'è la Pixel Art

La Pixel Art è una forma d’arte digitale che utilizza piccoli blocchi di colore, chiamati pixel, per creare immagini stilizzate e schematiche.

Nasce ufficialmente negli anni ‘70 e ‘80 con l’avvento dei primi videogiochi e dei sistemi informatici a bassa risoluzione, ma la sua logica di costruzione può essere ricondotta a tecniche artistiche molto più antiche, come il mosaico.

Il termine "pixel" deriva dall'unione di "picture" e "element" (elemento d'immagine)

La Pixel Art è stata utilizzata nei primi videogiochi come Pong (1972), Space Invaders (1978) e Pac-Man (1980)

Con l’avanzamento della tecnologia, la grafica ha guadagnato più dettagli, ma la Pixel Art è rimasta un’estetica ricercata in ambito artistico

L'influenza del minimalismo nell'arte moderna ha ulteriormente rafforzato il valore estetico della Pixel Art come linguaggio visivo indipendente

# data[].attributes.headline
Pensiero computazionale e percorso spaziale

# data[].attributes.subject
Pensiero computazionale e percorso spaziale

# data[].attributes.body
Attività di coding (in aula dedicata): seguire un percorso osservando le indicazioni e successivamente riprodurre lo stesso sul quaderno.

# data[].attributes.headline
Pensiero computazionale e percorso "natalizio"

# data[].attributes.subject
Pensiero computazionale e percorso "natalizio"

# data[].attributes.body
La renna Rudolph indica la strada a Babbo Natale: su un grande lenzuolo quadrettato un bambino "renna" da indicazioni al compagno "Babbo Natale" posizionando frecce per dare le direzioni.

# data[].attributes.body
Creazione di un'immagine di base (es. babbo natale, pinguini, renne con slitta, etc.)

Poi ogni giorno si colorano 2/3 caselle a turno

Prima del 25 si ottiene così un calendario completo, da appendere alla porta della classe o accanto alla lavagna

# data[].attributes.body
Riproduzione di un disegno seguendo un modello oppure mediante l'utilizzo di codici

# data[].attributes.attachment_link.description
Piskel, free online sprite editor. A simple web-based tool for Spriting and Pixel art. Create pixel art, game sprites and animated GIFs. Free and open-source.

# data[].attributes.attachment_link.description
Pixilart, free online drawing editor and social platform for everyone. Create game sprites, make pixel art, animated GIFs, share artwork and socialize online.

# data[].attributes.attachment_link.readable_text
FAQ

What is "photo2pixel"?

photo2pixel is an online image to pixel style(8-bit) tool that can generate beautiful pixel art paintings within seconds. You can try different combinations of style options to achieve the best result.

Why photo2pixel's result is better than its alternatives?

Pixel-style images generally consist of some highly abstract meaningful regions with clear boundaries and smooth and coherent lines; in addition, unlike the continuous changes in brightness of natural images, pixel-style images have abrupt brightness and high contrast. Pixel style rendering algorithm usually solves the following two key problems: first, how to divide meaningful regions from the original image; second, how to obtain smooth, coherent and clear region boundaries. the photo2pixel's algorithm achieves SOTA in both of these two problems. Go to photo2pixel github project to see algorithm details.

Why photo2pixel is fast?

All calculation was done within the browser, which also means that your data will never be uploaded to the server.

Why pixel art (8-Bit) becomes popular?

Pixel art style was first appeared in 8-bit video games. Due to the limitation of computer memory and the display color, only a small number of pixels can be used to present content. With the increase of memory capacity and screen resolution, the limitation of memory and display color is no longer a problem, pixel art style has gradually evolved into a unique creative style.

Gallery

The Middle-Ages Sword

Famous Painting Tuned

City Street with Light

NASA Moon Landing

Japan Mount Fuji

© 2024 Copyright: photo2pixel.co

# data[].attributes.attachment_link.description
photo2pixel is an online image to pixel style(8-bit) tool that can generate beautiful pixel art paintings within seconds. You can try different combinations of style options to achieve the best result.

# data[].attributes.attachment_link.title
PixelMe : Convert your photo into pixelart.

# data[].attributes.attachment_link.description
PixelMe is an AI-powered pixel art generator, perfect for creating pixel art from photos and illustrations. Ideal for bead artists, game creators, and digital designers. Try it for free today!

# data[].attributes.attachment_link.readable_text
Documentation

Quick usage

To use the quick default configuration you need an element from where to draw the image and canvas element with the id pixelitcanvas. Then load the pixelit.js script and apply it on an image.

<img src="assets/sky.jpg"  id="pixelitimg" alt="">
<canvas id="pixelitcanvas"></canvas>
<script src="dist/pixelit.js"></script>
<script>
  //create object
  const px = new pixelit();
  px.draw().pixelate();
</script

Options

You can pass some options when creating the instance (you can alter them later using the api methods).

config = {
  to : elem, defaults to document.getElementById("pixelitcanvas")
  from : elem, defaults to document.getElementById("pixelitimg")
  scale : int from 0-50, defaults to 8
  palette : [[r,g,b]], defaults to a fixed palette
  maxHeight: int, defaults to null
  maxWidth: int, defaults to null
}

API

You can chain all methods together, beware that the order they are applied can change the final result.

Applying first the color palette and then the greyscale can give a slightlity different image.

.draw() draw to canvas from image source and resizes if max height or max width is reached

.hideFromImg() hides the from image element, is applied on object creation

.setDrawFrom(elem) elem to get the image to pixelate

.setDrawTo(elem) canvas elem to draw the image

.setFromImgSource(src) change the src from the image element

.setpalette(arr) sets the color palette to use, takes an array of rgb colors: [[int,int,int]], int from 0 to 255

.setMaxWidth(int) set canvas image maximum width, it can resize the output image, only used when .resizeImage() is applied

.setMaxHeight(int) set canvas image maximum height, it can resize the output image, max height overrides max width, only used when .resizeImage() is applied

.setScale(int) set pixelate scale [0...50]

.getpalette() returns array of current palette, can't be chained

.convertGrayscale() converts image to greyscale, apply only after .draw is called

.convertpalette() converts image with the defined color palette, apply only after .draw is called

.resizeImage() resizes the output image if bigger than the defined max Height or max Width

.pixelate() draws a pixelated version of the from image to the to canvas, , apply only after .draw is called

.saveImage() saves/downloads current image

# data[].attributes.attachment_link.description
To use the quick default configuration you need an element from where to draw the image and canvas element with the id pixelitcanvas. Then load the pixelit.js script and apply it on an image. //create object const px = new pixelit(); px.draw().pixelate(); </script You can pass some options when creating the instance (you can alter them later using the api methods).

# data[].attributes.body
Materie coinvolte: Arte, Geografia, Matematica, Italiano, Tecnologia

Obiettivo: conoscere la Lombardia

Tot. orario: 12h, 6 incontri da 2 ore

Conoscenze pregresse: configurazione fisica della regione, particolarità, confini, leggere le cartine geografiche e saper interpretare una legenda; dimestichezza con la griglia quadrata e le coordinate per muoversi nello spazio, creazione di opere semplici di pixel art.

Incontro 1

Partire dalla cartina fisica della Lombardia, posizionare su di essa la carta da lucido per ricalcare gli elementi fondamentali della cartina (confini, fiumi, laghi, ecc.) e colorare pianura, collina e montagna con tre colori diversi

Materiali: fogli di carta da lucido, cartina fisica della Lombardia

Incontro 2

Partire dalla cartina che hanno disegnato sulla carta da lucido; sovrapporre a questo disegno la griglia già preparata dalle insegnanti e creare i contorni secondo le regole della pixel art

Materiali: fogli di carta da lucido con griglia disegnata dalle maestre, dimensione di ogni quadretto 5mm

Incontro 3

Riportare i confini/contorni fatti sulla carta da lucido su una griglia di uguale dimensione su foglio bianco già predisposta dalla maestra

Materiali: fogli bianchi A3 con griglia disegnata dalle maestre, dimensione di ogni quadretto 5mm (come la griglia sul foglio da lucido della lezione precedente)

Incontro 4

Avendo come riferimento la cartina della regione iniziale (quella fisica con mari, monti, fiumi, ecc.) colorano i quadratini interni della regione con colori diversi: verde-pianura, giallo-colline, marrone-montagne, azzurro-laghi/fiumi

Materiali: foglio A3 della lezione precedente, pennarelli colorati

Incontro 5

Partendo dalla cartina con i quadratini colorati, i bambini creano un codice con le coordinate

Materiali: fogli bianchi

Incontro 6

Con l'utilizzo dei programmi Piskel oppure Zaplycode, i bambini possono ricreare le immagini della cartina come se fossero opere di pixel art

Materiali: cartine quadrettate colorate, creazione account su Zaplycode

# data[].attributes.headline
Applicazione Pixelart alle varie materie

# data[].attributes.subject
Applicazione Pixelart alle varie materie

# data[].attributes.attachment_link.description
Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations.

# data[].attributes.body
Costruzione del percorso di Arianna, Teseo e il Minotauro.