Travailler avec des images

Afficher une photo, un dessin scanné ou une texture dans un sketch se fait en deux temps : on dépose le fichier dans le sketch, puis on le charge dans le code. Cette page suit la syntaxe de p5.js 2.0.

Déposer l’image dans le sketch

Dans l’éditeur en ligne, les images doivent se trouver dans le dossier du sketch. Libre à vous d’organiser vos fichiers en sous-dossier. Mais faites attention à toujours noter vos noms de fichiers et chemins d’accès de la même manière. /images/icons/edit.jpg n’est pas égal à /images/icons/edit.jpeg ou /images/icons/edit.JPG Évitez également les espaces et caractères spéciaux: chat-noir.jpg plutôt que Chat noir été.JPG.

1. Cliquez sur la flèche (>) sous le bouton ▸ pour afficher les fichiers du sketch.

2. Cliquez sur ▾ à droite de Sketch Files, puis Upload file.

3. Choisissez votre image sur votre ordinateur et attendez qu’elle soit chargée.

4. Une fois dans votre dossier, vous pouvez l’utiliser.

Le principe…

Quand votre sketch utilise une image, il doit charger ce fichier. Ça prend un peu de temps (plus ou moins, en fonction du poids de votre image).

Si le programme essaie d’afficher l’image avant qu’elle ne soit totalement chargée, il plante. Il faut donc lui dire d’attendre. Pour ça, on utilise deux mots :

await veut dire « attends que ce soit arrivé avant de passer à la ligne suivante ». On le place juste devant loadImage().

async est une étiquette que l’on colle sur setup() pour prévenir : « attention, ici, il y a des moments où on attend ». Sans cette étiquette, JavaScript refuse d’utiliser await.

Afficher l’image

let img;

async function setup() {
  createCanvas(600, 600);
  img = await loadImage("assets/exemple.jpg"); // on attend que l'image arrive
}

function draw() {
  background(220);
  image(img, 0, 0); // l'image est là : on l'affiche en haut à gauche
}

image(img, x, y) dessine l’image avec son coin supérieur gauche en (x, y).

p5.js attend que setup() soit entièrement terminé avant de lancer draw(). Dans draw(), votre image est donc toujours prête.

À vous : faites en sorte que l’image suive la souris.

Redimensionner une image

On ajoute deux valeurs à image() : la largeur et la hauteur.

image(img, 0, 0, width / 2, height / 2); // l'image occupe le quart du canevas

Pour ne pas déformer l’image, on calcule la hauteur à partir de ses proportions. img.width et img.height donnent la taille d’origine du fichier :

let largeur = 300;
let hauteur = largeur * img.height / img.width;
image(img, 0, 0, largeur, hauteur);

Teinter une image

tint() colore l’image comme un filtre posé devant l’objectif. Il fonctionne comme fill() : rouge, vert, bleu, et une quatrième valeur pour l’opacité.

function draw() {
  background(0);
  tint(255, 0, 0, 128); // teinte rouge, opacité à 50 %
  image(img, 0, 0, width, height);
}

tint() s’applique à toutes les images dessinées après lui. Pour revenir à l’image normale, appelez noTint().

Charger plusieurs fichiers

On répète simplement la recette, une ligne par fichier. Cela marche aussi pour les polices (loadFont), les données (loadJSON), etc.

let fond, perso, police;

async function setup() {
  createCanvas(600, 600);
  fond = await loadImage("assets/fond.png");
  perso = await loadImage("assets/perso.png");
  police = await loadFont("assets/maPolice.ttf");
}

function draw() {
  image(fond, 0, 0);
  image(perso, mouseX, mouseY);
}

Les erreurs les plus fréquentes

Oublier await. La variable ne contient pas l’image, mais seulement le ticket du labo. image() ne sait pas quoi en faire.

Oublier async. Le navigateur affiche une erreur qui dit que await n’est autorisé que dans une fonction async.

Un nom de fichier qui ne correspond pas. Une majuscule, une extension (.jpg / .jpeg / .JPG) ou un dossier oublié, et p5.js ne trouve pas l’image. Comparez lettre par lettre avec le nom dans le dossier assets.

Utiliser preload(). Voir ci-dessous.

Et preload() ?

Vous tomberez sur de nombreux tutoriels (et d’anciennes versions de ce site) qui utilisent preload(). C’était la méthode de p5.js 1.x. Elle a été supprimée dans p5.js 2.0 : si vous l’utilisez, un message d’erreur vous invite à charger vos fichiers dans setup() avec async / await.

Avant — p5.js 1.x

function preload() {
  img = loadImage("assets/exemple.jpg");
}

function setup() {
  createCanvas(600, 600);
}

Maintenant — p5.js 2.0

async function setup() {
  createCanvas(600, 600);
  img = await loadImage("assets/exemple.jpg");
}

Pour adapter un vieux sketch, il suffit de déplacer les lignes de preload() dans setup(), d’ajouter await devant chaque load…() et async devant function setup().

Note

Si un sketch refuse async / await, vérifiez la version de p5.js indiquée dans le fichier index.html du sketch : elle doit commencer par 2.

Les formats d’image

• JPG : pour les photos et les images riches en couleurs. Pas de transparence.
• PNG : pour les dessins, les logos et tout ce qui a besoin de transparence (un personnage détouré, par exemple).
• GIF : pour les petites images animées.
• SVG : pour les images vectorielles. loadImage() les accepte, mais les transforme en pixels. Voir aussi Charger un fichier SVG.

---

En savoir plus

• Référence de loadImage()
• Référence de image()
• Référence de tint()