1NSI : p5.js - Images

Procédure pour Ajouter une Image au Canevas

Ajouter une image au canevas peut se faire en \(3\) étapes:

1°) Je téléverse l'image souhaitée dans https://editor.p5js.org (un nouveau fichier doit être visible dans la partie editeur de fichiers (à gauche). Idéalement, l'image doit être déjà à la bonne taille, pour simplifier. Par exemple: utiliser l'une de ces deux images ci-dessous, qui ont une taille de \(64\)x\(40\) px

2°) J'initialise une variable img avec loadImage(), pour pouvoir la manipuler dans p5.js
3°) J'insère l'image dans le canevas avec image(img, x, y)

Téléverser un fichier image sur p5.js webeditor

• Étendre le menu Latéral de gauche (en cliquant sur la flèche vers la droite) :

• Étendre le menu vertical, puis choisir Téléverser votre image :

• Vérifier que l'image a bien été téléversée/téléchargée dans https://editor.p5js.org (ici logo-dvd.png) :

Initialiser une variable img avec loadImage(), puis insérer l'image avec image(img,x,y)

où :

• img = loadImage(chaineContenantNomDeLimage); initialise la variable img pour manipuler l'image dans le code javascript
• image(img, x, y); affiche l'image dont le nom est stocké dans la variable img, dont le coin supérieur-gauche est le point de coordonnées (x,y)

Animer et Faire rebondir l'Image DVD

Animer et Faire rebondir l'image DVD sur les côtés du canevas (au lieu d'un rectangle)