Sites


p5.js pour le webdocumentaire

Un peu de console

...pour vérifier si tout fonctionne

Dans ce chapitre nous allons vérifier si vous pouvez intéragir correctement avec la bibliothèque javascript, et cela par le biais d'une "console". Ce sera aussi l'occasion de découvrir les fonctions principales setup() et draw(). C'est une première approche, nous aurons l'occasion de revenir sur ces deux méthodes dans des cas plus concrets.

Vous avez votre HTML et vous y avez importé vos scripts via les balises appropriées. Il ne reste plus qu’à coder votre fichier skectch.js. À la façon d’un sketch Processing classique, on y écrira un familier setup() (pour initialiser le canevas) et un draw() (pour dessiner). Les initiés à Processing remarqueront quelques différences : un function à la place d’un void: bienvenue dans le monde de javascript! Si vous ne savez pas ce qu’est setup() et draw(), ce n’est pas bien grave, les exemples suivants vont parler d’eux même.

function setup(){
  //ici on initialisera notre canevas
}
 
function draw(){
  //ici, ça peut bouger...
}
Vous remarquez que l'on peut écrire des commentaires (du texte non-interprété comme étant du code) grâce à deux slashs. Attention, ça ne fonctionne que sur une ligne, pour transformer un texte en commentaire sur plusieurs ligne on utilisera cette option :
/* ceci est un paragraphe
de test */

La fonction setup() permet de définir, de configurer la nature du canevas et d’y fixer des éléments permanents. On y définira la taille de notre canevas, on y initialisera nos objets, nos tableaux, (on verra tout cela plus tard), etc. On peut aussi y dessiner des choses « fixes ». Mais avant de commencer à dessiner ou à paramétrer quoi que ce soit, on va voir si tout fonctionne; on va envoyer des informations à la console.

Une console, je rappelle, est une zone qui peut afficher des messages d’erreur, une zone textuelle à laquelle on peut envoyer des informations pour les tester: c’est un outil de débogage pratique.
Pour afficher la console du navigateur, il faut aller l’afficher via les menus du haut. Dans Firefox, la console se trouve dans Outils > Développement Web > Console Web. Si vous ne trouvez pas la console, tapez Console dans la rubrique Aide de votre navigateur.

Maintenant nous allons taper une commande dans la fonction setup() de notre sketch. La fameuse commande print() qui permet d’écrire dans la console.

Les paranthèses d'une fonction servent à accueillir des paramètres. Pour écrire du texte, on ajoutera des guillemets.

function setup(){
  print("ça fonctionne!");
}
 
function draw(){
}

Si tout se passe bien, le message s’affichera dans la console. Sinon, veillez à ce que l’arborescence de votre site soit correcte, ou vérifiez que votre code ne comporte pas d’erreurs.

retour console

Ça bouge (un peu plus) avec draw()

Maintenant, on va écrire quelque chose de similaire dans la fonction draw().

La fonction draw()? Was ist das?

À la façon d’un dessin animé, la fonction draw() affiche x images par secondes (ips en français, fps en anglais) sur l'espace de dessin; à l’affichage de ce canevas dans le navigateur, draw() s’itère automatiquement selon une certaine fréquence d’actualisation, de 0 jusqu’à fermeture de la fenêtre.
Quelques fonctions utiles : frameCount() compte le numéro de ses images qui défilent. Pour modifier la fréquence d’affichage de l’animation, on utilisera la fonction frameRate([x]) qui s’initialise dans le setup().

Pour résumer, draw() affiche perpetuellement de nouvelles images et rafraichit à l'infini l'espace de dessin. Ces images qui défilent les unes sur les autres, on peut les compter avec frameCount(), et modifier la vitesse de rafraichissement de ces images avec frameRate([]).

function setup(){
  //print("ça fonctionne!"); Rappel: Cette ligne est un commentaire et n'est donc pas prise en compte
}
 
function draw(){
  print("ça a fonctionné "+ frameCount + " fois!");
}

 Et ça donne ça (ou quelque chose de similaire):

retour console avec draw

On remarque que Firefox a oublié certains numéros; Ici, le canevas a une fréquence d’actualisation plus élevée que celle de la console qui semble avoir du mal à suivre la cadence. Ce n’est pas bien grave puisque toutes les images seront tout de même prises en compte, mais ce sera l’occasion de jouer avec une nouvelle fonction. On va réduire les ips de notre canevas et s’amuser avec la fonction frameRate([]) pour voir afficher tous les numéros de nos images.

function setup(){
  frameRate([10]);//10 images par secondes
}
 
function draw(){
  print("ça a fonctionné "+ frameCount + " fois!");
}

console quasi complete

Personne (ou presque) n'a été oublié!

 

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.