Catégories
p5.js Processing Programmation

Understand and play with translate() and rotate()

p5.js and Processing both have a translate() and rotate() function that basically allows to change default position and orientation of axis.

The p5.js sketch available below allows to play with their parameters and immediately see the result as in this demonstration video.

Catégories
JavaScript p5.js Programmation

Animation de lettres à la Solitaire avec p5.js

https://editor.p5js.org/pierrerossel/sketches/_-ax5h2p4

Catégories
JavaScript p5.js Programmation

Exporter un sketch p5.js en vidéo

Cet article montre comment utiliser p5.js pour générer une vidéo au format webm.

Le taille de la vidéo est celle du canvas. Pour créer une vidéo dans une taille qui est plus grande que la place disponible dans l’espace Preview de l’éditeur en ligne de p5.js, voir l’article Grand canvas avec p5.js editor.

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.