Les algoblobs : La téléportation

Votre premier algoglob a appris à se déplacer. Mais vous l'avez juste regardé. Et si vous pouviez interagir avec ?

Les événements

Par définition, un événement est Tout ce qui se produit, arrive ou apparaît. Et dans le cadre des interactions avec un ordinateur, il peut y avoir beaucoup d'événements. Le tic de l'horloge du processeur, un mouvement de souris, une action sur le clavier, etc.

Bonne nouvelle. La bibliothèque p5 fait fonctionner une boucle permanente qui redessine l'écran, et dans le même temps, elle "écoute" les événements. Aussi, elle peut réagir à un clic de souris par exemple.

Comment ça fonctionne

Il y a deux façons différentes de procéder. Lorsqu'un événement se produit (clic de souris, appui d'une touche de clavier) la bibliothèque p5 fait deux choses :

Elle positionne des variables. Par exemple une variable booléenne qui indique qu'il y a eu un clic de souris, et une autre variable qui indique quel bouton a été cliqué
Elle appelle une fonction prédéfinie qui corespond à cet événement si elle existe

Nous allons nous servir de cette seconde possibilité en utilisant la fonction mouse_clicked qui est appelée lors d'un clic de souris

Ouvrez l'éditeur Python avec lequel vous travailler sur p5
Reprenez le code de l'exercice sur les mouvements et les tests ou recopiez le
Ajoutez le code sur l'action à réaliser lorsqu'il y a un clic
Éxécutez le code pour vérifier qu'il est correct.

Code de base

import p5
import random()

largeur = 500
hauteur = 500
abscisse = 250
ordonnee = 250
vitesseX = random.uniform(-5,5)
vitesseY = random.uniform(-5,5)
if vitesseX == 0 and vitesse Y == 0 :
    vitesseX = 1
rayon = 20

def setup():
    p5.size(largeur,hauteur)

def draw():
    global abscisse
    global ordonnee
    global vitesseX
    global vitesseY
    p5.background(0)
    p5.circle(abscisse,ordonnee,rayon)
    abscisse = abscisse + vitesseX
    ordonnee = ordonnee + vitesseY
    if abscisse > largeur :
        abscisse = largeur
        vitesseX = -vitesseX
    if abscisse < 0 :
        abscisse = largeur
        vitesseX = -vitesseX
    if ordonnee > hauteur :
        ordonnee = hauteur
        vitesseY = -vitesseY
    if ordonnee < 0 :
        ordonnee = 0
        vitesseY = -vitesseY

p5.run()

Code à ajouter

Entre la fin de la fonction draw et le lancement de la boucle principale par p5.run(), ajoutez le code suivant :

def mouse_clicked():
    global abscisse
    global ordonnee
    abscisse = random.uniform(0,largeur)
    ordonnee = random.uniform(0,hauteur)

Que va t'il se passer ?

À chaque clic de souris, la fonction mouse_clicked sera appelée et elle va changer l'abscisse et l'ordonnée pour des nombres aléatoires.

Faisons varier les plaisirs

Vous avez entré et testé votre code. Essayons maintenant de rendre les choses un peu plus intéressantes.

Au lieu d'une téléportation, faites une modification alétoire de la vitesse
Au lieu d'une modification aléatoire, faites un rebond (l'algoblob repart dans l'autre sens)
Au lieu d'un rebond, positionnez l'algoblob à l'endroit où se trouve la souris (les coordonnées de la souris sont dans des variables mouse_x et mouse_y)
Concevez un 5ème effet possible, entièrement de votre choix.
Enfin, plutôt que d'avoir un effet unique, choisissez grâce à uniform(0,100) un nombre entre 0 et 100 et affectez l'un des 5 effets possibles suivant la valeur de ce nombre (par exemple entre 0 et 40, téléportation, entre 40 et 60 ...)

Vous pouvez voir un exemple de réalisation en javascript sur ce lien

plus difficile : lorsque l'on clique dans la fenêtre, faîtes en sorte que l'algoblob se dirige vers l'endroit où l'on a cliqué.

Derrière ces exemples, il faut retenir une notion qui est la programmation événementielle ou programmation par événement.

La programmation événementielle ou programmation par évènement est un paradigme de programmation où le programme fonctionne en réaction aux événements qui se produisent plutôt que de se dérouler de façon linéaire. Il est au centre des interfaces graphiques actuelles. On le trouve par exemple dans Scratch

p5 est une librairie python qui repose sur le paradigme événementiel. Pour en savoir un peu plus sur les possibilités de gestion des événements dans p5, vous pouvez consulter la documentation sur le sujet