Processing et Python

Dans cette activité, nous allons nous intéresser aux animations.

Processing propose 2 fonctions que le programmeur devra compléter :

la fonction "setup" qui sera appelée une seule fois dès le début de l'exécution du programme.
la fonction "draw" sera appelée à chaque image

Ces 2 fonctions ne prennent aucun paramètre et ne retournent aucune valeur.

Qu'est-ce que j'entends par "appelée à chaque image" ?

Quand vous jouez à un jeu sur votre ordinateur (et que votre ordinateur manque de "puissance"), il arrive parfois que l'affichage saccade (on parle de "lag"), pourquoi ?

Il faut savoir que "l'ordinateur" doit, plusieurs dizaines de fois par seconde (le nombre d'images affichées par seconde est souvent désigné par l'acronyme FPS (Frames per second)), afficher une nouvelle image à l'écran.

Cela demande beaucoup de calculs (complexes) au microprocesseur central (CPU).

Petite parenthèse : c'est d'ailleurs pour cela qu'aujourd'hui, cette tâche est très souvent laissée à un microprocesseur spécialisé dans ce genre de calcul : le GPU (Graphics Processing Unit, ce microprocesseur spécialisé se trouve sur la carte graphique de votre ordinateur). Quand ni le CPU, ni le GPU n'arrivent à afficher suffisamment d'images par seconde, votre jeu saccade.

En matière de programmation, il faut, une fois que la nouvelle image est prête à être à afficher (après par exemple avoir bougé de quelques pixels le personnage principal), envoyer l'ordre au CPU d'afficher cette nouvelle image (après avoir fait tous les calculs nécessaires).

On retrouve ici le principe du dessin animé : l'ordinateur affiche à l'écran une succession d'images fixes, si la fréquence d'affichage est assez importante (30 FPS pour que cela paraisse fluide), l'utilisateur aura l'illusion du mouvement.

Processing propose donc la fonction "draw", cette fonction "draw" sera appelée à chaque image.

À faire vous-même 5.1

Saisissez, analysez et testez ce code


r=2
v=2
def setup():
	size(400,400)
	noStroke()
	fill(0)
def draw():
	global r,v
	background(255)
	ellipse(200,200,2*r,2*r)
	if r>200 or r<2:
		v=-v
	r=r+v

Cette partie du code :


global r,v
background(255)
ellipse(200,200,2*r,2*r)
if r>200 or r<2:
	v=-v
r=r+v

se trouve dans la fonction "draw". Le code ci-dessus sera donc exécuté à chaque image.

Le "background(255)" permet d'effacer l'écran à chaque nouvelle image (juste avant de redessiner le disque avec le "ellipse(200,200,2*r,2*r)". Le principe est donc simple : à chaque image, on efface tout et on redessine.

N.B. Remarquez que les déclarations des variables r et v ont été faites en dehors de la fonction "setup". Si ces déclarations avaient été faites dans la fonction "setup" nous aurions alors eu des variables locales à la fonction "setup", r et v n'auraient donc pas pu être utilisées dans la fonction "draw". Il est nécessaire ici d'utiliser un "global" ("global r,v") afin de pouvoir modifier les variables r et v dans la fonction draw.

Par défaut, Processing essaye de maintenir 60 FPS ("essaye" car si les éléments à afficher sont trop complexes, le nombre de FPS diminue).

La fonction "frameRate" permet d'imposer le nombre de FPS. Cette fonction prend un paramètre, le nombre de FPS désiré.

À faire vous-même 5.2

Ajouter un


frameRate(5)

dans la fonction "setup" du programme écrit dans le "À faire vous-même 5.1"

Comme vous pouvez le constater, l'animation est maintenant beaucoup moins fluide.

À faire vous-même 5.3

Créez un programme permettant d'avoir une balle rouge (créée avec la fonction "ellipse") qui traverse la fenêtre de gauche à droite (cliquez sur pour relancer l'animation).

À faire vous-même 5.4

Repartez du code du "À faire vous-même 5.3". Désormais, la balle doit rebondir contre les bords de la fenêtre

À faire vous-même 5.5

En vous inspirant du programme créé dans le "À faire vous-même 5.4", écrivez un programme permettant à la balle de se déplacer en diagonal. La position de départ, la vitesse de départ ainsi que la direction de départ devront être aléatoires. Les rebonds sur les bords de la fenêtre devront rester réalistes.

À faire vous-même 5.6

Votre programme devra maintenant permettre à 2 balles (une rouge et une verte) de se déplacer (position de départ, vitesse de départ et direction de départ seront aléatoires pour les 2 balles). En cas de collision entre les 2 balles, ces 2 balles devront disparaitre.

On pourra considérer qu'il y a collision si la distance entre les centres des balles est inférieure à une certaine valeur que vous devrez déterminer.
Avec Processing, pour avoir la racine carrée de X, il suffit d'écrire sqrt(X). Pour avoir le carré de X, il suffit d'écrire sq(X).

Pour poursuivre cette activité, il est nécessaire d'avoir travaillé les activités consacrées à la programmation orientée objet en Python. Si ce n'est pas le cas, rendez-vous ici

À faire vous-même 5.7

Créez un programme permettant d'avoir une balle noire qui rebondit sur les bords de la fenêtre. La position de départ, la vitesse de départ ainsi que la direction de départ devront être aléatoires. La balle ne devra pas rester immobile. Vous devrez créer une classe Balle. Cette classe possédera 2 méthodes (en plus du constructeur) : "afficheBalle" (qui permettra de dessiner la balle l'écran à l'aide d'une fonction "ellipse") et "depBalle" qui gérera les déplacements de la balle.

Comme cet exemple commence à être difficile, je vous fournis une "correction" possible : cliquez ici pour voir la "correction"

À faire vous-même 5.8

En vous inspirant du programme développé dans le "À faire vous-même 5.7", créez un programme qui permettra d'afficher 2 balles (les couleurs des balles devront être aléatoires). La position de départ, la vitesse de départ ainsi que la direction de départ des 2 balles devront être aléatoires. Les balles ne devront pas rester immobiles. Vous devrez créer une classe Balle. Cette classe possédera 2 méthodes (en plus du constructeur) : "afficheBalle" (qui permettra de dessiner la balle l'écran à l'aide d'une fonction "ellipse") et "depBalle" qui gérera les déplacements de la balle.

Dans l'exemple du "À faire vous-même 5.8" nous créons 2 objets "à la main", avec un plus grand nombre d'objets à créer (et à gérer), cette solution "manuelle" deviendrait vite ingérable. Comment faire si par exemple nous voulons créer 100 instances de "Balle" ?

Le plus simple est de "stocker" les objets dans une liste d'objet. Ainsi, nous pourrons utiliser une boucle pour parcourir cette list et avoir accès aux différents objets.

À faire vous-même 5.9

Reprenez l'exemple du "À faire vous-même 5.8" et modifiez le code pour avoir 100 balles d'affichées au lieu de 2.

Cliquez ici pour voir la "correction"