Enregistrer le canvas comme une image

30/3/2020 ☼ save ☼ image ☼ p5js

Niveau : ★★☆☆☆

Voici l’exemple à étudier et à travailler dans l’éditeur en ligne de p5.js. Les commentaires dans le code permettent de suivre les différentes étapes.

L’exemple ici permet d’enregistrer et de télécharger le canvas comme une image sur votre ordinateur.

Il est important de noter que l’image sauvegardée sera de la taille du canvas. Soit sa taille est précisée comme ici avec createCanvas(550, 550); soit la taille du canvas correspond à la taille de la fenêtre du navigateur avec createCanvas(windowWidth, windowHeight);.

Le sketch

(Déplacer la souris à l’intérieur du skect. L’axe x permet de changer la taille. L’axe y le nombre de lignes. La touche “s” permet d’enregistrer une image)

Le code (vous pouvez le copier et le coller dans l’éditeur de p5.js)

let ColorCercle = 0;

function setup() {
  createCanvas(550, 550);
  strokeCap(SQUARE);

  ColorCercle = random(255);
}

function draw() {
  background("#f1e7b6");//couleur du fond
  
  stroke(ColorCercle);//variable de la couleur des lignes
  
  /*
  Exemple d'interaction provenant du livre Generative Design : http://www.generative-gestaltung.de/2/
  */
  translate(width / 2, height / 2);

  var circleResolution = int(map(mouseY, 0, height, 2, 80));
  var radius = mouseX - width / 2;
  var angle = TAU / circleResolution;

  strokeWeight(mouseY / 20);

  for (var i = 0; i <= circleResolution; i++) {
    var x = cos(angle * i) * radius;
    var y = sin(angle * i) * radius;
    line(0, 0, x, y);
  }
    /*
  Exemple d'interaction provenant du livre Generative Design : http://www.generative-gestaltung.de/2/
  */
  
  //la couleur change de façon aléatoire
  if (frameCount % 20 == 0) {
    ColorCercle = color(random(255), random(255), random(255));
  }

}

les différents codes pour sauvegarder le canvas

Il s’agit ici du sujet de l’exercice. Le sketch étant surtout là pour illustrer la sauvegarde du canvas.

Il est bien sûr possible de n’utiliser qu’un seul de ces trois code pour sauvegarder le canvas puisque les trois exemples font exactement la même chose (seule la méthode change : click, touche clavier et touche clavier définie).

avec le click de la souris

function mouseClicked() {
  save('image.png');
}

avec n’importe quelle touche du clavier

function keyPressed() {
  save('image.png');
}

avec une touche précise du clavier (la touche “s”)

function keyPressed() {
  if (key == 's' || key == 'S') {
    save('image.png');
  }
}

Quelques exemples d’images tirées du canvas