Les images

p5.js permet de charger les formats suivants : jpg, gif, png & svg

Plusieurs étapes sont nécessaires pour charger une image dans p5.js
_ Placer l’image dans le dossier du fichier sketch.js
_ Créer une variable qui stocke l’image img par exemple
_ Pré-charger l’image dans la variable à l’aide de loadImage dans une fonction preload()

Une fois ces étapes effectuées il est possible de placer l’image dans l’animation : image(img, 0, 0);
La fonction image comporte 3 paramètres : l’image à charger, ses coordonnées en x et en y.

var img;
function preload() {
img = loadImage("soudure.jpg");
}
function setup() {
createCanvas(800, 600);
}
function draw() {
image(img, 0, 0);
}

Deux paramètres optionnels permettent de redimensionner l’image.

image(img, 0, 0, 200, 200);

L’image obtenue est carrée mais déformée. Afin de pallier ce problème il est nécessaire de procéder ainsi :

var img;
function preload() {
img = loadImage("soudure.jpg");
}
function setup() {
createCanvas(800, 600);
}
function draw() {
    var aspect = img.height / img.width;
    var imageWidth = 200;
    var imageHeight = imageWidth * aspect;
image(img, 0, 0, imageWidth, imageHeight);
}

Remplacer imageWidth = 200; par imageWidth = mouseX;