Pour l'instant, les données au format json sont récupérées une seule fois, au lancement du programme (fonction "preload"). Il est donc impossible, pour l'instant, d'effectuer une mise à jour des données sans "rafraichir" la page web (chaque "rafraîchissement" de la page web réexécute "script.js" depuis le début).

P5js propose une alternative à l'utilisation de la fonction "preload" :

La fonction "loadJSON" peut prendre un deuxième argument, ce deuxième argument est une fonction de "callback". Cette fonction de "callback" sera exécutée uniquement une fois que "loadJSON" aura terminée son travail (une fois que les données contenues dans le fichier json seront prêtes à être exploitée). Le principe d'une fonction de "callback" est toujours le même : c'est une fonction qui est exécutée uniquement quand une certaine action est terminée.

À faire vous-même 3.1

Modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)

ATTENTION : n'oubliez pas de remplacer les "X" par votre API key


var data;
var desc;
var ville;
var temp;
function setup(){
    createCanvas(500,150);
    gotData();
}
function gotData(){
    loadJSON("http://api.openweathermap.org/data/2.5/weather?q=bonneville,fr&lang=fr&units=metric&APPID=XXXXXXXXXXXXXX",afficheData);
}
function afficheData(data){
    background(255);
    desc=data.weather[0].description;
    temp=data.main.temp;
    ville=data.name;
    d=new Date(data.dt*1000);
    textAlign(CENTER);
    text("Date et heure du dernier bulletin : "+d.toLocaleString(),250,30);
    text("Météo à "+ville+" : ",250,60);
    text(desc+", température : "+temp+"°C",250,90);
}
function draw(){
}

Dans l'exemple ci-dessus :

Le principe sera toujours le même, "loadJSON" prendra le nom d'une fonction de "callback" pour deuxième paramètre. Cette fonction de "callback" prendra un paramètre ("data"), qui correspondra aux données récupérées.

Avec ce système, il sera possible de remettre à jour les données à n'importe quel moment : il suffira d'appeller la fonction "gotData".

Autre exemple de l'utilisation d'une fonction de "callback", l'utilisation des fonctions "loadImage" et "image" qui permettront d'afficher une image dans le canvas.

À faire vous-même 3.2

Après avoir téléchargé cette image, placez là dans dans le même dossier que le fichier "script.js".

Modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)


function setup(){
    createCanvas(500,300);
    gotImage();
}
function gotImage(){
    loadImage("tux.jpg",afficheImage);
}
function afficheImage(img){
    image(img,0,0);
}
function draw(){
}

Comme vous pouvez le constater dans l'exemple ci-dessus, l'affichage d'image suit le même processus que celui vu avec "loadJSON" : "afficheImage" est une fonction de "callback" qui est appelée quand l'image chargée par "loadImage" est prête à être affichée.

N.B. Il est aussi possible d'utiliser la fonction "preload" pour charger et afficher une image

À faire vous-même 3.3

Étudiez la documentation officielle de p5js consacrée aux images : loadImage et image.

Pour mettre à jour régulièrement les données, il est nécessaire d'exécuter, toujours régulièrement, la fonction "loadJSON".

Pour ce faire, JavaScript met à notre disposition la fonction "setInterval".

La fonction prend 2 paramètres :


setInterval(maFonction,dt);

Toutes les dt millisecondes, la fonction "maFonction" sera exécutée tant que le programme "script.js" sera actif.

Attention : le premier appel de la fonction "maFonction" se fera après dt millisecondes.

À faire vous-même 3.4

Modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)


var compteur;
function setup(){
    createCanvas(100,100);
    compteur=0;
    fill(255);
    textAlign(CENTER);
    textSize(20);
    setInterval(incrCompt,1000);
}
function draw(){
    background(0);
    text(compteur,50,50);
}
function incrCompt(){
    compteur=compteur+1;
}

À faire vous-même 3.5

Créez un programme permettant d'obtenir quelque chose qui ressemblera à ceci (avec la ville de votre choix) :

Les informations doivent être réactualisées toutes les 30 minutes.

Pour vous aider : les icônes dont vous aurez besoin sont téléchargeables ici.

Pour le "À faire vous-même 3.6", il est nécessaire d'avoir travaillé la série d'activités "Créer une page web avec p5js" que vous trouverez ici.

À faire vous-même 3.6

Créez un programme permettant d'obtenir quelque chose qui ressemblera à ceci :