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.
Je peux maintenant écrire mes projets p5.js sur mon ordinateur (windows 10) et visualiser le résultat dans un navigateur même s’il y a des accès à des fichiers (images par exemple) ! J’utilise VSCodium, une version open source de VS Code, de Microsoft.
Jusqu’à présent j’utilisais l’éditeur en ligne p5js, très bien, pour démarrer mes projets p5.js. J’avais testé des solutions pour créer un environnement local mais rien ne fonctionnait ou me convenait. Mais aujourd’hui, ça y est, j’ai trouvé une solution ! Merci à Pierre des Portes Logiques de m’avoir proposé cette voie !
scripts p5js localement
Si je veux tester localement un projet p5js, je peux mettre dans un répertoire un fichier index.html (qui chargera un fichier css et les librairies p5js dont on a besoin). Et si je double clique sur ce fichier index.html, il s’ouvre dans mon navigateur par défaut et s’exécute. Mais si le sketch charge d’autres fichiers, par exemple des images, on a une erreur « cross-origin », « COR ». La seule solution pour l’éviter, selon la documentation des créateurs de p5.js, c’est d’avoir un serveur local.
Sur un raspberry Pi 3 sous Linux, j’ai installé node.js et fait tourner son serveur http-server. J’en ai parlé dans ces deux articles : ici et là.
VSCodium, pour coder
VSCodium est une version Libre et Open Source de VS Code de Microsoft. C’est plus ou moins un clone de VS code, sans les customisations de Microsoft. Et cerise sur le gâteau, VSCodium a accès à de nombreuses extensions de VS Code !
Pour installer VSCodium sur mon PC (windows 10), j’ai cliqué sur le bouton « Download latest release » puis choisi l’option « User Installer » pour Windows en x86 64bits. J’ai exécuté le fichier .exe, accepté les termes du contrat de licence (MIT). J’ai coché toutes les tâches supplémentaires et cliqué sur SUIVANT puis INSTALLER.
Ensuite il suffit de lancer VSCodium. On peut faire quelques réglages si on le souhaite pour les couleurs et autres.
Un serveur local avec VSCodium
Dans VSCodium, sur le côté gauche, il y a une barre avec des icones. L’une des icones correspond à « Extensions« . Je clique dessus puis je tape Live Server. Je choisis celle de Ritwickdey. C’est l’extension recommandée pour utilisation avec VS Code dans leur document sur les serveurs locaux). Attention à bien prendre celle de Ritwickdey. Lorsqu’on clique dessus on voit ça :
Cliquer sur le bouton Install. L’extension s’installe.
Maintenant dans le menu File > Open Directory, j’ouvre le répertoire d’un projet p5js de mon ordi.
Et tout en bas à droite de la fenêtre VSCodium », je trouve « Go Live ».
Je clique dessus et mon navigateur par défaut (chrome pour moi) ouvre un onglet à l’adresse http://127.0.0.1:5500/.
Pour en savoir plus
Pour plus d’informations sur le fonctionnement de Live Server, on peut aller voir le dépôt sur Github.
L’ensemble des extensions disponibles pour VSCodium est visible sur ce site : https://open-vsx.org/
Lorsqu’on charge des images dans un script p5.js, ça se passe de façon asynchrone. C’est souvent une bonne chose car ça évite d’attendre. Mais parfois ça pose beaucoup de problèmes. Alors je cherchais depuis longtemps un moyen efficace d’être certaine que les images seraient entièrement chargées avant que la suite du script ne les utilise.
J’ai trouvé la solution grace à Perplexity, le moteur de recherche avec AI. Je lui ai demandé « what are the solutions which work for loading a lot of images in an array using p5js? », il m’a répondu avec des solutions banales (qui ne fonctionnent pas lorsque les images mettent du temps à charger). J’ai insisté en « lui disant » : « this doesn’t ensure that all images in the array are fully loaded. are there more robust solutions? ». Et là il m’a apporté la réponse que je ne trouvais pas ! Merci Perplexity !
J’utilise loadImage et une fonction « call back » qui incrémente un compteur (imagesLoaded) à chaque fois qu’une image est correctement chargée. Lorsque le compteur imagesLoaded contient la valeur indiquée au début dans imagesToLoad, c’est qu’on a chargé autant d’images qu’on en avait prévu. On est donc prêts à la suite !
La nouvelle extension Site Kit, de Google, permet enfin de connecter, rapidement et facilement, un site WordPress et les services Google tels que Google Analytics, Google Search Console, Speed Test. Elle intégre également Google Optimize, Google Tag Manager et Google Ads que je n’utilises pas.
J’ai découvert récemment l’intérêt de créer un site avec Google sites dans des circonstances où l’on souhaite partager simplement des documents avec un groupe de personnes. Et aujourd’hui, je viens de regarder la vidéo d’Olivier Margerand, de Digital Collab, qui nous explique comment créer un site web en 5 minutes avec Google Sites :
J’en retiens que c’est extraordinairement simple et rapide ! Il est possible de mettre en ligne des éléments de Google Suite de manière très simple. Mais aussi qu’on peut imaginer une infinité d’utilisations, comme par exemple la création d’un site pour une machine, afin de déclarer des opérations de maintenance ou suivre des fonctionnement simplement en scannant le QR code affiché sur la machine !
J’ai beaucoup apprécié les propos d’Olivier Margerand, toujours aussi percutant et juste. Par exemple :
Ce qui compte maintenant c’est l’intelligence qu’on va mettre derrière tout ça : qu’est-ce que ça peut apporter ? Qu’est-ce que ça peut aider à simplifier dans une entreprise, dans une équipe, dans un processus, avec nos clients, avec nos prospects avec nos fournisseurs ?
Commentaires récents