Avant de pouvoir travailler sur ces activités, il est nécessaire d'avoir étudié les activités consacrées à p5.js. Si ce n'est pas le cas, rendez-vous ici.
Pour des raisons que je n'aborderai ici, il est nécessaire d'utiliser le navigateur Firefox de chez Mozilla pour tester les exemples proposés dans ces activités.
Complétez le fichier "index.html" avec le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Les images avec p5.js</title>
<script src="p5.min.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
Ce fichier ne sera plus modifié dans la suite de ces activités. A chaque fois que vous aurez à créer un nouvel exemple, il vous suffira de "copier-coller" le dossier "img_0" (en modifiant le nom).
Saisissez, testez et analysez ce code :
script.js
var img;
function preload() {
img=loadImage("tux.jpg");
}
function setup() {
createCanvas(208,242);
}
function draw() {
background(240,240,240);
image (img,0,0);
}
Nous retrouvons les fonctions draw et setup déjà vu précédement. Petite nouveauté, la fonction preload qui sera exécutée avant la fonction setup. img=loadImage("tux.jpg"); permet de créer un objet img et de "placer" l'image "tux" dans cet objet.
nous utilisons la fonction "image" qui permet d'afficher l'image. Cette fonction prend 3 paramètres :
Créez un programme qui permettra de placer l'image "tux.jpg" (dimensions : 208x242) au milieu de la fenêtre (on prendra une fenêtre (canvas) de 400x400)).
Cette image ("tux.jpg") est une image dite matricielle (aussi appelée bitmap). Les images matricielles sont composées de points appelés pixels. Chaque pixel possède 3 canaux : un rouge, un vert et un bleu (nous aurons l'occasion de revenir sur ce point un peu plus loin). Afin d'en savoir plus sur les images matricielles, je vous invite à lire l'article "Wikipédia" consacré à ce sujet ici. Notez qu'il existe un autre type d'images : les images vectorielles (voir les activités consacrées aux images vectorielles ici).
Il est possible de colorer votre image avec la fonction "tint". La fonction "tint" prend 3 paramètres : le canal rouge, le canal vert, le canal bleu
Saisissez, analysez et testez ce programme
var img;
function preload() {
img=loadImage("tux.jpg");
}
function setup() {
createCanvas(208,242);
}
function draw() {
background(240,240,240);
tint(255,0,0);
image (img,0,0);
}
Sachant que la fonction "noTint" (cette fonction ne prend aucun paramètre) permet d'annuler les effets de la fonction "tint", afficher, côte à côte 2 images : une colorée en vert et une normale.
Il est aussi possible d'appliquer des filtres (comme avec un logiciel de retouche d'image (Gimp par exemple)). Nous n'allons pas passer en revue tous les filtres proposés par p5js.
Si vous voulez en savoir plus sur les filtres dans p5js, je vous invite à consulter la documentation officielle : https://p5js.org/reference/#/p5/filter.
Saisissez, analysez et testez ce programme
var img;
function preload() {
img=loadImage("tux.jpg");
}
function setup() {
createCanvas(420,242);
}
function draw(){
image (img,0,0);
filter(BLUR,3);
image (img,209,0);
}
La fonction "filtre" prend ici 2 paramètres : le type de filtre (ici BLUR) et l'intensité du filtre (ici 3).
Vous aurez sans doute remarqué que le filtre s'applique aux images qui ont déjà été affichées dans la fenêtre. Ici, le filtre s'applique à la première image (coordonnées 0,0) et pas à la seconde (coordonnées 209,0).
Écrivez un programme permettant d'obtenir ceci :