​

var img;

// taille des pixels 

var pixelSize= 5; 

var posX; 

var posY; 

​

// chargement de l'image, l'image doit être dans le dossier assets

function preload() {

  img = loadImage('assets/cyborg-manifesto.jpg');

}

​

function setup() {

  createCanvas(600, 600);

  frameRate(6); 

  imageMode(CENTER);

  noStroke();

  posX = random(width);

  posY = random(height);

​

}

​

function draw() {

  background(255);

  // chargement des pixels de l'image

  img.loadPixels();

  // on passe sur tous les pixels de l'image

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

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

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

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

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

      fill(pix);

      // on redessine le pixel

      ellipse(x, y, pixelSize, pixelSize); 

    }

  }

}

​

// 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() +'_grille'+ '.jpg');

  } 

  // appuyer sur effacer permet d'effacer tout

  if (keyCode == DELETE || keyCode == BACKSPACE){

    background(255);

  }   

}