Sites


p5.js pour le webdocumentaire

Les "id" ne sont pas (toujours) fixes

Jouer avec les éléments HTML

p5.js et son extension p5.dom permettent de récupérer les id et les classes présentes dans des pages HTML. Ainsi nous pourrons récupérer des éléments HTML et interagir avec.

Nous reprendrons notre 'index.html' que nous avons commencé à coder. Nous allons ajouter une balise <p></p> dans lequel nous entrerons un extrait textuel quelconque. Nous attribuerons un id aux éléments susceptibles d'être assujettis à toute interactivité. Ici l'id est "montexte". Nous n'oublierons pas également d'ajouter le lien de l'extension de la bibliothèque p5.dom dans la balise <head> en respectant bien sur la structure de votre site.


<!doctype html>
<html>
<head>
    <title>Jouer avec id</title>
    <script src="js/sketch.js" language="javascript" type="text/javascript"></script>
    <script src="js/p5.min.js" language="javascript" type="text/javascript""></script>
<script language="javascript" type="text/javascript" src="js/p5.min.js"></script>
</head>
    <body>
        <p id="montexte">
        Les feuilles mortes est un poème de Jacques Prévert chanté par Yves Montand.
        </p>
    </body>
</html>


Comme premier exercice, nous allons "coller" le texte à notre souris avec les méthodes mouseX et mouseY.

Dans notre fichier sketch.js nous allons tout d'abord créer un objet 'texte' qui nous permettra de récupérer l'id de notre élément HTML. Nous utiliserons la fonction getElement qui prend un seul paramètre: bien évident, il s'agira d'y inscrire le nom de l'id. Enfin dans le draw(), nous allons ajouter l'action de classe position(), (*)(~verifier tournure) qui nous permettra de (dé/re)placer notre objet. position() prend deux paramètres, la position horizontale et la position verticale (x et y).

 

var texte;

function setup(){
    createCanvas(800,600);
    texte = getElement('montexte');
}

function draw(){
    texte.position(mouseX,mouseY);//dans cet exemple notre texte suivra par le bout de la souris.
}


Nous pouvons aussi cacher des éléments avec la fonction hide() et l'afficher (ici sous condition) avec la fonction show():


var texte;

function setup(){
    createCanvas(800,600);
    texte = getElement('montexte');
}

function draw(){
    
    stroke(255,0,0);
    line(400,0,400,height);
    
    if(mouseX > 400){
       texte.show();
       texte.position(mouseX,mouseY);
    }
    else{
        texte.hide();
    }
}



Bien sur nous pouvons opérer ces opérations sur n'importe quel élément HTML comme sur des images ou sur de la vidéo.


var image;

function setup(){
    createCanvas(800,600);
    image = getElement('monimage');
}

function draw(){    
    image.position(random(width),random(height));
}


Présenter d'autre fonctions (!))))))
Présenter récupération de classes
mettre IMAGES

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.