Programmation Fonctionnelle I, Printemps 2017 Cours n°3
http://deptinfo.unice.fr/~roy • Racket propose des teachpacks, bibliothèques pour l'enseignement.
• Ce chapitre est une introduction au teachpack 2htdp/image.
Programmer • Ce teachpack permet de construire des images composées de formes
élémentaires, pour produire une scène statique.
avec des images • Nous pourrons dans le cours 4 programmer la simulation graphique
animée d'un Monde virtuel. Une horloge sera automatiquement mise en
place pour scander l'évolution du Monde, par exemple tous les 1/28 sec...
Une animation n'est en effet pas autre chose qu'une suite d'images.
• Nous traitons donc ici la programmation sous un angle multimédia (la
sonorisation sera peut-être traitée dans la seconde partie du cours.
• Le teachpack image est déjà intégré dans le teachpack valrose !
Livre PCPS, Chap. 3
2
Images Les Couleurs
géométriques
- Une couleur peut se représenter par une chaîne de caractères :
de "red" "blue" "black" "green" "white" "gray" "yellow" etc
base - ou par une structure représentant un mélange RGB avec la fonction
(make-color r g b) qui attend des arguments dans [0,255] :
> (rectangle 50 20 'solid (make-color 0 0 255))
• Demandez • La couleur jaune s'obtiendrait comme mélange de rouge et de vert :
la doc avec
(rectangle 50 20 'solid (make-color 255 255 0))
l'aide en ligne
de DrRacket...
• Un quatrième argument optionnel représente la transparence. Il doit
être choisi entre 0 (transparent) et 255 (opaque).
(underlay/xy (circle 50 'solid (make-color 0 255 0)) 50 0
(circle 50 'solid (make-color 255 0 0 200)))
3 4
Le Rectangle qui permet de construire le fond d'une scène ! • A quoi sert l'accent aigu [on le prononce "quote"] ?
(rectangle width height mode color) A exprimer que l'expression qui suit ne doit pas être évaluée !
la largeur la hauteur la couleur Welcome to DrRacket, version 5.3
> pi
'solid ou 'outline #i3.141592653589793
> bonjour
ERROR : undefined identifier : bonjour
Creates a width by height rectangle, filled in according to mode
> 'bonjour
and painted in color color
bonjour
> (+ 1 2)
3
> '(+ 1 2) Il croit que bonjour est une
20 20 (+ 1 2) variable et il cherche sa valeur !
50 50 J'exprime que ce n'est pas une
(rectangle 50 20 'solid "yellow") (rectangle 50 20 'outline "blue")
demande de calcul mais une
donnée à l'état brut.
5 6
Le Cercle L'Ellipse
(circle radius mode color) (ellipse width height mode color)
le rayon 'solid ou 'outline la couleur la largeur la hauteur la couleur
'solid ou 'outline
Creates a circle or disk of radius radius, filled in
according to mode and painted in color color Creates a width by height ellipse, filled in
according to mode and painted in color color
30
30
60
(circle 30 'solid "yellow") (circle 30 'outline "blue")
(ellipse 60 30 'solid "yellow") (ellipse 60 30 'outline "blue")
7 8
L'Etoile Le segment (line dx dy color)
(star side-length mode color)
longueur en x longueur en y
la couleur
longueur
'solid ou 'outline 50 O x
du côté -10
10
y 50
Creates a multi-pointed star with 5 points, the side-length argument determines
the side length of the enclosing pentagon. (line 50 10 "blue") (line 50 -10 "blue")
⇕ ⇕
(line -50 -10 "blue") (line -50 10 "blue")
• Pour ajouter à une image img un segment joignant A(x1,y1) à B(x2,y2),
100
utilisez (add-line img x1 y1 x2 y2 color).
(0,0)
(add-line (circle 40 'outline "red")
(star 100 'solid "yellow") (star 100 'outline "blue")
-50 40 80 40
"blue") Peut modifier la bounding-box…
9 10
Le Texte • La police de caractères n'est pas réglable. Seule la taille et la couleur
le sont. Ou alors utilisez text/font...
(text string size color)
• Le premier argument [le texte] doit être de type string. Il peut être
intéressant de transformer un nombre en une chaîne de caractères :
une chaîne de taille de la la couleur > (number->string 1789)
caractères police "1789"
> (number->string 1789 2) ; en binaire [base 2]
"11011111101"
> (number->string 1789 16) ; en hexadécimal [base 16]
Creates an image of the text string at point size size "6fd"
and painted in color color.
• La fonction (format str x1 x2 ...) s'utilise de la même manière que
mais elle retourne une chaîne de caractères au
Hello !
(printf str x1 x2 ...)
lieu d'afficher !
(text "Hello !" 96 "blue")
11 12
• On peut obtenir les dimensions d'une image : Superposition centrée d'images [underlay]
> (define T (text "Hello" 48 "blue"))
> T • La fonction (underlay img1 img2 ...) permet de combiner plusieurs
Hello Hello 48 images en une seule [img1 au-dessous de img2, etc] en les alignant par
> (image-width T) leurs centres.
107
> (image-height T)
107
48 (underlay (rectangle 160 40 'solid "gray")
(circle 10 'solid "black"))
100
> (define C (circle 50 'outline "red")) • Comment construiriez-vous celles-ci ?...
> (image-width C)
100 100
> (image-height C)
100
• Une image est contenue dans un rectangle
transparent : sa bounding box.
13 14
• La fonction (overlay img1 img2 ...) permet de combiner plusieurs
Superposition relative [underlay/xy] Alignement horizontal centré [beside]
• ATTENTION : la plupart des langages de programmation graphiques
• La fonction (beside img1 img2 ...) permet de combiner plusieurs
n'utilisent pas les axes mathématiques usuels !
images en une seule [img1 à gauche de img2, etc] en les alignant par
y (10,20) x leurs centres.
O img1 img2
(10,10)
(10,10)
x (beside (rectangle 160 40 'outline "black")
(circle 10 'solid "red"))
(10,20)
O
Maths y Info
Alignement vertical centré [above]
• La fonction (underlay/xy img1 x y img2) superpose img2 au-dessus
• La fonction (above img1 img2 ...) permet de combiner plusieurs
de img1, mais en décalant img2 de x pixels vers la droite et de y pixels
images en une seule [img1 en haut de img2, etc] en les alignant par
vers le bas par rapport au coin haut gauche de img1.
leurs centres.
(underlay/xy (rectangle 160 40 'solid "gray")
(above (rectangle 160 40 'outline "black") img1
80 20
(circle 10 'solid "red"))
(rectangle 160 40 'solid "black"))
img2 16
15
Rotation d'une image [rotate] Encadrement d'une image [frame]
• Il est possible de faire tourner une image d’un angle α exprimé en • Chaque image est contenue dans un rectangle invisible qui l'entoure :
degrés avec la fonction (rotate α img). La rotation aura lieu dans le sa bounding box. La fonction (frame img) permet de le visualiser !
sens inverse des aiguilles d’une montre.
(frame (rotate 45 r))
r
(rotate 45 r)
r
Extraction d'une sous-image [crop]
Changement d'échelle d'une image [scale] • La fonction (crop x y larg haut img) permet d’extraire la portion
d’image de img, dont le coin haut gauche est à la position (x,y), et dont
les dimensions sont larg et haut. C'est le cropping !
r
(beside r (scale 2 r))
c = (circle 40 'solid "red") (crop 40 0 40 40 c)
17 18
Le placement avec cropping [place-image] Utiliser de véritables images au format PNG
• La fonction (place-image img1 x y img2) superpose img1 au-dessus • Il est souvent intéressant d'ajouter des images Scheme à un fond
de img2, mais en plaçant le centre de img1 au point (x ; y) dans le repère en provenance d'une véritable image (photo, Web, etc). Le format
haut gauche de img2. En général, img2 est un rectangle. CROPPING ! PNG est conseillé, mais GIF et JPG sont aussi admis...
• Le fichier "ballon.png" est dans le répertoire courant de mon disque
(place-image (circle 100 'solid "black") dur. Je le charge en mémoire sous la forme d’une image Racket :
60 60
(define ballon (bitmap "ballon.png"))
(rectangle 400 200 'solid "red"))
et maintenant je peux l’utiliser pour d’autres images : A vous de faire
• Ne pas confondre avec (underlay/xy img1 x y img2) qui : de belles images !
> (above ballon (beside ballon ballon))
- place le coin haut gauche de img1 par rapport au coin haut
gauche de img2 alors que place-image s'occupe du centre de img1.
- ne fait aucun cropping et risque d’agrandir la bounding box.
• Lorsque vous travaillez dans un cadre rectangulaire, utilisez toujours
• Inversement je peux sauver une image sur le
place-image et évitez underlay/xy qui agrandit la bounding box !
disque au format PNG :
• La variante scene+line de add-line fait un cropping automatique ! (save-image taz "taz.png") (bitmap "taz.png")
19 20
Quelques images des années passées (BONUS)
21
