Catégories
p5.js Programmation

Grand canvas avec p5.js editor

Un grand canvas quand même visible dans le Preview de p5.js

L’éditeur en ligne de p5.js permet de travailler sur son code dans la partie gauche de la fenêtre et le résultat s’affiche à droite dans la partie Preview. Ca fonctionne bien pour des canvas de taille raisonnable, qui tiennent dans l’espace disponible, mais lorsqu’il est nécessaire d’utiliser un grand canvas, par exemple pour générer des grandes images ou une vidéo Full HD, alors l’espace Preview ne montre qu’une partie du résulat.

Une solution consiste à modifier dynamiquement la taille de l’affichage du canvas dans la fenêtre.

L’exemple ci dessous montre le code à rajouter dans la fonction setup après l’appel à createCanvas(). Ajuster la valeur de scalePreview à votre convenance.

function setup() {

  createCanvas(1080, 1920);

  // Reduce size of preview
  let scalePreview = 0.25;
  let cnv = document.getElementById('defaultCanvas0');
  cnv.style.width = round(width * scalePreview) + "px";
  cnv.style.height = round(height * scalePreview) + "px";
}

Résultat dans l’éditeur en ligne:
https://editor.p5js.org/pierrerossel/sketches/jlMp9nqpF