Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

wiki:ecoles:lclc:2017:seance5 [2019/12/03 10:38] (Version actuelle)
Ligne 1: Ligne 1:
 +====== Thème 5 : Créons nos propres fonctions ======
 +
 +===== Réutiliser des bouts de programme ? =====
 +
 +Supposons que l'on souhaite dessiner un carré (en supposant que l'on n'​utilise pas ''​rect''​) à l'aide de ''​line'',​ nous pourrions faire ainsi:
 +
 +{{url>​https://​trinket.io/​embed/​python/​7a8dbc76b9 100%,420px noscroll noborder}}
 +
 +Evidemment, si l'on souhaitait dessiner un autre carré, nous pourrions copier les 4 lignes ''​line''​ mais cela ne serait pas très pratique et ne donnerait pas un programme très lisible. Heureusement,​ il est possible de créer ses propres //​instructions//​ ! Ainsi, rien ne nous empêche de définir une nouvelle instruction ''​carre''​ qui dessine un carré comme celui de l'​exemple ci-dessus.
 +
 +{{url>​https://​trinket.io/​embed/​python/​2663315510 100%,420px noscroll noborder}}
 +
 +Le soucis avec cette approche est que l'on ne peut pas dessiner un carré ailleurs qu'à la position ''​(10,​10)''​ et avec un côté de 100 pixels. Notre instruction ''​carre''​ serait bien plus utile si l'on pouvait indiquer où dessiner le carré, ainsi que sa taille. Pour cela, il faut modifier légèrement notre fonction ''​carre''​ afin de la //​paramétrer//,​ c'​est-à-dire de la rendre plus général en indiquant qu'il faut donner un minimum d'​information pour pouvoir dessiner un carré n'​importe où sur le tableau et de n'​importe quelle taille.
 +
 +{{url>​https://​trinket.io/​embed/​python/​d5f5a12162 100%,420px noscroll noborder}}
 +
 +Maintenant, nous avons créé une nouvelle instruction grâce à la définition de la fonction ''​carre''​. Du coup, il devient possible de dessiner facilement des tableaux contenant des carrés :) Si l'on ajoute en plus des paramètres pour préciser les couleurs du contour et de l'​intérieur du carré, on disposera alors d'une fonction très pratique et facilement réutilisable.
 +
 +{{url>​https://​trinket.io/​embed/​python/​ae33b9a90d 100%,420px noscroll noborder}}
 +
 +Résumons un peu ce que nous avons découvert autour de cette notion de fonction:
 +  * une fonction est une suite d'​instructions que l'on peut utiliser (appeler) plusieurs fois dans un programme,
 +  * une fonction est caractérisée par son nom et éventuellement les informations dont elle a besoin pour effectuer son traitement, on appelle ces informations des //​paramètres//,​
 +  * comme pour les répétitions,​ il faut être attentif à l'​indentation (aux espaces en début de ligne) !
 +
 +  # définition d'une fonction appelée '​fonction1'​ ayant 2 paramètres
 +  def fonction1(parametre1,​ parametre2):​
 +    instruction1
 +    instruction2 ​
 +    ​
 +  # définition d'une fonction appelée '​fonction2'​ n'​ayant pas de paramètres
 +  def fonction2():​
 +    instruction1
 +    instruction2
 +    instruction3
 +    ​
 +Nous voyons dans l'​exemple ci-dessus que parfois une fonction a besoin de paramètres (comme ''​rect'',​ ''​ellipse''​ ...) et d'​autre fois non (comme ''​noStroke()''​). De même, parfois une fonction ne calcule pas un résultat particulier,​ comme ''​carre''​ qui ne fait que dessiner des lignes sur le tableau, alors que d'​autres fois, une fonction retourne un résultat. Par exemple, si l'on souhaite créer une instruction ''​couleur_au_hasard'',​ elle devrait tirer aléatoirement les 3 composantes de couleurs et retourner une nouvelle couleur construite à partir de ces 3 nombres tirés au hasard.
 +
 +{{url>​https://​trinket.io/​embed/​python/​bbc8e44ff8 100%,420px noscroll noborder}}
 +
 +===== Œuvre 7 : Dés colorés =====
 +
 +|< 100% 60% - >|
 +^ Description ^ Objectif ^
 +| [[https://​fr.wikipedia.org/​wiki/​Un_coup_de_d%C3%A9s_jamais_n'​abolira_le_hasard|Un coup de dés jamais n'​abolira le hasard]] comme l'​écrivait Mallarmé ... occasion de revenir de nouveau sur notre première oeuvre en la réinterprétant pour exploiter la notion de fonction :)\\ \\ Dans un second temps, on peut ajouter un élément au tableau: lorsque l'​utilisateur clique sur un bouton de la souris, on efface l'​ensemble du tableau ! |{{url>​https://​trinket.io/​embed/​python/​b00d3679b4?​outputOnly=true&​runOption=run 100%,250px noscroll noborder}} |
 +
 +{{url>​https://​trinket.io/​embed/​python/​3326dfc0e6 100%,550px noscroll noborder}}
 +
 +===== Gestion du clavier =====
 +
 +Lors de la séance précédente nous avions vu qu'il était possible de savoir ce que l'​utilisateur fait de sa souris. En fait, il est aussi possible de savoir ce que l'​utilisateur fait avec son clavier ! Par contre, contrairement à la souris, le mécanisme pour le clavier nécessite de définir une fonction bien particulière : ''​heyPressed''​.
 +
 +L'​exemple ci-dessous illustre la gestion du clavier: si l'​utilisateur tape sur la touche ''​r'',​ les disques deviennent rouge, pour ''​v''​ cela passe au vert et pour ''​b''​ au bleu. Toute autre touche produira une couleur tirée aléatoirement.
 +
 +{{url>​https://​trinket.io/​embed/​python/​34764b7d7e 100%,420px noscroll noborder}}
 +
 +==== Gestion des images =====
 +
 +Il est possible d'​intégrer dans vos oeuvres des images que vous aimez. Pour cela, il vous fait d'​abord les charger dans votre //trinket// en appyant sur le bouton ressemblant à une page avec un dessin à côté du ''​+''​ (non loin de ''​Résultats''​. Là vous pourrez télécharger une image que vous aurez au préalable récupéré sur le web ou dans vos documents. Afin de pouvoir charger l'​image,​ il y a une petite manipulation pas terrible à effectuer à cause d'un petit bug côté du site //​Trinket//:​ il faut copier l'​adresse de l'​image en se mettant dessus et en cliquant sur le bouton droit de la souris. Ensuite, il est possible de coller cette '​(horrible!) adresse dans l'​instruction ''​loadImage(url)''​ qui permet de charger une image et afin de l'​afficher ensuite à l'aide de ''​image(une_image,​ x, y, taille_x, taille_y)''​. L'​exemple ci-dessous vous montre ce que cela peut donner avec une jolie petite noireaude (merci Totoro ;)):
 +
 +{{url>​https://​trinket.io/​embed/​python/​b472242e85 100%,420px noscroll noborder}}
 +
 +===== Petite synthèse :) =====
 +
 +Nous voici arrivés au bout de notre découverte des notions fondamentales de la programmation ! Vous avez maintenant tous les outils vous permettant de créer de magnifiques oeuvres, mais surtout, vous avez entamé votre découverte de ce magnifique outil de création qu'est la programmation. La bonne nouvelle, c'est que ces notions vous pourrez les réutiliser quelque soit le langage de programmation que vous utiliserez. Bien sûr, comme toute activité, il est nécessaire de pratiquer régulièrement pour s'​améliorer et développer des automatismes permettant d'​aboutir plus rapidement à ce que l'on souhaite réaliser :)
 +
 +Il ne vous reste plus qu'à vous lancer dans votre création pour l'​exposition qui terminera notre activité !
 +
 +{{url>​https://​trinket.io/​embed/​python/​e2f8fac9c6 100%,420px noscroll noborder}}
 +
 +
 +