/ p5.js / 17 / boutons, champs…

Bouton / Button

Le bouton créé ici permet de déplacer le carré de 10 px au clic sur le bouton.
Il faut créer une var bouton;
Ensuite il suffit de créer le bouton bouton = createButton(« avance »); entre () le texte du bouton…
Pour rattacher une action au bouton on lui associe une action (mousePressed) et une fonction (avanceCarre) dans l’exemple.
La fonction est définie ensuite…
Il est possible de positionner le bouton ou on le souhaite dans le canvas mais aussi à l’extérieur de celui-ci : bouton.position(x,y);

var bouton;
var x = 25;
var y = 75;

function setup() {
  canvas = createCanvas(780, 200);
  background(200,222,22);
  
  bouton = createButton("avance");
  bouton.mousePressed(avanceCarre);
  bouton.position(width/2,170);
  
  noStroke();
  fill(236, 36, 94);
  rect(x, y, 50, 50);
  }
  
function avanceCarre(){
     background(200,222,22);
    fill(236, 36, 94);
    rect(x+10, y, 50, 50);
  x = x+10;
}

Curseur / Slider

Pour le slider (ou curseur) il faut créer une variable var curseur; (par exemple) et déclarer le curseur :
curseur = createSlider(a, b, c); a = la valeur initiale, b = la valeur finale et c = la valeur par défaut sur laquelle le curseur est positionné. Dans l’exemple le curseur permet de déplacer le carré sur la largeur du canvas.

var curseur;

function setup() {
  canvas = createCanvas(780, 200);

 curseur = createSlider(25, 705, 730/2);
 curseur.position(25,180);
}
function draw(){
    background(236,36,94);
    fill(255);
    rect(curseur.value(), 75, 50,50);
}

Champ / Input

Afficher un texte avec ENTER ou TAB

Pour créer un champ à compléter (input) il faut une variable var champ; et déclarer le champ = createInput();
On utilise ensuite un événement (event) nommé changed rattachée à une fonction qui permet l’affichage de notre texte mais qui pourrait aussi modifier un texte existant. On positionne ensuite le champ avec position.
Dans la fonction afficheTexte le texte s’affichera quand l’utilisateur utilisera la touche ENTER ou TAB.

(Si l’on utilise input à la place de changed comme événement champ.input(afficheTexte); le texte sera immédiatement recopié et il n’est plus nécessaire d’utiliser enter ou tab…)

var champ;

function setup() {
  createCanvas(710, 200);
  background(236,36,94);
  textAlign(LEFT)
  textSize(20);
  
  champ = createInput();
  champ.changed(afficheTexte);
  champ.position(20, 65);
}

function afficheTexte() {
    background(236,36,94);
    text(champ.value(),20,120);
}

On peut ajouter un bouton…

var champ;
var bouton;

function setup() {
  createCanvas(780, 200);
  background(236,36,94);
  textAlign(LEFT)
  textSize(20);
  
  champ = createInput();
  champ.changed(afficheTexte);
  champ.position(20, 65);
  
  bouton = createButton("cliquer");
  bouton.mousePressed(afficheTexte);
  bouton.position(195,65); 
}

function afficheTexte() {
    background(236,36,94);
    text(champ.value(),20,120);
}

Boutons & champs avec CSS

Les champs & boutons peuvent être stylés avec CSS…

var input, button, entete;
var etat = 0;

function setup() {
  createCanvas(710, 400);
  textFont("Helvetica");
  textSize(24);
  textAlign(LEFT);
  
  entete = createElement('h2', 'Écrire ici');
  entete.position(20, 150);
  
  input = createInput();
  input.position(20, 200);
  
  button = createButton('submit');
  button.position(194, 200);
  button.mousePressed(action);
}

function draw(){
   background(255);
    if (etat === 0){
    text('bonjour', 20, 50,450,100);
    }else if (etat == 1) {
      text("au revoir", 20, 50,450,200);
    }else if (etat == 2) {
       text("à+", 20, 50,450,200);
    }
}

function action() {
   var text = input.value();
    if (text == 'à+'){
      etat = 0;
      input.value('');
    }else if (text == 'bonjour'){
      etat = 1;
      input.value('');
    }else if (text == 'au revoir'){
      etat = 2;
      input.value('');
    }
}

C’est dans la page index.html qu’il faut ajouter les éléments CSS (ou dans un fichier CSS relié).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>construction</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>

    <style> 
    body {padding: 0; margin: 0;} 
    canvas {vertical-align: top;} 
    h2{font-family: helvetica; color:rgb(13,108,147);}
    input {width:168px;}
    button {
    background-color: rgb(13,108,147);
    border: none;
    color: white;
    padding: 2px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
}
button:hover {
   background-color: rgb(13,108,147);
   color: #ccc;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.24), 0 7px 5px 0 rgba(0,0,0,0.19);
}
    </style>
  </head>
  <body>
  </body>
</html>

Categorie(s): SE FORMER