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 .

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/

 

0 0 votes
Évaluation de l'article
0
Nous aimerions avoir votre avis, veuillez laisser un commentaire.x