Programmation impérative en Python 3 — Cours 4. Graphismes ... · Sommaire f Partiei.Annonces f...

Programmation impérative en PythonCours 4. Graphismes tortue et Processing.

Olivier Baldellon à partir des notes, de Pierre Lezowski, Etienne Lozes et Jean-Paul Roy

Courriel : pré[email protected]

Page professionnelle : http://deptinfo.unice.fr/~obaldellon/

Université de Nice Sophia Antipolis (Université Côte d’Azur), Département d’Informatique

Sommaire

f Partie i. Annonces

f Partie ii. Du graphisme en programmation

f Partie iii. Déplacements Absolus

f Partie iv. Déplacement relatif

f Partie v. Variables locales/globales

f Partie vi. Processing

f Partie vii. Faire des animations

f Partie viii. Gestion du clavier

f Partie ix. Table des matières1/54

Annonces Partie i. Annonces

Ï Il y a eu un QCM sur Moodle pendant les vacances.

Ï C’était un QCM de révision non noté

Ï Un QCM noté sera fait à la fin du TP de la semaine prochaine

Ï Vous êtes prévenu

Correction

Ï À partir de la rentrée, je ne mettrais plus les corrections sur internet.

Ï Sauf les exercices de la fin des sujets (TD, TP) qu’on n’aura pas eu letemps de faire en séance.

Ï Il faudra être présent et bien prendre les corrections.

Correction

Sommaire

Géométries absolues ou relatives Partie ii. Du graphisme en programmation

Les déplacements absolus

Ï Coordonnées cartésiennes (dans un repère orthonormé direct)

Ï Une opération fondamentale :Ï tracer un segment d’un point A(xa,ya) à un point B(xb,yb)

Ï Le stylo se déplace d’un point A à un point B

Les déplacements relatifs

Ï Dépendent de la position et de l’orientation de la tortue.

Ï Deux opérations fondamentales :Ï Avancer tout droit d’une certaine longueurÏ Tourner sur place d’un certain angle

Ï Le stylo est une tortue dont on guide le déplacement.

Tortue vs Python Partie ii. Du graphisme en programmation

Ï Le graphisme de la tortue a été inventé au Laboratoire d’IntelligenceArtificielle du MIT vers 1968 avec le langage LOGO.

Ï Il est disponible dans la grande majorité des langages de programmationqui offrent des facultés graphiques.

Ï En particulier dans Python 3, avec le module turtle.

from turtle import * script

Ï Un fichier optionnel turtle.cfg placé dans le répertoire de travailpermet de configurer le monde de la tortue.

Ï Ne nommez pas votre fichier turtle.py !

Ï Placer en dernière ligne du fichier l’instruction mainloop().

Sommaire

Qu’est-ce qu’une tortue? Partie iii. Déplacements Absolus

Ï Une tortue est caractérisée par une position : abscisse et ordonnéeÏ pos() Ï goto(x,y)

Ï Une tortue est caractérisée par un cap (une direction) : un angle aÏ heading() Ï setheading(a)

Ï Une position de stylo (pen) : levé (up) ou baissé (down). Si le stylo estbaissé, la tortue laisse une trace en se déplaçant.

Ï down()Ï up()

Ï pencolor(c)Ï pensize(n)

Ï L’environnement naturelle d’une tortue est le canevas (le contenu de lafenêtre graphique).

Ï reset() Ï bgcolor()

Ï down()Ï up()

Exemple Partie iii. Déplacements Absolus

def triangle_rect(a, b):up()goto(0, 0)down()goto(a, 0)goto(0, b)goto(0, 0)

bgcolor('yellow') # couleur de fondpencolor('red') # couleur du stylotriangle_rect(200,100) # on appelle la fonction

script

Exemple Partie iii. Déplacements Absolus

def triangle_rect(a, b):up()goto(0, 0)down()goto(a, 0)goto(0, b)goto(0, 0)

bgcolor('yellow') # couleur de fondpencolor('red') # couleur du stylotriangle_rect(200,100) # on appelle la fonction

script

Tracer une fonction Partie iii. Déplacements Absolus

# Traceurdef trace_fonction(f, xmin, xmax, dx):

(x,y) = (xmin,f(xmin))up() ; goto(x,y); down()while x < xmax:

(x,y) = (x+dx,f(x+dx))goto(x, y)

script

Ï On peut affecter deux variables à la fois (x,y)=(a,b)

import math

def sinusoïde(x):return 100*math.cos(x/10)

# On lance le scriptreset() # Effacement de canevas réinitialisationhideturtle() # Inutile d'afficher la tortuetracer(False) # On ne montre pas le tracertrace_fonction(sinusoïde,-200,200,1.0)

script

Ï Le fichier turtle.cfg, s’il existe, permet de configurer le canevas, laforme de la tortue, etc.

script

import math

script

import math

script

import math

script

Les tuples, un type composé Partie iii. Déplacements Absolus

Ï Vous avez noté la présence de tuples (uplets en français), .Ï ici un couple (x,y) : un 2-upletÏ Un triplet (ou 3-uplet) se noterait (x,y,z), etc.

Ï Les composantes d’un tuple p se notent p[0], p[1], p[2], …

Ï Le résultat de la fonction pos() est un couple.

>>> p=pos()>>> p(25.0, 10.0)>>> p[0]25.0>>> p[1]10.0

Ï Affectation de tuples : simple et efficace

>>> (x,y)=(1,2)>>> (x,y)=(y,x) # Ça marche !>>> (x,y)(2, 1)

>>> p=pos()>>> p(25.0, 10.0)>>> p[0]25.0>>> p[1]10.0

p=pos()>>> p(25.0, 10.0)>>> p[0]25.0>>> p[1]10.0

>>> p=pos()

>>> p(25.0, 10.0)>>> p[0]25.0>>> p[1]10.0

>>> p=pos()>>>

p(25.0, 10.0)>>> p[0]25.0>>> p[1]10.0

>>> p=pos()>>> p

(25.0, 10.0)>>> p[0]25.0>>> p[1]10.0

>>> p=pos()>>> p(25.0, 10.0)>>>

p[0]25.0>>> p[1]10.0

>>> p=pos()>>> p(25.0, 10.0)>>> p[0]

25.0>>> p[1]10.0

>>> p=pos()>>> p(25.0, 10.0)>>> p[0]25.0>>>

p[1]10.0

>>> p=pos()>>> p(25.0, 10.0)>>> p[0]25.0>>> p[1]

>>> p=pos()>>> p(25.0, 10.0)>>> p[0]25.0>>> p[1]10.0

(x,y)=(1,2)>>> (x,y)=(y,x) # Ça marche !>>> (x,y)(2, 1)

>>> p=pos()>>> p(25.0, 10.0)>>> p[0]25.0>>> p[1]10.0

>>> (x,y)=(1,2)

>>> (x,y)=(y,x) # Ça marche !>>> (x,y)(2, 1)

>>> p=pos()>>> p(25.0, 10.0)>>> p[0]25.0>>> p[1]10.0

>>> (x,y)=(1,2)>>>

(x,y)=(y,x) # Ça marche !>>> (x,y)(2, 1)

>>> p=pos()>>> p(25.0, 10.0)>>> p[0]25.0>>> p[1]10.0

>>> (x,y)=(1,2)>>> (x,y)=(y,x) # Ça marche !

>>> (x,y)(2, 1)

>>> p=pos()>>> p(25.0, 10.0)>>> p[0]25.0>>> p[1]10.0

>>> (x,y)=(1,2)>>> (x,y)=(y,x) # Ça marche !>>>

(x,y)(2, 1)

>>> p=pos()>>> p(25.0, 10.0)>>> p[0]25.0>>> p[1]10.0

>>> (x,y)=(1,2)>>> (x,y)=(y,x) # Ça marche !>>> (x,y)

(2, 1)

>>> p=pos()>>> p(25.0, 10.0)>>> p[0]25.0>>> p[1]10.0

Courbes paramétriques Partie iii. Déplacements Absolus

Ï Un tortue qui se déplace forme une courbe.

Ï La position de la tortue dépend du temps (x(t),y(t)).

Ï Donner une formule pour x(t) et y(t) définie une courbe paramétrique.

def trace_parametrique(tmin,tmax,fx,fy,dt):""" Trace la courbe d'équation x=fx(t) y=fy(t)avec tmin<=t<tmax et un pas dt"""t=tmin(x,y)=(fx(t),fy(t))up() ; goto(x,y) ; down()while t<tmax:

(x,y) = (fx(t),fy(t))goto(x,y)t=t+dt

script

Ï La cinématique (étude du mouvement) s’intéresse à la trajectoire d’uncorps dont les coordonnées (x,y) sont fonction d’un paramètre t.

Ï Autrement dit : x = x(t) et y = y(t) pour t dans un certain intervalle I .

script

Exemples Partie iii. Déplacements Absolus

Ï Exemple 1 : y = f (x) est équivalent à x(t) = t et y(t) = f (t)

Ï Exemple 2 : pour t ∈ [0,2π[, le cercle de centre A(a,b) et de rayon r estdonné par les équations décrivant un point du cercle M(x,y) :

{x(t) = a+ r cos(t),

y(t) = b+ r sin(t).

Ï Exemple 3 : Soit un segment [A,B] d’extrémité A(xa,ya) et B(xb,yb)

{x(t) = t ·xa + (1− t)xb,

y(t) = t ·ya + (1− t)yb,

On a alors −−−→MA2 = t−−−→A1A2

Ï Exemple 2 : pour t ∈ [0,2π[, le cercle de centre A(a,b) et de rayon r estdonné par les équations décrivant un point du cercle M(x,y) :

{x(t) = a+ r cos(t),

y(t) = b+ r sin(t).

{x(t) = t ·xa + (1− t)xb,

y(t) = t ·ya + (1− t)yb,

Ï Exemple 2 : pour t ∈ [0,2π[, le cercle de centre A(a,b) et de rayon r estdonné par les équations décrivant un point du cercle M(x,y) :{

x(t) = a+ r cos(t),

y(t) = b+ r sin(t).

{x(t) = t ·xa + (1− t)xb,

y(t) = t ·ya + (1− t)yb,

x(t) = a+ r cos(t),

y(t) = b+ r sin(t).

{x(t) = t ·xa + (1− t)xb,

y(t) = t ·ya + (1− t)yb,

x(t) = a+ r cos(t),

y(t) = b+ r sin(t).

Ï Exemple 3 : Soit un segment [A,B] d’extrémité A(xa,ya) et B(xb,yb){x(t) = t ·xa + (1− t)xb,

y(t) = t ·ya + (1− t)yb,

Traçons un cercle Partie iii. Déplacements Absolus

Ï Tortue parcourant un cercle de centre O et de rayon 200.

Ï Le caractère continu du mouvement est une illusion d’optique.

Ï Le paramètre t (le temps) avance par pas de dt

Ï Un cercle est équivalent (à l’œil nu) à une polygone à beaucoup de côté.

Ï 40 = Beaucoup. Donc on prend

dt = Périmètre40

= 2×π

40≈ 0,16 radian

def anim_cercle(r):dt = 2 * pi / 40t = 0 ; (x,y)=(r,0) # départup() ; goto(x,y) ; down() # On se déplace en M0while t < 6 * pi: # 3 tours (3*2π)

ts = t + dtxs = r * cos(ts) ; ys = r * sin(ts)goto(xs,ys)t = ts

script

dt = Périmètre40

= 2×π

40≈ 0,16 radian

script

dt = Périmètre40

= 2×π

40≈ 0,16 radian

script

dt = Périmètre40

= 2×π

40≈ 0,16 radian

script

Ï 40 = Beaucoup.

Donc on prend

dt = Périmètre40

= 2×π

40≈ 0,16 radian

script

dt = Périmètre40

= 2×π

40≈ 0,16 radian

script

dt = Périmètre40

= 2×π

40≈ 0,16 radian

script

Ou plus simplement Partie iii. Déplacements Absolus

from math import *from turtle import *

def anim_cercle(r):dt = 2 * pi / 40t = 0 ; (x,y) = (r, 0) # départup() ; goto(x,y) ; down() # en M0while t < 6 * pi: # 3 tours

def X(t):return 200+200*cos(t)

def Y(t):return 200*sin(t)

tracer(True) # montrer les étapesshowturtle() # montrer où se situe la tortue/stylo

dt = 2*pi/40trace_parametrique(0,2*pi+dt,X,Y,dt) #2π+dt fermer le cercleanim_cercle(200)

script

Sommaire

Les déplacements relatifs Partie iv. Déplacement relatif

Ï Jusqu’alors on se déplaçait en direction de coordonnées absolues.

Ï Historiquement notre tortue n’utilise que des dépacements relatifs.

Ï Elle peut avancer, reculer, se trouver vers la droite la gauche.

Changement de capÏ left(a)Ï right(a)Ï towards(p)

Changement de positionÏ forward(d)Ï back(d)

Ï Remarque left(a)⇔right(-a) et forward(a)⇔back(-a)

Ï Une suite d’appels aux fonctions left et forward permet donc dedécrire une courbe connexe (d’un seul tenant).

Ï En levant le crayon, on peut donc tracer plusieurs courbes non reliéesentre elles (connexes par arcs).

Carré et autres polygones Partie iv. Déplacement relatif

Ï Dessin d’un carré de côté c.

def carre(c):i=0while i<4:

forward(c)left(90)

script

>>> carre(100)

Ï Dessin d’un polygone de côté c

def polygone(n, c):a = 360.0 / nfor i in range(n):

forward(c)left(a)

script

>>> polygone(8,100)

forward(c)left(90)

script

carre(100)

forward(c)left(a)

script

>>> polygone(8,100)

forward(c)left(90)

script

>>> carre(100) shell

forward(c)left(a)

script

>>> polygone(8,100)

forward(c)left(90)

script

forward(c)left(a)

script

>>> polygone(8,100)

forward(c)left(90)

script

forward(c)left(a)

script

>>> polygone(8,100)

forward(c)left(90)

script

forward(c)left(a)

script

polygone(8,100)

forward(c)left(90)

script

forward(c)left(a)

script

>>> polygone(8,100) shell

La courbe fractale de Koch Partie iv. Déplacement relatif

La suite (Kn) des courbes de Koch de base T est construite de proche enproche (par récurrence).

Ï K0 est un segment de longueur T .

Ï K1 est obtenue par chirurgie à partir de K0.

Ï K2 est obtenue par la même chirurgie appliquéeà chaque côté de K1.

Ï À chaque étape, tout les segments ont la même longueur.

Fractale en Python Partie iv. Déplacement relatif

Ï Mathématiquement, la courbe Kn s’obtient comme assemblage de quatrecourbes Kn−1. On peut donc la dessiner par récurrence sur n.def koch(n, T):

""" approximant de la courbede Koch de niveau n et debase T """if n == 0:

forward(T)else:

koch(n - 1, T / 3)left(60)koch(n - 1, T / 3)right(120)koch(n - 1, T / 3)left(60)koch(n - 1, T / 3)

script

Ï La courbe de Koch K est la limite des courbes Kn quand n →∞.

Ï Découverte en 1904 par le mathématicien suédois Helge von Koch. Lacourbe K est fractale, continue, mais sans tangente en aucun point.

La fractale ultime Partie iv. Déplacement relatif

L'approximant de niveau 6

L'antifloconLe flocon de Von Koch

Sommaire

Variables locales Partie v. Variables locales/globales

Ï On appelle variable localeÏ une variable définie dans le corps d’une fonction.Ï une variable définie comme argument d’une fonction

Ï Les noms n’ont pas d’importance.

def boucle(n):j=0while j<n:

print(j,end='')j=j+1

script

⇔def boucle(fin):

k=0while k<fin:

print(k,end='')k=k+1

script

Ï N’est utilisable que localement.

>>> j=17>>> boucle(3)012>>> j17

Ï Les noms n’ont pas d’importance.def boucle(n):

j=0while j<n:

script

⇔def boucle(fin):

k=0while k<fin:

script

>>> j=17>>> boucle(3)012>>> j17

j=0while j<n:

script

def boucle(fin):k=0while k<fin:

script

>>> j=17>>> boucle(3)012>>> j17

j=0while j<n:

script

⇔def boucle(fin):

k=0while k<fin:

script

>>> j=17>>> boucle(3)012>>> j17

j=0while j<n:

script

⇔def boucle(fin):

k=0while k<fin:

script

j=17>>> boucle(3)012>>> j17

j=0while j<n:

script

⇔def boucle(fin):

k=0while k<fin:

script

>>> j=17

>>> boucle(3)012>>> j17

j=0while j<n:

script

⇔def boucle(fin):

k=0while k<fin:

script

>>> j=17>>>

boucle(3)012>>> j17

j=0while j<n:

script

⇔def boucle(fin):

k=0while k<fin:

script

>>> j=17>>> boucle(3)

012>>> j17

j=0while j<n:

script

⇔def boucle(fin):

k=0while k<fin:

script

>>> j=17>>> boucle(3)012>>>

j=0while j<n:

script

⇔def boucle(fin):

k=0while k<fin:

script

>>> j=17>>> boucle(3)012>>> j

j=0while j<n:

script

⇔def boucle(fin):

k=0while k<fin:

script

>>> j=17>>> boucle(3)012>>> j17

Variables globales Partie v. Variables locales/globales

Ï Une variable en dehors de toute fonction est globale. Pour y faireréférence dans une fonction, il faut le déclarer explicitement.

def boucle(n):global j # <- Je peux utiliser un j défini ailleursprint('j =',j)j=0while j<n:

script

Ï Contrairement aux variables locales, les noms sont importants.

>>> j=17>>> boucle(3)j = 17012>>> j3

Ï Par défault, les variables sont locales

Ï Variable globale : à éviter sauf cas exceptionnels.

script

j=17>>> boucle(3)j = 17012>>> j3

script

>>> j=17

>>> boucle(3)j = 17012>>> j3

script

>>> j=17>>>

boucle(3)j = 17012>>> j3

script

>>> j=17>>> boucle(3)

j = 17012>>> j3

script

>>> j=17>>> boucle(3)j = 17012>>>

script

>>> j=17>>> boucle(3)j = 17012>>> j

script

>>> j=17>>> boucle(3)j = 17012>>> j3

script

>>> j=17>>> boucle(3)j = 17012>>> j3

script

>>> j=17>>> boucle(3)j = 17012>>> j3

Ï Variable globale : à éviter sauf cas exceptionnels.23/54

Fonctions locales Partie v. Variables locales/globales

Ï On peut définir une fonction dans une fonction

def max3(a,b,c):def max2(x,y):

if x>y: return xelse: return y

return max2(max2(a,b),c)

script

Ï Mais la fonction locale ne peut pas être utilisée ailleurs.

>>> max3(17,-5,133)133>>> max2(3,4)Traceback (most recent call last):File "<stdin>", line 1, in <module>

NameError: name 'max2' is not defined

Ï Difficile à lire. Privilégiez des fonctions locales sur 1 ou 2 lignes.

def cercle(t):def X(t): return 100*cos(t/10)def Y(t): return 100*sin(t/10)return (X(t),Y(t))

script

max3(17,-5,133)133>>> max2(3,4)Traceback (most recent call last):File "<stdin>", line 1, in <module>

script

>>> max3(17,-5,133)

133>>> max2(3,4)Traceback (most recent call last):File "<stdin>", line 1, in <module>

script

>>> max3(17,-5,133)133>>>

max2(3,4)Traceback (most recent call last):File "<stdin>", line 1, in <module>

script

>>> max3(17,-5,133)133>>> max2(3,4)

Traceback (most recent call last):File "<stdin>", line 1, in <module>

script

Ï Difficile à lire.

Privilégiez des fonctions locales sur 1 ou 2 lignes.

script

Procédures et fonctions Partie v. Variables locales/globales

Il y a deux types de programme.

Ï Les fonctions sont des programmes qui renvoient (return) une valeur etne modifient pas l’état.

Ï semblables au fonction mathématique

Ï Les procédures sont des programmes qui ne renvoient aucune valeurmais modifient l’état du système. L’état peut être :

Ï L’affichage sur l’écran (print) ;Ï la sauvegarde d’un fichier sur le disque ;Ï la modification d’une fenêtre graphique.

Ï On peut modifier l’état et renvoyer une valeur en même temps.Ï À éviter sans bonnes raisons.

Ï Les procédures sont des programmes qui ne renvoient aucune valeurmais modifient l’état du système.

L’état peut être :Ï L’affichage sur l’écran (print) ;Ï la sauvegarde d’un fichier sur le disque ;Ï la modification d’une fenêtre graphique.

Ï L’affichage sur l’écran (print) ;

Ï la sauvegarde d’un fichier sur le disque ;Ï la modification d’une fenêtre graphique.

Ï L’affichage sur l’écran (print) ;Ï la sauvegarde d’un fichier sur le disque ;

Ï la modification d’une fenêtre graphique.

Ï On peut modifier l’état et renvoyer une valeur en même temps.

Ï À éviter sans bonnes raisons.

Sommaire

Qu’est-ce donc? Partie vi. Processing

Ï Processing est un environnement de programmation libre (et gratuit)Ï Disponible pour : GNU/Linux, Windows, Mac, Android, Rasperry Pi,

Ï Permet de construire une scène statique.Ï c’est-à-dire une image composée de formes élémentaires.

Ï Permet aussi de programmer une scène animée.Ï Une animation n’est qu’une suite d’images.

Ï Permet de gérer une scène interactive (jeu, etc.)Ï Gestion du clavier et de la souris.

Le mode Python Partie vi. Processing

Ï Processing possède plusieurs modes (Java, Javascript, Python).

Ï Le mode Python permet d’écrire du code qui s’évalue comme sous IDLE(à quelques détails près : c’est du Python 2).

Sélectionnez le mode Pythonet, au besoin, installez-le.

Mon premier programme Partie vi. Processing

Exécuter

Ï Un projet Processing s’appelle un « sketch ».

Ï Quand vous sauvez un projet, vous créez un répertoire qui contient votrecode : c’est le fichier avec une extension .pyde.

Ï Dans ce répertoire, vous pourrez aussi avoir un sous-répertoire data quicontient des données (images, textes, etc.) qui seront utilisées par le projet.

Exécuter

Le système RGB Partie vi. Processing

Ï En informatique, toutes les couleurs sont codées comme la somme detrois couleurs : le rouge, le vert et le bleu (RGB)

Chaque couleur va de 0 à 255.Ï Rouge : (255,0,0)Ï Vert : (0,255,0)Ï Bleu : (0, 0, 255)

Ï Noir (0,0,0)Ï Gris foncé (17, 17, 17)Ï Gris clair (200,200,200)Ï Blanc (255,255,255)

Ï Jaune (255,255,0)Ï Magenta (255,0,255)Ï Cyan (0,255,255)

Ï Bleu flash (0,0,255)Ï Bleu foncé (0,0,100)Ï Bleu clair (99,99,255)

Formes géométriques de base Partie vi. Processing

# Définition des couleursrouge = color(255, 0, 0)vert = color(0, 255, 0)bleu = color(0, 0, 255)jaune = color(255, 255, 0)rouge_40pc = color(255, 0, 0, 40)# Mis en place fenêtresize(200, 400)background(jaune)

# Ligne noireline(50, 20, 200, 400)# Le carré bleustroke(rouge)fill(bleu)rect(50, 50, 30, 30)# L’ellipse vertefill(vert)ellipse(170, 300, 200, 50)# Le disque rougefill(rouge_40pc)ellipse(130, 250, 100, 100)

script

Les coordonnées en informatique Partie vi. Processing

�Processing, comme la plupart des langages de programmation

graphique n’utilise pas l’orientation habituelle des axes en mathématiques.

Mathématiques Informatique

Les coordonnées en informatique Partie vi. Processing

�Processing, comme la plupart des langages de programmation

graphique n’utilise pas l’orientation habituelle des axes en mathématiques.

Mathématiques Informatique

Les modes CORNER, CORNERS et CENTER Partie vi. Processing

size(400, 400)line(100, 0, 100, 400)line(300, 0, 300, 400)line(0, 150, 400, 150)line(0, 350, 400, 350)

fill(255, 0, 0) # rougerect(100, 150, 70, 50)

rectMode(CORNERS)fill(0, 0, 255) # bleurect(300, 350, 370, 400)

rectMode(CENTER)fill(0, 255, 0) # vertrect(300, 150, 70, 50)

ellipseMode(CORNER)fill(255, 255, 0) # jauneellipse(100, 350, 70, 50)

script

Ï CORNER (par défaut) :(xgauche, yhaut, largeur, hauteur)Ï CORNERS :(xgauche, yhaut, xdroite, ybas)Ï CENTER :(xcentre, ycentre, larg, haut)

fill(255, 0, 0) # rougerect(100, 150, 70, 50)

script

Ï CORNER (par défaut) :(xgauche, yhaut, largeur, hauteur)

Ï CORNERS :(xgauche, yhaut, xdroite, ybas)Ï CENTER :(xcentre, ycentre, larg, haut)

fill(255, 0, 0) # rougerect(100, 150, 70, 50)

script

Ï CORNER (par défaut) :(xgauche, yhaut, largeur, hauteur)Ï CORNERS :(xgauche, yhaut, xdroite, ybas)

Ï CENTER :(xcentre, ycentre, larg, haut)

fill(255, 0, 0) # rougerect(100, 150, 70, 50)

script

fill(255, 0, 0) # rougerect(100, 150, 70, 50)

script

Afficher un texte Partie vi. Processing

size(400,450)background(255,255,100) #jaune blancline(400//2, 0, 400//2, 450)

fill(255, 0, 0) # rougetextSize(14)textAlign(LEFT)text('Gauche', 200, 50)

fname='EB Garamond 08 Regular'size=44 ; font=createFont(fname,size)textFont(font)

textAlign(RIGHT)text('Droite', 200, 200)textAlign(CENTER)text(u'Centré', 200, 300)# u pour UTF-8long = textWidth(u'Centré')rectMode(CENTER)fill(0, 0, 0, 0) # pas de couleur 0rect(400//2, 300-size//2, long, size)

script

Ï print(PFont.list())permet d’afficher la liste desfontes disponibles dans laconsole.Ï Attention aux accents !Marquez vos chaînes commeétant en UTF-8.

script

Ï print(PFont.list())permet d’afficher la liste desfontes disponibles dans laconsole.

Ï Attention aux accents !Marquez vos chaînes commeétant en UTF-8.

script

Ï print(PFont.list())permet d’afficher la liste desfontes disponibles dans laconsole.Ï Attention aux accents !Marquez vos chaînes commeétant en UTF-8.

Insérer des images Partie vi. Processing

# Images : dossier « data »fond = loadImage('gazon.png')escargot = loadImage('escargot.png')size(900, 400); background(fond)imageMode(CENTER)

# Placer l’imageimage(escargot, 90, 80)

# Redimensionnementlarg=escargot.width * 1.8,long=escargot.height * 0.75image(escargot, 300, 200,larg,long)

# TranslationpushMatrix()translate(500, 300)image(escargot, 0, 0)popMatrix()

# Translation + rotationpushMatrix()translate(700, 100)rotate(radians(90))image(escargot, 0, 0)popMatrix()

script

Ï Les commandes placent l’imaged’escargot de gauche à droite.

Ï Pour les rotations, les angles sonten radians, dans le sens des aiguillesd’une montre (sens indirect).

script

Sommaire

Principes Partie vii. Faire des animations

Ï Pour l’œil une image animée est une succession rapide d’images fixes.

Ï En pratique, 20 à 30 images par seconde suffisent à duper l’œil humain.

Ï On notera FREQ ce nombre, appelé fréquence de rafraîchissiment.

Ï Une horloge va scander la mesure à cette fréquence.

Ï À chaque top d’horloge, on affichera une nouvelle image :Ï soit en modifiant la précédente (efficace, mais pas toujours possible),Ï soit en recouvrant entièrement la précédente.

Approche Partie vii. Faire des animations

Ï Comment résoudre un problème complexe (ex : faire une animation) ?Ï le découper en sous-problèmes indépendents.Ï ici trois sous-problèmes suffisent.

Ï Remarquons qu’ils y a deux types de paramètres du système :Ï ceux qui sont fixes tout au long de l’animation (les données initiales)Ï ceux qui évoluent (l’état).

Ï (1) Qu’est ce qui permet de décrire l’état du système?Ï souvent une collection de nombres suffisent.Ï La position (abcisse et ordonné), le cap, la taille, etc.Ï Seul ce qui évolue est dans l’état.

Ï (2) Quelle image afficher à partir de l’état et des données initiales.Ï Tracer le fond.Ï Placer et tracer les objets en fonction de leur état.

Ï (3) Comment l’état évolue-t-il ?

Le modèle MVC Partie vii. Faire des animations

Ï Nous allons suivre l’approche MVC (Model View Controller).Ï Le but est d’animer un monde d’objets virtuels (balles, personnages, etc.).

Ï (1) Model Préciser le Modèle mathématique ou Monde : l’ensembleminimal des variables qui décrivent l’état des objets.

Ï La position (x,y) pour une balle se déplaçant au hasard.Ï L’angle polaire θ pour une balle tournant sur un cercle.Ï Un paramètre t pour une balle se dirigeant sur une trajectoire d’équation

paramétrique x(t), y(t).

Ï (2) Préciser comment le monde évolue à chaque top d’horloge.

Ï (3) View : préciser comment le monde sera transformé en une scène (imagerectangulaire) contenant des images : la Vue.

Ï (4) Controler Préciser (optionnellement) comment le monde va intéragir avec lescontrôles de l’utilisateur, via le clavier ou la souris.

Planter le décor Partie vii. Faire des animations

Ï Mise en place de la scène.Ï Une scène est une image rectangulaire.Ï Le fond sera une scène contenant les éléments fixes de l’animation.

LARG = 600HAUT = 200

def fond():background(255, 255, 255) # fond blancstroke(0, 0, 255) # stylo bleuline(LARG/2, 0, LARG/2, HAUT)# trait vertical au milieu

script

Ï Pour animer le mouvement d’un objet sur fond fixe :Ï on ajoutera l’image de cet objet aux coordonnées (x,y) de la scèneÏ ces coordonnées (x,y) évolueront légèrement à chaque image.

script

Ï Pour animer le mouvement d’un objet sur fond fixe :

Ï on ajoutera l’image de cet objet aux coordonnées (x,y) de la scèneÏ ces coordonnées (x,y) évolueront légèrement à chaque image.

script

Ï Pour animer le mouvement d’un objet sur fond fixe :Ï on ajoutera l’image de cet objet aux coordonnées (x,y) de la scène

Ï ces coordonnées (x,y) évolueront légèrement à chaque image.

script

L’état Partie vii. Faire des animations

Ï Nous allons animer une balle rouge :Ï qui oscille entre les murs gauche et droitÏ avec une vitesse nulle au rebond (une sorte de pendule horizontal).

Ï On ne traite pas du problème de la collision sur le mur.

Ï nous modéliserons la position du centre de la balle sous la forme d’unefonction périodique d’un seul paramètre réel t.

(x,y) = (LARG *(1 + sin(t))/2, HAUT/2)

Ï L’abscisse x varie entre 0 et LARG, tandis que l’ordonnée y est constante.

Ï Le monde sera réduit à la variable t.Ï Il suffit de connaître t pour tout afficher (le fond et la balle) !

(x,y) = (LARG *(1 + sin(t))/2, HAUT/2)

L’évolution du monde Partie vii. Faire des animations

Ï La mise à jour du monde. Étant donné un monde M (ensemble desvariables), quel est le monde suivant (au prochain top d’horloge) ?

Ï On a discrétisé la fonction d’abscisse x(t). On ne calcule pas en continu,mais par pas discrets de 0.1 :

def suivant(t): # monde −−−> mondereturn t + 0.1

script

L’évolution du monde Partie vii. Faire des animations

Ï La mise à jour du monde. Étant donné un monde M (ensemble desvariables), quel est le monde suivant (au prochain top d’horloge) ?

Ï On a discrétisé la fonction d’abscisse x(t). On ne calcule pas en continu,mais par pas discrets de 0.1 :

def suivant(t): # monde −−−> mondereturn t + 0.1

script

Afficher l’état Partie vii. Faire des animations

Ï L’affichage du monde. Étant donné un monde M, comment le transformeren une scène pour le visualiser ?

def dessine(t): # dessine le mondefond() # on dessine le fondfill(255, 0, 0, 40) # pinceau rouge transparentnoStroke() # on ne trace pas les contours(x,y) = (LARG * (1 + sin(t)) / 2, HAUT / 2)ellipseMode(CENTER)ellipse(x, y, RBALLE, RBALLE) # dessin de la balle

script

Ï On ne décrit pas l’animation par une boucle, on exprime seulement dansdes fonctions séparées

Ï comment le monde évolue,Ï comment il se visualise de manière statique à un moment donné.

Ï Il reste à voir comment va s’organiser la simulation dans le temps.

script

Ô temps! suspends ton vol… Partie vii. Faire des animations

Ï Une horloge bat le tempo de manière régulière à une certaine fréquence.

Ï À chaque top d’horloge, on affiche l’état et on le fait évoluer.

Ï Pour les appeler, on les place dans la fonction réservée draw.

Ï Dans la fonction réservée setup, on initialise le monde et on fixe lafréquence d’horloge.

def setup():global t # le monde est une variable globalet = 0 # valeur initiale du mondesize(LARG, HAUT) # dimensions : obligatoire avant dessinFREQ = 28 # nombre d'appels à draw par seconde

def draw():global tdessine(t) # On affiche l’étatt = suivant(t) # On le fait évoluer

script

Un autre exemple (1/2) Partie vii. Faire des animations

Ï On souhaite afficher un compte à rebours.

−→ −→ −→ … −→

Ï Quel est le monde? Prenons n, le nombre d’images restant à afficher.

Ï Comment met-on à jour le monde?

def suivant(n):return n - 1

script

Ï Comment affiche-t-on le monde?

def dessine(n):background(255, 255, 0) #fond jaunefill(255, 0, 0) #stylo rouget = float(n) / FREQ #n/FREQ suffirait en Python 3textSize(HAUT / 3) # en Processing 3/2 == 1textAlign(CENTER) # et 3.0 / 2 == 1.5text(str(t)[:3],LARG/2,HAUT/2) #pour 1 seule décimale

script

−→ −→ −→ … −→

Ï Quel est le monde?

Prenons n, le nombre d’images restant à afficher.

script

−→ −→ −→ … −→

script

−→ −→ −→ … −→

script

−→ −→ −→ … −→

script

−→ −→ −→ … −→

script

−→ −→ −→ … −→

script

LARG = 800HAUT = 800FREQ = 28

def dessine(n):background(255, 255, 0)fill(255, 0, 0)t = float(n) / FREQtextSize(HAUT / 3)textAlign(CENTER)st=str(t)[:3]text(st, LARG/2,HAUT/2)

script

def setup():global nsize(LARG, HAUT)n = 10 * FREQ

# valeur initiale# du monde

frameRate(FREQ)

def draw():global ndessine(n)n = suivant(n)if n < 0:

noLoop()

script

Ï noLoop() permet d’arrêter d’appeler draw à chaque top d’horloge.

script def setup():global nsize(LARG, HAUT)n = 10 * FREQ

frameRate(FREQ)

noLoop()

script

script def setup():global nsize(LARG, HAUT)n = 10 * FREQ

frameRate(FREQ)

noLoop()

script

Sommaire

La fonction keypressed Partie viii. Gestion du clavier

Ï Pour gérer des évènements clavier : il faut définir la fonction réservéekeyPressed

Ï Par exemple, on veut afficher un compteur :Ï qu’on incrémente en appuyant sur +Ï qu’on décrémente en appuyant sur ← (flèche du clavier)Ï et qu’on remet à 0 avec toute autre touche.

Ï Voici le code (complet !).

def keyPressed():global nif key == '+':

n = n + 1elif keyCode == LEFT:

n = n - 1else:

script

�setup et draw sont obligatoires.

def setup():global nsize(100, 100)n = 0

def draw():global nbackground(255, 255, 0)fill(255, 0, 0)text(str(n), 50, 50)

script

Ï Par exemple, on veut afficher un compteur :

Ï qu’on incrémente en appuyant sur +Ï qu’on décrémente en appuyant sur ← (flèche du clavier)Ï et qu’on remet à 0 avec toute autre touche.

n = n - 1else:

script

Ï Par exemple, on veut afficher un compteur :Ï qu’on incrémente en appuyant sur +

Ï qu’on décrémente en appuyant sur ← (flèche du clavier)Ï et qu’on remet à 0 avec toute autre touche.

n = n - 1else:

script

Ï Par exemple, on veut afficher un compteur :Ï qu’on incrémente en appuyant sur +Ï qu’on décrémente en appuyant sur ← (flèche du clavier)

Ï et qu’on remet à 0 avec toute autre touche.

n = n - 1else:

script

n = n - 1else:

script

n = n - 1else:

script

n = n - 1else:

script

Retour vers le futur Partie viii. Gestion du clavier

Reprenons le pendule horizontal.

Ï On souhaite pouvoir inverser la flèche du temps en appuyant au clavier.

Ï On a donc deux dynamiques, normale et à rebours

Ï On passe de l’une à l’autre en appuyant sur le clavier

dynamique normale dynamique à rebours

Quel est le monde? Partie viii. Gestion du clavier

Ï Analysons le problème :

Ï il faut connaître t pour dessiner la balle,Ï il faut connaître la dynamique pour savoir comment mettre t à jour,Ï il faut pouvoir modifier la dynamique en pressant le clavier.

Ï Conclusion : le monde est déterminé par le couple (t,dynamique).

Ï Comment représenter la dynamique?

def suivant(monde):(t,enAvant) = mondeif enAvant:

t = t + 0.1else:

t = t - 0.1return (t,enAvant)

script

Solution 1 : un booléenkeyPressed() inverse le booléen enAvant.

def suivant(monde):(t,dt) = mondereturn (t+dt)

script

Solution 2 : un flottantkeyPressed() envoie dt sur -dt.

Ï Analysons le problème :Ï il faut connaître t pour dessiner la balle,

Ï il faut connaître la dynamique pour savoir comment mettre t à jour,Ï il faut pouvoir modifier la dynamique en pressant le clavier.

t = t + 0.1else:

script

Ï Analysons le problème :Ï il faut connaître t pour dessiner la balle,Ï il faut connaître la dynamique pour savoir comment mettre t à jour,

Ï il faut pouvoir modifier la dynamique en pressant le clavier.

t = t + 0.1else:

script

Ï Analysons le problème :Ï il faut connaître t pour dessiner la balle,Ï il faut connaître la dynamique pour savoir comment mettre t à jour,Ï il faut pouvoir modifier la dynamique en pressant le clavier.

t = t + 0.1else:

script

t = t + 0.1else:

script

t = t + 0.1else:

script

t = t + 0.1else:

script

t = t + 0.1else:

script

Dessin à main levée à la souris Partie viii. Gestion du clavier

Pour aborder la gestion de la souris, penchons-noussur cette animation (certes, plutôt une application)avec nos lunettes Modèle-Vue-Contrôle.

Nous avons accès à des fonctions() et des variables.

Œuvre de J.-P. Roy

Ï Où la souris se trouve-t-elle ?Ï mouseX Ï mouseY

Ï la souris est-elle pressée?Ï mousePressed Ï mousePressed()Ï mouseReleased()

Ï la souris a-t-elle été déplacée?Ï mouseMoved() Ï mouseDragged()

Pour aborder la gestion de la souris, penchons-noussur cette animation (certes, plutôt une application)avec nos lunettes Modèle-Vue-Contrôle.Nous avons accès à des fonctions() et des variables.

Œuvre de J.-P. Roy

Ï Où la souris se trouve-t-elle ?Ï mouseX Ï mouseY

Œuvre de J.-P. RoyÏ Où la souris se trouve-t-elle ?

Ï mouseX Ï mouseY

Œuvre de J.-P. RoyÏ Où la souris se trouve-t-elle ?Ï mouseX Ï mouseY

Ï la souris est-elle pressée?

Ï mousePressed Ï mousePressed()Ï mouseReleased()

Ï la souris a-t-elle été déplacée?

Ï mouseMoved() Ï mouseDragged()

Remarque : si on doit redessiner l’image en entier àchaque fois, le monde doit contenir de quoirecalculer l’image. C’est possible (voir exercice TP 5).

Ï La fonction dessiner(m) ajoutera des traits, mais n’effacera pas l’image.

Ï La question subsiste : quel est le monde pour cette animation?

Ï Voici les deux principes du dessin à main levée :Ï à chaque fois que la souris est pressée, on ajoute un trait entre la position

précédente de la souris, notée (px,py) et la nouvelle position(mouseX,mouseY),

Ï à chaque fois que la souris est déplacée, on actualise (px,py) etéventuellement le dessin (dans quel ordre?).

Ï Le monde est la position (px,py).

Ï Voici les deux principes du dessin à main levée :

Ï à chaque fois que la souris est pressée, on ajoute un trait entre la positionprécédente de la souris, notée (px,py) et la nouvelle position(mouseX,mouseY),

Le code Partie viii. Gestion du clavier

LARG = 600HAUT = 600# le monde est (px, py) !def suivant(m) :

return (mouseX, mouseY)

script

def setup() :global msize(LARG, HAUT)background(255, 255, 255)stroke(0)frameRate(28)m = (0, 0)

def draw() :global mdessiner(m)m = suivant(m)

script

def dessiner(m) :(px, py) = m(qx, qy) = (mouseX,mouseY)if mousePressed:

line(px,py,qx,qy)

script

Ï Remarques : background est dans setup et pas dans drawÏ on ne redessine pas toute l’image.

Ï Il faut appeller dessiner(m) avant m=suivant(m).Ï Pour dessiner il faut l’ancienne et la nouvelle valeur de m!

script

line(px,py,qx,qy)

script

line(px,py,qx,qy)

script

Merci pour votre attentionQuestions

?54/54

Cours 4 — Graphismes tortue et Processing.

Annonces

f Partie ii. Du graphisme enprogrammation

Géométries absolues ou relatives

Tortue vs Python

Qu’est-ce qu’une tortue ?

Exemple

Tracer une fonction

Les tuples, un type composé

Courbes paramétriques

Exemples

Traçons un cercle

Ou plus simplement

Carré et autres polygones

La courbe fractale de Koch

Fractale en Python

La fractale ultime

Variables locales

Variables globales

Fonctions locales

Procédures et fonctions

Qu’est-ce donc?

Le mode Python

Mon premier programme

Le système RGB

Formes géométriques de base

Les coordonnées en informatique

Les modes CORNER, CORNERS et CENTER

Afficher un texte

Insérer des images

Principes

Approche

Le modèle MVC

Planter le décor

L’état

L’évolution du monde

Afficher l’état

Ô temps ! suspends ton vol…

Un autre exemple (1/2)

Un autre exemple (2/2)

La fonction keypressed

Retour vers le futur

Quel est le monde?

Dessin à main levée à la souris

Quel est le monde?

Le code

f Partie ix. Table des matières

Programmation impérative en Python 3 — Cours 4. Graphismes ... · Sommaire f Partiei.Annonces f...

Documents

Transcript of Programmation impérative en Python 3 — Cours 4. Graphismes ... · Sommaire f Partiei.Annonces f...