Documentation de p5Visuel

Catégorie : p5.js

Voyons comment se déroule l'exécution d'un programme p5Visuel. Quand on clique sur le bouton Exécuter, certaines actions de préparation sont d'abord exécutées (dont la fonction avant de commencer, si elle est présente), puis la fonction actions initiales est appelée. Par la suite, la fonction actions en boucle est appelée jusqu'à 60 fois par seconde.

En fait, la fonction actions en boucle peut être appelée moins de 60 fois par seconde si l'ordinateur n'est pas assez rapide pour l'exécuter aussi souvent en une seconde. Elle peut aussi être appelée à un rythme moins grand, dicté par le bloc vitesse de la boucle. Elle peut enfin être appelée une seule fois, si le bloc 'actions en boucle' appelée une seule fois a été activé.

Dimensions canevas

Paramètres
• une valeur horiz (800 ci-dessus, mais qui peut être une expression numérique quelconque)
• une valeur vert (600 ci-dessus, mais qui peut être une expression numérique quelconque)

Fonctionnement
• crée un canevas dont les dimensions  (en pixels) sont spécifiées
  Note : le canevas est la zone graphique principale, où p5Visuel trace ses graphiques par défaut
• on peut référer à l'objet canevas ainsi créé via la variable prédéfinie canevas

Remarques
• p5Visuel ne peut utiliser qu'un seul canevas, mais il peut utiliser plusieurs zones graphiques :
  après le premier appel au bloc canevas, tous les appels subséquents ne servent qu'à redimensionner le canevas.
• ATTENTION Le canevas est un type particulier de zone graphique, avec des caractéristiques supplémentaires.
  Par exemple, il est possible d'enregistrer l'image contenue dans un canevas, alors que ce n'est pas le cas
   pour une zone graphique ordinaire. (Voir aussi la catégorie image)

Créer une zone graphique

Paramètres
• une variable zoneGraphique (rien ci-dessus, mais qui peut être une variable quelconque)
• une valeur horiz (400 ci-dessus, mais qui peut être une expression numérique quelconque)
• une valeur vert (400 ci-dessus, mais qui peut être une expression numérique quelconque)

Fonctionnement
• crée une zone graphique dont les dimensions  (en pixels) sont spécifiées
  Note :une zone graphique est un espace où p5Visuel peut tracer des graphiques

Remarques
• on peut spécifier la zone graphique qui exécutera les commandes graphiques à l'aide du bloc suivant

Choisir la zone graphique

Paramètres
• une variable zoneGraphique (rien ci-dessus, mais qui peut être une variable quelconque)

Fonctionnement
• spécifie la zone graphique dans laquelle les tracés subséquents seront exécutés

Remarques
• à sa création, le canevas ou la zone graphique est automatiquement choisi
  (sans besoin d'un appel au bloc Choisir la zone graphique)
• chaque zone graphique possède ses coordonnées (modifiées par les transformations) et sa tortue propres
• on peut laisser le paramètre vide, si on désire qu'aucune zone graphique ne soit choisie
  (Ceci peut être utile pour utiliser les blocs position en X de la souris et position en Y de la souris)

Largeur de la zone graphique courante

Paramètres : aucun

Fonctionnement
• retourne la largeur de la zone graphique courante (en pixels)

Hauteur de la zone graphique courante

Paramètres : aucun

Fonctionnement
• retourne la hauteur de la zone graphique courante (en pixels)

Enregistrer l'image du canevas

Paramètres : aucun

Fonctionnement
• enregistre l'image contenue dans le canevas

Remarques
• le fichier image est placé à l'endroit spécifié dans les préférences du navigateur web

La fonction actions en boucles n'est appelée qu'une fois (ne boucle pas)

Paramètres : aucun

Fonctionnement
• en fonctionnement normal, p5Visuel tente d'appeler la fonction actions en boucle soixante fois par seconde
• ce bloc demande à p5Visuel de n'appeler la fonction actions en boucle qu'une seule fois, après l'exécution de la
    fonction actions initiales

Fréquence des appels à la fonction actions en boucles

Paramètres
• une valeur rythme (60 ci-dessus, mais qui peut être une expression numérique quelconque)

Fonctionnement
• en fonctionnement normal, p5Visuel tente d'appeler la fonction actions en boucle soixante fois par seconde
• ce bloc demande à p5Visuel d'appeler la fonction en question rythme fois par seconde

Remarques
• rythme doit être un entier positif inférieur à 60

Afficher la fenêtre modale

Paramètres
• un titre
• un texte justifié à gauche
• un lien vers une image
• un texte centré
• une largeur de la fenêtre
• une marge du haut

Fonctionnement
• les éléments donnés en paramètres seront affichés dans l'ordre et selon les critères (largeur, marge) spécifiés
• les interactions avec le clavier et la souris en dehors de cette fenêtre seront ignorées

Remarques
• si un élément(titre, texte gauche, image, texte centré) est vide, il ne sera pas affiché
• si la largeur est nulle, elle sera mise à 800
• si la marge est nulle, elle sera mise à 200

Expression p5

Paramètres
• une valeur expression (vide ci-dessus, mais qui peut être une expression textuelle quelconque)

Fonctionnement
• évalue une expression JavaScript (pouvant contenir des éléments de p5.js) et retourne le résultat obtenu

Remarques
• pour les utilisateurs plus avancés

Commande p5

Paramètres
• une valeur commande (vide ci-dessus, mais qui peut être une expression textuelle quelconque)

Fonctionnement
• exécute une commande JavaScript (pouvant contenir des éléments de p5.js)

Remarques
• pour les utilisateurs plus avancés

Programme p5Visuel spécial

Paramètres : aucun

Fonctionnement
• permet de retirer du programme p5Visuel les fonctions actions initiales et actions en boucle
  et d'utiliser plutôt leurs traductions JavaScript dans le fichier utilisateur.js

Remarques
• pour les utilisateurs plus avancés
• pour illustrer l'intérêt de ce bloc, voir l'exemple suivant (qu'on peut aussi télécharger)
  On peut imaginer qu'un professeur fournisse la fonction coeurSolution avec les 7 premiers blocs
  et invite l'élève à la compléter (comme illustré dans l'exemple).

Page web où le programme s'exécutera

Paramètres
• une valeur adresse (vide ci-dessus, mais qui peut être une adresse web quelconque, de même domaine que l'éditeur)

Fonctionnement
• normalement, le programme contenu dans l'éditeur s'exécute dans une page web vide
• cette commande indique que le programme devra s'exécuter dans la page web spécifiée par l'adresse
• la page web devra être adaptée à p5Visuel par l'ajout des appels suivants dans l'entête de la page

 • si le programme ne réfère pas à des éléments spécifiques de la page, les éléments créés par le programme
   s'afficheront à la fin de ladite page
• en référant à des éléments spécifiques de la page initiale, le programme pourra insérer ou modifier
   des éléments à des endroits précis de la page web

Remarques
• ce bloc ne doit apparaître qu'une seule fois dans le programme, normalement au tout début
   (S'il apparaît plusieurs fois, seule la première occurence sera prise en compte.)
• l'adresse peut être
     * vide : ceci correspond au comportement par défaut (une page vide)
     * relative : par exemple, une adresse execution.html correspond aussi au comportement par défaut (une page vide)
     * absolue : par exemple l'adresse d'un modèle ci-dessous (voir aussi la page des modèles)
              http://profmath.uqam.ca/~boileau/p5VisuelWEB/MODELES/PolygonesReguliers/execution.html

Marge gauche

Paramètres
• une valeur marge (0 ci-dessus, mais qui peut être une expression numérique quelconque)

Fonctionnement
• spécifie que la page web créée lors de l'exécution aura une marge gauche de marge pixels

Remarques
• sans un appel à ce bloc, la marge gauche de la page web sera de zéro pixels, ce qui n'est pas très esthétique

Disposer les objets dans la page d'exécution

Paramètres
• une disposition (au centre ou à gauche)
• une valeur largeur (500 ci-dessus, mais qui peut être une expression numérique quelconque)

Fonctionnement
• spécifie que les objets web seront soit centrés, soit placés à gauche (selon le choix de la disposition)
  dans la page web créée lors de l'exécution
• spécifie aussi la largeur (en pixels) de la zone occupée par les objets dans la page web d'exécution

Remarques
• si la largeur spécifiée est 0, on utilisera toute la largeur (redimensionnable) de la fenêtre