​

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

  }

​

}

​

​

​

/*

3 exemples pour sauvegarder le canvas et télécharger le canvas au format png.

​

Il s'agit ici du sujet de l'exercice. Le reste étant surtout là pour faire un sketch permettant d'illustrer la sauvegarde.

​

Il est bien sûr possible de n'utiliser qu'un seul de ces trois exemples 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).

*/

​

//l'image est enregistrée lorsque l'on click dans le canvas

/*

function mouseClicked() {

  save('image.png');

}

*/

​

//l'image est enregistrée slorsque l'on appuie sur nimporte quelle touche du clavier

/*

function keyPressed() {

  save('image.png');

}

*/

​

//l'image est enregistrée lorsque l'on appuie sur la touche précisée. Pour connaitre les keycode des touches du clavier : http://keycode.info/

function keyPressed() {

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

    save('image.png');

  }

}

​

​

​