Les images

En informatique une image est un assemblage d'éléments appelés pixels.

Chacun d'entre eux est remplis d'une couleur et ensemble ils forment l'image.

Plus la taille d'un pixel est petit plus l'image sera précise
Cette image a pour dimensions 408x320= 130560 pixels

On peut voir cette image comme un "tableau de pixels" dont les dimensions sont: 408 pixels dans la largeur et 320 pixels dans la hauteur.

Chaque pixel de cette image est remplis d'une couleur (r,v,b,a) où r,v et b sont des nombres entiers compris entre 0 et 255 ( les composantes rouges, vertes et bleues que l'on a déjà utilisées) et a est la transparence qui varie aussi entre 0 et 255.

Un fichier image contient donc les informations suivantes: la taille de l'image et les couleurs de tous les pixels qui la compose.

Partie 1:

Faire afficher une image dans le canvas

Explication du programme
  • On a déclaré une variable img
  • On rajouté une fonction preload() pour charger l'image dans img avec l'instruction loadImage("data/nom_complet_de_l'image")
  • Dans le setup on a créé un canvas de 500x400
  • Dans le draw on fait afficher l'image avec l'instruction image(nom_de_l'image,x,y); où x et y sont les coordonnées du coin supérieur gauche de l'image
  • On peut, en rajoutant deux paramètres à l'instruction image, décider de la taille de l'image à afficher:
    image(nom_de_l'image,x,y,largeur,hauteur);
  • Essayez avec image(img,100,100,200,150);
    • Attention : n'oubliez pas d'enregistrer tout changement avant d'actualiser la page web ! !

    Travail à réaliser :

    En allant chercher quatre images libres de droits sur internet (attention a prendre des images de "petite taille" ou capturer les avec l'outil capture directement sur le site), par exemple sur pixabay , réaliser un programme qui donne :

    Partie 2 :

    Utiliser des fonctions déjà présentes dans P5js

    L'instruction : tint(r,v,b) permet de teinter l'image avec une couleur prédéfinie.
    Essayez d'autres couleurs sur l'exemple ci-dessous


    Travail à réaliser :


    Dans Processing3, en mode p5js, réaliser un programme qui donne le rendu ci-dessous:
  • La taille du canvas est de 408x320
  • Les images sont de largeur: 102 et de hauteur : 80
  • On a utilisé : tint(random(255),random(255),random(255));
  • Comme vous le savez, le draw s'exécute 60 fois par seconde, on peut modifier cela avec une instruction à placer dans le setup : frameRate(1);, ce qui a pour effet d'obliger le draw à s'exécuter 1 seule fois par seconde
  • Défi : Expliquez ce bout de code

    • Utiliser des filtres

    L'instruction : filter(); permet d'appliquer des filtres sur l'image.
    Comme dans l'exemple ci-dessous :
    Essayez avec les filtres suivant :

    Travail à réaliser :


    Nous allons réaliser un programme qui permet d'afficher une image en y appliquant différents filtres avec des boutons !
    Pour cela :
  • Pour la création et l'utilisation de boutons dans la page web, il faut importer la librairie p5.dom.js.
    Cela se fait dans l'onglet Sketch:importer une librairie/p5.dom. Voir
  • Glissez-déposez une image dans le sketch
  • Ecrire le code ci-contre et testez-le
  • Rajoutez ce qu'il faut (il n'y a rien à écrire dans le draw) pour pouvoir appliquer tous les filtres cités plus haut.
    		•

    L'instruction blend() (mélange en français)


    Cette instruction permet de mélanger deux images avec des effets de transparences prédéfinis:
    Dans l'exemple ci-dessous, on affiche une image(img0) en fond et on mélange une seconde image avec l'instruction blend()

    Fonctionnement de l'instruction blend():
    Les différents modes possibles sont:Testez-les..

    Travail à réaliser :


    Avec Processing3 en mode P5js, réalisez un programme qui mélange au moins deux images en vous inspirant de l'exemple ci-dessus (ici aussi il n'y a rien à écrire dans le draw).
    De plus, en rajoutant l'instruction saveCanvas(); à la fin du setup (après vos instructions), vous pourrez enregistrer l'image créée.
    ( tip-top non ?)

    On peut imaginer pour un projet, un programme qui regroupe filtres et teintes avec des boutons et ...