7.5: Interacting with the DOM using Sliders, Buttons and Text Inputs - p5.js Tutorial

Salut

Alors,se que je veux vous montrer dans
cette vidéo c'est deux autres éléments

que vous pouvez ajouter dans une page
pour une interactivité supplémentaire

Dans la vidéo précédente j'ai parlé des
"call back"

Si vous avez un bouton et vous attacher
une fonction le code de cette fonction

est exécuté seulement quand vous appuyez
sur le bouton grâce au "callback" de l’événement

click de la souris, regardons maintenant
a deux autres éléments d'interaction que

vous pouvez ajouter a la page,
et quelles autres événements peuvent être

associés a ces éléments pour rendre les
choses plus intéressantes

J’espère que je ne vais pas faire tomber
cette lumière et mètre le feu,

il y a eu une alarme plus tôt,
les pompiers vont arriver, bref tout vas

bien pour l'instant.
Commençons par le curseur, un curseur

c'est quelque chose qui ressemble a ça,
voici mon beau dessin de curseur

On peux faire glisser en avant et en arrière,
et contrôler un élément sur la page:

on peut rendre quelque chose plus grand
ou plus petit, rendre quelque chose plus

ou moins bleu, Voyons comment
cela fonctionne

La fonction P5 pour ajouter un curseur
dans la page est createSlider()

il y a peu choses a mentionner ,
premièrement: c'est l’élément curseur par

défaut de l'HTML, c'est ce que vous avez
de base dans le navigateur, si vous voulez

avoir votre propre slider personnalisée
comme par exemple

créer votre curseur le long d'un sinus
par exemple,

il y a beaucoup de choses que vous pouvez
faire avec un canvas, mais pour l'instant

nous allons travailler avec le curseur par
défaut, l'autre chose que je voulais
mentionner c'est qu'il est évidemment

possible d'ajouter le curseur en écrivent
les balises HTML dans la page,

mais pour le faire plus simplement je vais
me concentrer sur le javascript et je vais

ajouter le curseur en utilisant createSlider()
exactement comme createButton()

Maintenant, quelle sont les arguments
dont le curseur a besoin

le curseur a besoin de trois valeurs,
un minium, c'est la valeur que le curseur

retourne quand il est complètement a
gauche.

L'autre est le maximum quand on fait
glisser entièrement a droite

et pour finir quelle est la valeur de départ

Disons que je veut utiliser le curseur pour
contrôler la taille d'un cercle

et je veux que la taille du cercle soit
entre 10 et 100 et je veux que la taille

de départ soit 47, on utilise createSlider
avec le minimum, le maximum et une valeur

de départ , allons ajouter cela a la page
Vous pouvez voir que j'ai déja un bouton

et je vais ajouter un curseur,
crée un curseur avec le minimum le maximum

et une valeur de départ. On peut voir
qu'il y a un curseur dans la page

au fait une chose me dérangait , le
bouton apparaissait a droite du canvas,

plus tard je vous montrerais plusieurs
façons, grâce au CSS, de contrôler

l'apparence de la page. Mais pour l'instant
une façon rapide de régler ça est d'ajouter

un paragraphe vide entre le canvas et
le bouton, et vous pouvez voir comment

je l'ai fait dans le code ici, j'ai fait
le canvas j'ai fait un paragraphe vide

et en fin j'ai mis le bouton, vous pouvez
voir que le curseur s'affiche a droite

du bouton si j'ajoute un autre paragraphe
vide il s'affichera en dessous

Peu importe que ça soit une bonne ou une
mauvaise idée

beaucoup d'entre vous me dirons que c'est
une très mauvaise idée,

vous savez quoi tant que ça marche c'est bon

Maintenant le curseur est là, je peux
le bouger, mais rien ne ce passe

remarquez que si je choisis comme valeur
de départ 5, la position du curseur est là

si je met la valeur de départ a 86 la
position est ici.

vous pouvez contrôler cette valeur de
départ en la modifiant dans le code

Alors comment récupérer la
valeur du curseur?

En appelant la fonction value()
c'est une autre fonction qui fait partie

des éléments HTML, jusqu'ici nous avons
vu position() qui positionne de fçacon

absolue l'élément dans la page, je vous ai
montrer html() qui change le contenu de

l'élément qui est le texte de l'élément
maintenant vous voyez une autre "value()"

qui récupère la valeur,la valeur n'est pas
toujours pertinente pour touts les

éléments mais elle est utile pour les
curseurs parce-que on veut savoir la position

actuelle du curseur

Qu'est ce que il manque
j'ai juste crée le curseur mais si je veux

récupérer la valeur ou changer sa position
je dois ajouter une variable "slider"

puis faire slider=createSlider(10,100,86)
maintenant partout dans le code je peux

récupérer sa valeur.

Je vais changer ça en cercle et la
vous pouvez voir qu'il y a un cercle

je vais maintenant attacher le rayon du
cercle a slider.value()

Vous vous posez surment la q