​

var img;

// définir l'espace entre les points

var stepSize = 40;

// taille des pixels 

var diameter= 30; 

var posX; 

var posY; 

​

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

function preload() {

  img = loadImage('assets/banquetalgo.jpg');

}

​

function setup() {

  createCanvas(600, 600);

  imageMode(CENTER);

  noStroke();

  posX = mouseX;

  posY = mouseY;

​

}

​

function mouseDragged(){

  // chargement des pixels de l'image

  img.loadPixels();

  var pix = img.get(mouseX, mouseY);

  fill(pix);

  ellipse(mouseX + stepSize / 2, mouseY + stepSize / 2, diameter, diameter);

}

​

function draw() {

​

}

​

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

  }   

}

​