Je laisse cet article pour l'instant mais cette partie va être réorganisée

Afficher une image provenant d'un fichier

Il s'agit d'afficher cette image  : . Le nom du fichier est : crusader_idle_60000.png

Pour cela, nous allons utiliser la fonction loadImage() (chargement d'une image) en lui donnant le nom du fichier sous la forme d'un texte (String)

on écrira donc loadImage("crusader_idle_60000.png")

Les guillements sont indispensable sinon P5JS "pensera" qu'il agit d'une variable qui s'appelle : crusader_idle_60000.png

Le résultat sera une imape (un nouveau type de variable) que l'on mettra dans une nouvelle variable.

Ensuite, pour afficher l'image se trouvant dans notre variable, on utilisera la fonction image(1,2,3) pour l'afficher

• 1 ; l'image à afficher
• 2 : la position en x
• 3 : la position en y

On aura :             (l'importation de fichiers ne fonctionne pas dans le petit editeur de code que j'ai utilisé jusqu'ici !)

let monImage; // EN : myImage

function setup()
{
createCanvas(300,300);
monImage=loadImage("crusader_idle_60000.png");
image(monImage,10,10);
}
 

Pour pouvoir déplacer l'image avec la souris : (voir le principe ici)

let monImage; // EN : myImage

function setup()
{
createCanvas(300,300);
monImage=loadImage("crusader_idle_60000.png");
}

function draw()
{
background(0);
image(monImage,mouseX,mouseY);
}

Ce qui donne le résultat suivant :

Vous remarquerez que la position de l'image correspond au premier pixel (transparent dans ce cas) donc en haut à gauche de l'image.

Pour que la position corresponde au centre de l'image, il suffit d'ajouter la fonction imageMode(CENTER) dans le setup()

let monImage; // EN : myImage

function setup()
{
createCanvas(300,300);
monImage=loadImage("crusader_idle_60000.png");
imageMode(CENTER); // le positionnement dans la fonction image() passe au centre de l'image
}

function draw()
{
background(0);
image(monImage,mouseX,mouseY);
}

Ca donne :