Code B1

Appearance

Exporter ​

Exporter votre canvas ​

Dans P5js, un peu comme dans Processing, vous pouvez exporter le canvas sous forme de fichier JPG ou PNG par exemple. Le tout est de savoir formuler à quel moment (quand on presse une touche? ou toutes les 20 secondes? ou à 16 heures précises? etc..) et de générer des noms de fichiers différents pour éviter qu'ils ne s'écrasent les uns les autres.

On utilise parfois le code ci-dessous pour exporter une image lorsque je presse la touche "s" (à ne pas mettre dans le draw!!):

javascript
// Cette fonction doit se mettre au même niveau que le setup ou le draw
function keyTyped() {
  if (key === 's') {
    save("doeJohn-"+hour()+"-"+minute()+"-"+second()+".jpg");
  } 
}

Cette façon de faire ne fonctionnera que si la condition peut être vérifiée et qu'une boucle est donc active.

Nous intégrons également quelques éléments variables au nom du fichier afin de ne pas écraser les précédents. Evitez les fonctions du type save("nomPrenom-option.png");

Ce qui devrait au final donner une chaîne de caractère du type doeJohn-10-22-56.jpg et a toutes les chances d'être différent de vos autres fichiers.

A priori, tous vos fichiers sauvés vont se retrouver dans votre dossier Téléchargements.

Export SVG ​

Solution pratique et efficace pour exporter votre sketch au format SVG. Ressources originales (merci à eux!) :

Remplacez l'entête du fichier HTML de votre sketch par celle-ci. Faites appel à nous pour ceci si nécessaire. (L'export SVG ne fonctionnera qu'en utilisant la version 1.4.1 de P5.js)

javascript
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
    <script src="https://unpkg.com/p5.js-svg@1.3.1"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
</head>

Vous trouverez un exemple ici

Ajoutez ensuite le paramètre "SVG" à votre fonction createCanvas(), comme ceci :

javascript
function setup() {
    createCanvas(100, 100, SVG);
}

Sauvez ensuite votre SVG, comme vous le feriez pour un jpg, mais avec l'extension svg. Placez cette fonction hors de toute boucle dans votre code bien évidemment..

javascript
save("monfichier.svg");

Le fichier généré pourrait très bien être ensuite exploité dans Illustrator ou Inkscape...