Comment coder des cercles en programmation

Nouveau ici ? Lire comment utiliser Cercles informatiques. Vous pouvez également cliquez ici pour créer un compte ou se connecter. Ce site enseigne la programmation. Ces leçons enseignent Python version 3.

Pourquoi apprendre à coder des cercles

Cette compétence est très utile : la programmation aide à automatiser des tâches informatiques, faire de l'art et de la musique, interpréter et analyser les résultats d'une enquête, construire des outils pour d'autres personnes, créer vos propres sites Internet, écrire des jeux, analyser des données génétiques, connecter les gens entre eux... Un programme informatique est une suite d'instructions, écrite en mots, nombres et symboles.

Notions de base : langage, sorties et chaînes

Tout comme chaque phrase parlée appartient à une langue spécifique comme le français ou l'anglais, chaque programme informatique est écrit dans un langage de programmation. Quelques langages de programmation populaires sont Python (ce que nous allons enseigner ici), C++, JavaScript et PHP. Nous utilisons Python ici car il est à la fois suffisamment simple pour les débutants et assez puissant pour être utilisé dans les entreprises. Quand vous exécutez un programme, vous verrez aussi une sortie.

Les guillemets " " sont utilisés pour contenir le texte Bonjour, Python ! à l'intérieur. Sans les guillemets, Python penserait que Bonjour est censé être une commande.

Tracer un cercle point par point : principe et algorithme

Le but à atteindre dans cette étape est de tracer un cercle point par point et chaque point possédant un rayon différent. Pour cela nous utilisons un générateur de nombres aléatoires qui sera paramétré de la façon suivante , rayon mini 100, rayon maxi 160. La valeur aléatoire s’ajoutera à un rayon fixe que l’on s’est donné.

Toutes les formes sont construites en connectant une série de sommets. vertex() est utilisé pour spécifier les coordonnées de sommet pour les points, les lignes, les triangles, les quads et les polygones. Il est utilisé exclusivement dans les fonctions beginShape() et endShape(). L'utilisation des fonctions beginShape() et endShape() permet de créer des formulaires plus complexes. beginShape() commence à enregistrer les sommets d'une forme et endShape() arrête l'enregistrement. la fonction endShape() est le compagnon de beginShape() et ne peut être appelée qu'après beginShape().

Exemple en Processing : tracer un cercle régulier

// Il sert à définir les propriétés d'environnement initiales telles que la // taille de l'écran et à charger des supports tels que des images et des polices// au démarrage du programme. void setup(){ // definition de la taille de la fenetre // syntaxe : size (Hauteur fenetre,largeur fenetre ) size (600, 600); // choix de la couleur du fond de la fenetre // syntaxe : background (rouge,vert,bleu ) // valeur du rouge de 0 à 255 idem pour les autres couleurs // affichage du fond en blanc background (255); // L'utilisation des fonctions beginShape () et endShape () permet de// créer des formulaires plus complexes. beginShape () commence à // enregistrer les sommets d'une forme et endShape () arrête l'enregistrement beginShape(); // boucle simulant la rotation de mon laser lidar soit 360° // on peut le modifier pour une demie rotation soit 180° for(int i=0; i<360; i++) {// A savoir processing travaille en radians par defaut// On declare la variable angle en nombre à virgule flottante// virgule flottante = les nombres avec un point decimal // la valeur de la variable comporte le radians de la valeur de i// soit : 1 × π/180 = 0,01745rad float angle = radians(i);// width = Variable système qui stocke la largeur de la fenêtre// d'affichage. float xCentre = width/2;// Variable système qui stocke la hauteur de la fenêtre d'affichage. // Cette valeur est définie par le deuxième paramètre de la fonction size () float yCentre = height/2;// on declare la variable rayon en nombre à virgule flottante // et on ajoute la valeur du laser en simulation float rayon = 120;// on calcul les coordonnées de notre point en x et y // en tenant compte des angles float xCoord = xCentre + sin(angle) * rayon ; float yCoord = yCentre + cos(angle) * rayon ;// Toutes les formes sont construites en connectant une série de sommets.// vertex () est utilisé pour spécifier les coordonnées de sommet pour// les points, les lignes, les triangles, les quads et les polygones. Il// est utilisé exclusivement dans les fonctions beginShape () et endShape () . vertex(xCoord,yCoord );}// la fonction endShape () est le compagnon de beginShape () et ne// peut être appelée qu'après beginShape ().

Tracer un cercle avec variation aléatoire du rayon (simulation LIDAR)

// Il sert à définir les propriétés d'environnement initiales telles que la // taille de l'écran et à charger des supports tels que des images et des polices// au démarrage du programme. void setup(){ // definition de la taille de la fenetre // syntaxe : size (Hauteur fenetre,largeur fenetre ) size (600, 600); // choix de la couleur du fond de la fenetre // syntaxe : background (rouge,vert,bleu ) // valeur du rouge de 0 à 255 idem pour les autres couleurs // affichage du fond en blanc background (255); // L'utilisation des fonctions beginShape () et endShape () permet de// créer des formulaires plus complexes. beginShape () commence à // enregistrer les sommets d'une forme et endShape () arrête l'enregistrement beginShape(); // boucle simulant la rotation de mon laser lidar soit 360° // on peut le modifier pour une demie rotation soit 180° for(int i=0; i<360; i++) {// A savoir processing travaille en radians par defaut// On declare la variable angle en nombre à virgule flottante// virgule flottante = les nombres avec un point decimal // la valeur de la variable comporte le radians de la valeur de i// soit : 1 × π/180 = 0,01745rad float angle = radians(i);// width = Variable système qui stocke la largeur de la fenêtre// d'affichage. float xCentre = width/2;// Variable système qui stocke la hauteur de la fenêtre d'affichage. // Cette valeur est définie par le deuxième paramètre de la fonction size () float yCentre = height/2;// Génère des nombres aléatoires. Chaque fois que la fonction random ()// est appelée, elle renvoie une valeur inattendue dans la plage// spécifiée float laser = random(100,150);// on declare la variable rayon en nombre à virgule flottante // et on ajoute la valeur du laser en simulation float rayon = 50+laser;// on calcul les coordonnées de notre point en x et y // en tenant compte des angles float xCoord = xCentre + sin(angle) * rayon ; float yCoord = yCentre + cos(angle) * rayon ;// Toutes les formes sont construites en connectant une série de sommets.// vertex () est utilisé pour spécifier les coordonnées de sommet pour// les points, les lignes, les triangles, les quads et les polygones. Il// est utilisé exclusivement dans les fonctions beginShape () et endShape () . vertex(xCoord,yCoord );}// la fonction endShape () est le compagnon de beginShape () et ne// peut être appelée qu'après beginShape ().

Simulation de déplacement et animation

Incrémentation de la variable Xdepla. Création d’une ligne de code pour effectuer ou simuler le déplacement d’un éventuel robot mobile. // Il sert à définir les propriétés d'environnement initiales telles que la // taille de l'écran et à charger des supports tels que des images et des polices// au démarrage du programme. void setup(){ // definition de la taille de la fenetre // syntaxe : size (Hauteur fenetre,largeur fenetre ) size (600, 600); // choix de la couleur du fond de la fenetre // syntaxe : background (rouge,vert,bleu ) // valeur du rouge de 0 à 255 idem pour les autres couleurs // affichage du fond en blanc background (255);}

//Le programme principal s’exécute par une boucle infinie appelée draw() void draw (){// L'utilisation des fonctions beginShape () et endShape () permet de// créer des formulaires plus complexes. beginShape () commence à // enregistrer les sommets d'une forme et endShape () arrête l'enregistrement beginShape(); // incrementation de mon deplacement en x pour simuler un robot // mobile // cette fonction est egale à Xdepla = Xdepla +1 Xdepla ++ ; // Efface mon ecran pour ne voir qu'un tracé background(255); // boucle simulant la rotation de mon laser lidar soit 360° // on peut le modifier pour une demie rotation soit 180° for(int i=0; i<360; i++) {// A savoir processing travaille en radians par defaut// On declare la variable angle en nombre à virgule flottante// virgule flottante = les nombres avec un point decimal // la valeur de la variable comporte le radians de la valeur de i// soit : 1 × π/180 = 0,01745rad float angle = radians(i);// activer la ligne de code ci-dessous pour lancer le deplacement float xCentre = 300+Xdepla ;// float xCentre = width/2; float yCentre = height/2;// Génère des nombres aléatoires. Chaque fois que la fonction random ()// est appelée, elle renvoie une valeur inattendue dans la plage// spécifiée float laser = random(100,150);// on declare la variable rayon en nombre à virgule flottante // et on ajoute la valeur du laser en simulation float rayon = 50+laser;// on calcul les coordonnées de notre point en x et y // en tenant compte des angles float xCoord = xCentre + sin(angle) * rayon ; float yCoord = yCentre + cos(angle) * rayon ;// Toutes les formes sont construites en connectant une série de sommets.// vertex () est utilisé pour spécifier les coordonnées de sommet pour// les points, les lignes, les triangles, les quads et les polygones. Il// est utilisé exclusivement dans les fonctions beginShape () et endShape () . vertex(xCoord,yCoord );}// la fonction endShape () est le compagnon de beginShape () et ne// peut être appelée qu'après beginShape ().}

Tracer des cercles avec Turtle en Python

#! turtle graphique est une manière bien connue et intuitive pour initier les enfants au monde de la programmation. Imaginez un robot sous forme de tortue partant au centre (0, 0) d’un plan cartésien x-y. Pour se repérer dans la fenêtre, turtle utilise un repère à deux dimensions. Il est centré au milieu de la fenêtre. Ce repère permet de se déplacer en abscisses et en ordonnées. Le centre du repère, est le point (0, 0).

Pour tracer des cercles avec turtle, il sufit d’utiliser la commande circle. On peut tracer un cercle complet ou un arc de cercle. Pour un arc de cercle il suffit d’indiquer la mesure de l’angle en degré pour afficher l’arc que l’on veut. Trace la moitié d’un hexagone. Le rayon = 100 pixels.

Pour se repérer dans la fenêtre, il faut tracer des points, la commande est dot. Pour tracer des des figures avec turtle, il faut se déplacer. La commande forward permet d’avancer, par exemple forward(120) permet d’avancer de 120 pixels. Déplacez la tortue vers l’avant de la distance spécifiée. Rend la tortue invisible. Définit la couleur du stylo à la couleur RGB représentée par r, g et b. Entrées comme dans pencolor, définissez les deux, fillcolor et pencolor, à la valeur donnée. Si la forme de turtle est un polygone, le contour et l’intérieur de ce polygone est dessiné avec les couleurs nouvellement définies. Renvoie la couleur de stylo actuelle en tant que chaîne de spécification de couleur, éventuellement au format hexadécimal (voir exemple). la couleur de remplissage().

Conseils pratiques

A savoir processing travaille en radians par defaut. La valeur de la variable comporte le radians de la valeur de i soit : 1 × π/180 = 0,01745 rad.
Pour les tracés animés, effacez l'écran (background) pour ne garder que le dernier tracé si nécessaire.
Utilisez random(min, max) pour ajouter de la variabilité au rayon et simuler des capteurs LIDAR.
width et height sont des variables système qui stockent la largeur et la hauteur de la fenêtre d’affichage.
La fonction size(320,240) définit la variable width sur la valeur 320 et height sur 240.

Tableau récapitulatif : fonctions et rôles

Fonction / variable	Usage
size()	Définit la taille de la fenêtre (width, height)
background()	Définit la couleur du fond
beginShape()/endShape()	Commencer/terminer l'enregistrement de sommets
vertex(x,y)	Spécifier un sommet dans une forme
random(min,max)	Générer une valeur aléatoire
radians(i)	Convertir degrés en radians

Quand vous progresserez au travers des leçons, vous trouverez d'autres parties d'un programme Python. Vous trouverez notre premier exercice ci-dessous. Il demande d'écrire un programme similaire au premier programme que nous avons vu ci-dessus. Tapez votre programme dans la zone de texte, et quand vous voulez tester si votre programme fonctionne correctement, appuyez sur le bouton Exécuter le programme. Lorsque vous réussirez correctement un exercice comme celui-ci, vous verrez apparaître un dans le coin en haut à droite de la zone. Bien que nos leçons aient pour but d'être auto-suffisantes, si vous décidez de chercher d'autres informations en ligne sur Python, sachez que Python version 2 est aussi très populaire et que certains éléments entre eux sont incompatibles. Vous êtes prêt pour la prochaine leçon!

Lire aussi: Démographie de Maisons-Laffitte

balises: