p5.js : récupérer des images avec l’API Pixabay

par Anne-Laure DELPECH | 28 Déc 2024 | Art numérique, javascript, p5.js

Je réalise ce projet dans l’environnement VSCodium que j’ai décrit dans un précédent article (Un environnement local pour p5.js). Je ne peux pas le réaliser avec l’éditeur p5.js car je ne peux pas communiquer ma clé d’accès à l’API de Pixabay.

Créer un compte (gratuit) sur Pixabay

J’utilise Pixabay car il autorise à copier les images, et à les modifier, sans obligations d’attribution.Et Pixabay, à la différence d’UNSPLASH, ne rend pas le « hotlinking » obligatoire.

Je suis évidemment pour l’attribution, et le respect du travail de chacun. Mais parfois c’est très très compliqué d’utiliser des images lorsque les règles en sont contraignantes. Je crois que je fais de mon mieux.

On se crée un compte sur le site https://pixabay.com/fr/accounts/register/.

Il faut maintenant avoir une « clé API »

Une fois qu’on a un compte, on se connecte à Pixabay ET https://pixabay.com/api/docs/ me donne ma clé API et m’explique comment créer une requête. Pour la suite, cette clé API sera CLE-API. Dans la réalité elle est composée de plus de 30 caractères en hexadécimal (0 à 9 et les lettres a à f).

Se connecter à l’API Pixabay en p5.js

function preload() {
  // Voir https://p5js.org/reference/p5/loadJSON/
  let urlPix = 'https://pixabay.com/api/?key=CLE-API&category=buildings&image_type=photo';
  myData = loadJSON( urlPix, useData );


}

La fonction preload() va receuillir toutes les réponses de Pixabay qui correspondent à la requête. Ici ce sont des photos de bâtiments.

La fonction loadJSON est ici utilisée avec une « callback function », ici useData(), dont voici le contenu :

function useData() {

  nbMax = min( myData.hits.length, nbMax )  ;
  for( i = 0; i < nbMax; i++ ) {
    imgUrl[i] = myData.hits[i].largeImageURL ; // url des images
 }
}

Ici je lis simplement nbMax url renvoyées par Pixabay. et chaque url est intégrée à un array imgUrl.

Ce n’est pas toujours évident de savoir comment décrypter un fichier JSON. On peut par exemple se demander comment j’ai su qu’il fallait lire « myData.hits[i].largeImageURL ». Le plus simple je pense (en plus de lire soigneusement la documentation de l’API) , c’est d’ajouter un   print(myData) ; à la fin de la fonction preload. On trouve alors dans la console un mystérieux {} !

Si je met ma souris sur les {} indiqués par la flèche orange, l’inspecteur (de Chrome) me propose de « copier l’objet« . Et si je colle cet objet dans un éditeur de texte (ou même un nouveau fichier texte de vscodium) j’obtiens des informations plus ou moins lisibles. On peut si nécessaire utiliser https://jsonformatter.curiousconcept.com/ si le JSON qu’on a est trop difficile à formater. Dans mon cas j’obtiens un fichier qui contient comme un array, intitulé myData.hits[] et donc chaque élément contient des informations telles que l’id, la pageURL, etc…

Lire une image de pixabay et l’afficher

Dans le script créé (cf les fichiers zippés correspondants), il faudra que vous mettiez votre propre clé API), j’affiche les fichiers sous la forme fr ‘graphics », des sortes de canevas virtuels, ou peut-être plutôt comme des calques. J’en avais déjà utilisé dans l’article « p5.js Brique 2 : utilisation des “GRAPHICS”« . Ici je me suis beaucoup inspirée de https://editor.p5js.org/creativecoding/sketches/-Ut0EeXZj.

J’utilise les filtres POSTERIZE et INVERT pour modifier les images.

Cette image se trouve ici sur Pixabay. Elle devient comme ça après passage dans le sketch.

Et maintenant ?

Il faut que je voies si la solution évoquée dans l’article « p5.js : la solution pour charger les images » pourrait fonctionner avec ce script dans lequel la fonction preload est dédiée à la constitution d’un fichier JSON.

Je veux créer un array d’images qui pourront être affichées simultanément sur l’écran.