​

//déclarer la variable qui va contenir l'image

var img;

var img2; 

// déclarer la variable qui va faire défiler l'image de haut en bas

var imageY = 0; 

// choisir la taille des pixels à la base

var taillePixel = 2;

​

// pré-chargement de l'image, l'image doit se trouver dans le dossier assets

function preload() {

  // image qu'on veut pixeliser

  img = loadImage('assets/sussex-rvb-422x410.jpg');

  // image pour la grille

  img2 = loadImage('assets/les-premiers-oeufs-sexes-arrivent-magasin.jpg');

}

​

function setup() {

  createCanvas(400, 400);

  noStroke();

​

}

​

function draw() {

  // charger les pixels de l'image qu'on veut pixelliser 

  img.loadPixels();

​

  // construction de la grille 

  var tileCountX = img2.width/20;

  var tileCountY = img2.height/20;

  // Calcul du nombre d'images dans la grille

  var stepX = width / tileCountX;

  var stepY = height / tileCountY;

  // création de la grille

  for (var gridY = 0; gridY < height; gridY += stepY) { 

    for (var gridX = 0; gridX < width; gridX += stepX){

      // affiche de l'image dans la grille

      image(img2, gridX, gridY, stepX, stepY);

    }

  }

  // pixeliser l'image et l'animer 

  // on passe sur chaque pixel de l'image 

  for(var x = 0; x < img.width; x+=taillePixel){

    for(y = 0; y < img.width; y+=taillePixel){

      // on récupère la couleur du pixels

      var pix = img.get(x, y);

      // on rempli la forme avec la couleur du pixels + on fait varier cette couleur suivant la position de la souris

      fill(pix);

       pix[3] = 260;

      // lancer un dé

      var randomPixel = int(random(10));

      if(randomPixel == 1){

        fill(255, 10);

      }

      else{

        // on rempli la forme avec la couleur du pixels + on fait varier cette couleur suivant la position de la souris

        fill(pix);

      }

      // on redessine le pixel

      rect(x, y + imageY, taillePixel, taillePixel);

    }

  }

  // on utilise la variable imageY pour faire défiler l'image de haut en bas. 

  if(imageY < width){

    // modifier le chiffre en 5 pour choisir la vitesse de défilement 

    //Plus ce chiffre est élevé plus ça va vite

    imageY = imageY + 8; 

  }

  // quand l'image disparait en bas, elle réaparait en haut

  else{

    imageY = -400;

  }

  // plus l'image défile plus elle se pixellise 

  // changer 0.1 en un autre chiffre pour changer la vitesse de pixellisation. Plus ce chiffre est élevé plus ça va vite

  taillePixel = taillePixel + 0.01;

}

​

// fonction qui s'exécute quand une touche est relâchée

function keyReleased() {

  // appuyer sur "s" permet d'enregistrer l'image

  if (key == 's' || key == 'S')  {

    saveCanvas(year()+month()+day()+'-'+hour()+ minute() + second() +'_pixels'+ '.jpg');

  }   

}