Pour notre premier projet en classe de 1ère spécialité NSI, nous nous sommes basés sur le thème du célèbre jeu vidéo d’horreur Five Night At Freddy’s 4. Notre image représente le menu du jeu vidéo Five Night At Freddy’s 4.
Ici vous trouverez les différentes étapes qui nous ont permis de créer cette image.
Description de notre projet.
Ce projet consiste a créer une image fait par l’art génératif grâce à un script python qui doit utiliser plusieurs fonctions. Pour ce projet, le thème de l’image créée est libre. Nous avons choisi de recréer l’image du menu du jeu vidéo d’horreur Five Night At Freddy’s 4 comme nous sommes dans la période d’&Halloween.
Pour le réaliser, nous avons utilisé le module turtle qui nous permet de tracer l’image.
Le fond de l’image.
Tout d’abord, nous avons commencé notre script par le code du fond de l’image. Ce code crée un dégradé du rouge jusqu’au noir, qui démarré à partir de la moitié de l’image pour aller jusqu’en haut. Il correspond au ciel.
for i in range(180):
pencolor(120-int(i/2), 0, 0)
forward(1280)
up()
backward(640)
down()
go(-640,i*2)
Nous avons choisi d’utiliser une boucle for i in range() : pour répéter 180 fois le programme. Le pencolor(120-int(i/2), 0, 0) permet de faire le dégradé. L’utilisation du -int fait en sorte que le fond va se dégrader moins rapidement et le (i/2) permet de régler la vitesse du dégradé.
Les nuages.
La seconde étape de notre projet consiste à créer des nuages. Ces nuages sont assez particuliers du fait de leur couleur qui se fond dans le dégradé du ciel.
def draw_stripes(x, y, radius, stripe_width):
for i in range(-radius, radius, stripe_width):
half_width = math.sqrt(radius**2 - i**2)
up()
goto(x - half_width, y + i)
down()
goto(x + half_width, y + i)
def cloud(x=0,y=0,r=30,s=2):#nuage
pensize(0.1)
pencolor(255,200,200)
radius1 = r
stripe_width = s
for i in range(2):
draw_stripes(x+30*i, y+10*i, radius1, stripe_width)
draw_stripes(x+30*i, y-10*i, radius1, stripe_width)
Ici on a défini deux fonctions :
La première permet de faire des traits à l’intérieur d’un cercle pour régler l’opacité en turtle python.,
La seconde permet à la suite de la première d’empiler plusieurs cercles pour former un nuage.
La demi-lune.
La troisième étape de notre script consiste à faire une demi-lune, qui se placera en haut à gauche de notre image.
Ce script forme un demi-cercle plus grand puis un autre demi-cercle plus petit qui se rejoignent.
La maison.
La quatrième étape consiste à créer une maison qui se situera au milieu de notre image.
def House(t = 1):
fillcolor(47,6,6)
pencolor(47,6,6)
go(0,35)
for i in range(2):
for i in range(2):
begin_fill()
forward(65*t)
right(90)
forward(15*t)
right(90)
end_fill()
up()
left(90)
forward(30*t)
right(90)
down()
go(0,35*t)
for i in range(2):
for i in range(2):
begin_fill()
forward(25*t)
right(90)
forward(25*t)
right(90)
end_fill()
up()
forward(40*t)
down()
go(130,95)
for i in range(2):
begin_fill()
forward(40)
right(90)
forward(45*t)
right(90)
end_fill()
begin_fill()
go(170,95)
left(105)
forward(30*t)
y=5
for i in range(y):
left(75/y)
forward(2)
forward(70*t)
for i in range(y):
left(90/y)
forward(2)
forward(35*t)
backward(17*t)
right(90)
forward(40*t)
y=10
for i in range(y):
left(90/y)
forward(3)
left(90)
forward(55*t)
backward(35*t)
right(90)
forward(15*t)
left(90)
forward(5*t)
left(90)
forward(15*t)
end_fill()
begin_fill()
backward(15*t)
left(90)
forward(20*t)
left(90)
forward(25*t)
left(90)
forward(50*t)
left(90)
forward(25*t)
left(90)
forward(30*t)
end_fill()
Dans ce script nous avons construit plusieurs rectangles grâce à des boucles for qui forment la maison.
Les arbres.
La cinquième étape, crée deux arbres qui sont constitués chacun de 6 points.
def tree(l=1,x=0,y=0):
go(x,y)
right(180)
begin_fill()
for i in range(2):
forward(10*l)
left(90)
forward(30*l)
left(90)
left(90)
forward(40*l)
right(90)
for i in range(2):
dot(30*l)
forward(5*l)
dot(30*l)
forward(5*l)
left(90)
dot(30*l)
forward(15*l)
dot(30*l)
forward(15*l)
left(90)
dot(30*l)
end_fill()
Ce code permet de créer 6 points qui vont faire les feuilles de l’arbre et un rectangle qui va faire le tronc.
Le sol.
Pour la sixième étape, nous avons fait le sol de notre image qui représente une colline.
begin_fill()
for i in range(400):
forward(3)
if i<35 or 80<i<100:
ligne_down()
elif 25<i<80 :
ligne_up()
right(90)
forward(360)
right(90)
forward(1280)
right(90)
forward(347)
end_fill()
Le sol est fait par les fonctions ligne_up() et ligne_down() qui permettent de créer la montée et la descente de la colline.
Ecriture de FNAF4.
Pour la dernière étape nous avons fait créer le titre du jeu pour realiser l’intégralité de l’image du menu du jeu. L’écriture Five Night At Freddy’s 4 sera de couleur rouge et se situera en bas à droite de notre image.
pencolor(200,10,10)
go(400,-200)
write('five',False,'left',('Baskerville Old Face',24,'normal'))
go(400,-230)
write('nights',False,'left',('Baskerville Old Face',24,'normal'))
go(400,-260)
write('at',False,'left',('Baskerville Old Face',24,'normal'))
go(400,-290)
write("freddy's",False,'left',('Baskerville Old Face',24,'normal'))
go(480,-320)
write("4",False,'left',('Baskerville Old Face',105,'normal'))
Pour écrire Five Night At Freddy’s 4, nous avons utilisé la fonction write() puis on a défini la police Baskerville Old Face avec la taille 24 et pour le chiffre 4 nous avons décidé de prendre la taille 105.
Les difficultés rencontrées durant le projet.
La première difficulté rencontrée et surtout celle qui nous a le plus posé problème est la création des nuages. Nous ne savions pas trop comment les coder et ni comment faire pour la couleur. Au début nous avons cherché une formule permettant d’avoir la couleur recherchée, que nous n’avons jamais trouvé. Finalement, à la suite de plusieurs essais, nous avons fait, un peu par hasard, une illusion d’optique avec l’assemblage de plusieurs traits qui donnent une couleur rouge plus claire.
Puis l’autre difficulté a été de maitriser les fillcolor(), car il fallait mettre au bon endroit le begin() et le end().
Les sources.
Pour écrire ce script nous avons utilisé nos connaissances ainsi que le site Python Docs pour trouver de nouvelles commandes. Nous avons aussi regardé quelques projets des années précédentes pour nous inspirer et nous guider.
Dans ce premier projet de première spécialité NSI, intitulé Art génératif, nous allons expliquer comment nous avons réalisé un programme représentant un coucher de soleil inspiré des paysages de La Seyne-sur-Mer, avec les célèbres rochers « Les Deux Frères ». Ce projet nous a permis d’explorer différents concepts de programmation en Python, en utilisant notamment les modules turtle et random pour donner un paysage le plus réaliste possible.
Origines de la Seyne-sur-Mer
La Seyne-sur-Mer est une commune française située dans le département du Var, en région Provence-Alpes-Côte d’Azur. Elle compte environ 65 000 habitants, ce qui en fait la deuxième ville la plus peuplée du Var, après Toulon.
Parmi ses nombreuses zones touristiques, on trouve les « Deux Frères », nom donné à deux rochers emblématiques de la côte maritime, émergeant à la pointe du Cap Sicié et visibles depuis les plages. Le nom « Deux Frères » provient d’une légende locale.
Le Projet
Pour réaliser ce projet, nous avons décidé de créer un paysage inspiré des couchers de soleil de La Seyne-sur-Mer. L’objectif était d’utiliser le plus de concepts vus en classe, tels que les modules Turtle et Random, ainsi que l’utilisation de boucles. De plus, pour donner un effet plus naturel, la position et la taille des nuages et des étoiles sont générées de façon aléatoire.
Structure du script
Notre script est divisé en plusieurs parties, chacune ayant une fonction distincte représentant un élément du paysage (dégradé, soleil, étoiles, nuages et les Deux Frères). Ces fonctions sont appelées à la fin dans un ordre spécifique pour créer l’image finale.
Analyse du script
L’analyse du script se déroule en plusieurs étapes.
1. Tout d’abord, nous importons les modules nécessaires, notamment le module Turtle pour le dessin graphique et le module Random pour générer des valeurs aléatoires.
Cette fonction degrade prend quatre arguments : couleur_debut, couleur_fin, etapes, et decalage_y. Elle calcule la différence entre les valeurs RGB des couleurs de début et de fin, ce qui est nécessaire pour créer un dégradé. Ensuite, elle utilise penup() pour lever le stylo afin de ne pas dessiner pendant le déplacement, et goto() pour se positionner sur l’écran. pendown() est ensuite utilisé pour recommencer à dessiner. Cette partie est essentielle pour établir la base du dégradé.
3. Boucle pour réaliser le dégradé
for i in range(etapes):
if effet_vague:
# Effet vague si activé
valeur_vague = int(30 * (1 + (i % 20) / 20.0))
couleur_actuelle = (
int(couleur_debut[0] + (r_diff * i / etapes)),
int(couleur_debut[1] + (g_diff * i / etapes)),
int(couleur_debut[2] + (b_diff * i / etapes + valeur_vague)),
)
else:
# Couleur effet de vague desactivé
couleur_actuelle = (
int(couleur_debut[0] + (r_diff * i / etapes)),
int(couleur_debut[1] + (g_diff * i / etapes)),
int(couleur_debut[2] + (b_diff * i / etapes)),
)
Cette partie de la fonction utilise une boucle pour parcourir le nombre d’étapes spécifié. Dans la première branche de la condition if, si effet_vague est activé, un effet de vague est appliqué à la couleur actuelle en ajoutant une variation à la composante bleue. La couleur actuelle est ensuite calculée en ajoutant une autre couleur à celle de départ.
Dans le bloc else, qui s’exécute lorsque l’effet de vague est désactivé, la couleur actuelle est calculée sans cet effet.
4. La limite des valeurs pour les couleurs
# Limite des couleurs (valeur compris entre 0 et 255)
couleur_actuelle = (
min(255, max(0, couleur_actuelle[0])),
min(255, max(0, couleur_actuelle[1])),
min(255, max(0, couleur_actuelle[2])),
)
Cette partie du script assure que les valeurs RGB de couleur_actuelle restent comprises entre 0 et 255, comme le montre l’utilisation de min et max. Cela permet de générer des couleurs valides.
Ici, la couleur du stylo est définie sur couleur_actuelle avec pencolor(couleur_actuelle). Ensuite, le curseur Turtle se déplace en avant sur 1280 pixels (forward(1280)), puis se repositionne pour dessiner la prochaine ligne du dégradé en fonction de l’étape actuelle.
6. Le soleil
# Fonction pour réaliser le soleil
def soleil(position, rayon, couleur):
penup()
goto(position[0], position[1] - rayon)
pendown()
pencolor(couleur)
fillcolor(couleur)
begin_fill()
setheading(90)
circle(rayon, 180)
end_fill()
Il n’y a pas de coucher de soleil sans le soleil. Nous avons donc créé la fonction soleil, qui dessine un demi-cercle à une position donnée et le remplit d’une couleur spécifiée.
7. Les étoiles
# Fonction pour réaliser des étoiles dans le ciel disposer aléatoirement
def etoiles():
pensize(1)
for _ in range(125):
penup()
x, y = randint(-700, 700), randint(0, 700)
goto(x, y)
pendown()
couleur_etoile = (randint(230, 255), randint(230, 255), randint(230, 255))
pencolor(couleur_etoile)
dot(randint(1, 2))
Pour réaliser les étoiles, nous les avons disposées de façon aléatoire dans la partie supérieure, représentant le ciel. Nous avons également varié leur taille de manière aléatoire entre 1 et 2, afin d’ajouter un effet plus naturel au dessin. Ce processus pour les étoiles est réalisé 125 fois (for _ in range(125):)
8. Les nuages
# Fonction pour dessiner des nuages
def nuages():
penup()
pencolor((200, 200, 200)) # Gris pastel
for _ in range(15):
x, y = randint(-600, 600), randint(100, 300)
for _ in range(randint(5, 10)):
offset_x = x + randint(-30, 30)
offset_y = y + randint(-10, 10)
goto(offset_x, offset_y)
pendown()
dot(randint(30, 60))
penup()
nouvelle_ombre = randint(190, 220)
pencolor((nouvelle_ombre, nouvelle_ombre, nouvelle_ombre))
for _ in range(randint(5, 10)):
sous_offset_x = offset_x + randint(-20, 20)
sous_offset_y = offset_y + randint(-10, 10)
goto(sous_offset_x, sous_offset_y)
pendown()
dot(randint(10, 20))
penup()
Pour réaliser les nuages, nous nous sommes inspirés d’une technique de dessin apprise en cours d’arts plastiques, consistant à dessiner plusieurs petits ronds et à les remplir avec trois nuances de gris différents. Les nuages sont disposés aléatoirement dans le ciel, avec des nuances de gris pastel, afin de rester cohérents avec le reste des couleurs du dégradé. Ils sont représentés par plusieurs points (dots) positionnés légèrement décalés pour créer une texture.
9. « Les Deux Frères »
# Fonction pour dessiner les "Deux Frères"
def les_deux_freres():
penup()
goto(200, 0) # Position initiale pour les Deux Frères
# Petit triangle à gauche
fillcolor((140, 130, 120))
begin_fill()
pendown()
setheading(60)
forward(40)
right(120)
forward(40)
right(120)
forward(40)
end_fill()
penup()
# Premier grand rocher
goto(230, 0)
fillcolor((120, 110, 100))
begin_fill()
pendown()
setheading(60)
forward(110)
right(120)
forward(110)
right(120)
forward(110)
end_fill()
penup()
# Deuxième grand rocher
goto(310, 0)
fillcolor((100, 90, 80))
begin_fill()
pendown()
setheading(60)
forward(120)
right(120)
forward(120)
right(120)
forward(120)
end_fill()
Pour dessiner les Deux Frères, nous avons utilisé des triangles, représentant de manière stylisée les rochers. La couleur choisie est un gris sombre pour les rochers, afin de contraster avec le ciel. La position et l’orientation sont ajustées pour bien les intégrer dans le paysage.
10. Configuration de la fenêtre
# Configuration de la fenêtre Turtle
setup(1280, 720, 0, 0)
colormode(255)
speed(0)
Dans cette étapes du code nous délimitons la fenêtre afin d’avoir tous les éléments du décor dans la fenêtre afin de tous les apercevoir.
11. Execution des fonctions
# Création du coucher de soleil (océan + ciel)
degrade((0, 0, 255), (255, 255, 102), 720, 360)
degrade((255, 255, 102), (0, 0, 255), 720, 0, effet_vague=True)
# Dessin du soleil, des étoiles, des nuages et des îlots des Deux Frères
soleil((100, 100), 100, (255, 255, 102))
etoiles()
nuages()
les_deux_freres()
done()
Ici nous faisons appelle à tout les fonctions afin de réaliser le dessin.
Les difficultés rencontrées
Lors des nombreux tests réalisés, nous avons rencontré plusieurs difficultés, notamment avec les valeurs RGB et les fonctions dégradé et nuages, en raison de la complexité de leur création et des formules de calcul utilisées.
Source
Pour mener à bien ce projet, nous avons eu recours à nos connaissances personnelles ainsi qu’à Internet. Nous avons utilisé des sites comme NumWorks.com et Python.org pour apprendre de nouvelles choses, et nsi.xyz pour consulter les anciens projets afin de comprendre les attentes.
Après beaucoup de tests et d’ajustements, voici le rendu final de notre projet que vous trouverez ci-dessous, résultat de tout le travail que nous y avons investi.
Linkin Park est un groupe de rock et de métal américain formé en 1996. Il est actuellement composé de Emily Armstrong au chant à la suite du décès de Chester Bennington, Colin Brittain à la batterie à la suite du départ de Rob Bourdon, Mike Shinoda au chant(rap), à la guitare rythmique et au clavier, Brad Delson à la guitare solo, Dave Farrell à la guitare basse et Joe Hahn aux platines, effets et mixages.
Le fond
C’est un dégradé allant du blanc au noir grâce à une boucle for qui dessine les traits de couleurs au fur et à mesure. J’ai choisis ces teintes car le symbole et le nom du groupe sont habituellement représentés en noir avec un fond blanc ou inversement.
Le logo du groupe Linkin Park a beaucoup changé au cours du temps et cette forme est sûrement ma préférée. Chaque angle de l’hexagone est censé symboliser un des membres de la bande (six au total). Pour le codage du logo ; il est composé d’un goto(x,y) pour définir où la figure commencera. Ensuite, la fonction circle() me servira deux fois pour les deux arc de cercle et enfin je ferais tous les angles à l’aide des fonction setheading() pour définir l’angle de direction du trait et forward() pour définir la longueur de ce trait.
Pour écrire « Linkin » j’ai d’abord définit le i avec la fonction def pour le réutiliser dans d’autre lettres comme la barre du L, du N, du K et les deux barres du dernier N. J’ai ensuite utilisé les fonctions goto(x,y) pour commencer de nouvelles lettres aux coordonnées voulues, setheading() et forward() comme pour le logo. Mais j’ai aussi commencé à appliquer les fonction begin_fill() et end_fill() qui permette de remplir une portion de dessin de la couleur définit par fillcolor(r,g,b) tant que tous les pointes sont reliés.
Pour l’écriture de « Park », j’ai procédé de la même manière qu’avec « Linkin » : j’ai crée une fonction avec def qui a la même forme que la fonction i mais avec des mesures plus grandes et qui s’appelle donc I(i majuscule). J’ai réutilisé les fonctions circle() pour les boucles du P et du R ; c’est d’ailleurs le même bout de code grâce aux fonctions setheading() et forward() (on aurait été de changer toutes les données avec des goto(x,y). Le K, lui, est le même que le petit k mais avec des mesures plus grandes. Pour l’intérieur du A j’ai fais un triangles avec les fonctions setheading() et forward() puis j’ai essayé de le remplis avec begin_fill() et end_fill() de la même couleur que le fond.
Pour notre premier projet de la spé NSI dans le lycée Louis Pasteur, on nous à demandé de réaliser une image déssinée en Python. Nous avions libre choix de réaliser le dessin que l’on desirait, on à donc décidé de réaliser un sujet qui nous passione – le Pixel Art. Seulement, déssiner un pixel art en python demande beaucoup de travail et de réflexion.
Pour valoriser encore plus notre travail, nous avons décidé de rendre cette image animée.
C’est pour cela que le prof nous à suggeré d’utiliser les fonctions, et dans la suite de cet article, nous vous présenterons les techniques qui nous ont permi d’optimiser et de réaliser notre animation représentant un Pixel Art d’une nuie étoilée.
Schéma Original
Tout d’abord, Léandre à commencé par schématiser notre idée sur un logiciel de déssin pixelart – Aseprite.
Nous avons décidé de transcrire seulement les rideaux et la fenêtre en python, sinon le travail était trop manuel, long, et ne demandait pas tant de réfléxion.
Reconstitution des rideaux en Python
Commençons par le commencement :
Nous avons défini les constantes suivantes, qui vont nous aider plus tard.
Puis, nous avons transcrit manuellement le schéma en python à l’aide de boucles for, et d’une fonction spéciale, conçue par Clovis, nommée draw_pixel_symmetric(couleur, x, y).
Pourquoi symmetric? Car cela nous permet de réaliser 2 rideaux en même temps, symétrique à l’axe vertical, en 2 fois moinsde lignes !
D’ailleurs, fun fact. Nous avions pris plus d’une heure à trouver comment réaliser cette symétrie. Clovis était parti dans l’écriture d’un algorithme de dessin de pixels sous forme de dictionnaires {"y = 0": ["Couleur du pixel en x = 0", "Couleur du pixel en x = 1", "etc.."], "y 1":["..."]} avant de trouver une solution plus simple, efficace qui occupe un peu moins de 10 lignes.
def draw_pixel_symmetric(couleur, x, y):
# OG PIXEL
penup()
goto(x, y)
pendown()
color(couleur)
begin_fill()
for _ in range(4):
forward(PIXEL_SIZE)
left(90)
end_fill()
penup()
# SYMMETRIQUE PIXEL
goto(-x, y)
pendown()
begin_fill()
for _ in range(4):
forward(PIXEL_SIZE)
left(90)
end_fill()
penup()
C’est évident – au lieu d’avoir un seul pixel en x, y, nous l’avons dupliqué et placé le doublon en -x, y.
Seulement, si c’était si simple.. Nous avons crée la fonction rideaux() où se focalise la transcription manuelle. Merci à Léandre d’avoir transcrit l’entièreté du rideau (2h de travail : 1400 lignes de code).
def rideaux():
x = -SCREEN_WIDTH//2
y = -SCREEN_HEIGHT//2 + PIXEL_SIZE
for _ in range(2):
draw_pixel_symmetric('#9e1b1b',x,y)
x = x + PIXEL_SIZE
x = -SCREEN_WIDTH//2
y = -SCREEN_HEIGHT//2 + PIXEL_SIZE * 2
draw_pixel_symmetric('#9e2828',x,y)
x = x + PIXEL_SIZE
draw_pixel_symmetric('#ac3232',x,y)
x = x + PIXEL_SIZE
# ... Et la suite dont on vous fait part d'abstraction.
rideaux() sans système de symétrie
rideaux() avec draw_pixel_symmetric(). Et voici donc le résultat final. Pas mal non ? Ce n’est seulement que la première étape.
Système de gradient
Le système de gradient, développé par Clovis, prend 5 arguments :
colors (liste ["couleur 1", "couleur 2"])
x_start
y_start
x_end
y_end
Sans oublier une fonction qui converti l’héxadécimal en décimal, pour pouvoir manipuler des couleurs RGB, et assurer une transition des couleurs de manière fluide.
def hex_to_rgb(hex_color):
hex_color = hex_color.lstrip('#')
return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
def draw_gradient(colors, x_start, y_start, x_end, y_end):
penup()
setheading(0) # tortue regarde à l'est
current_y = y_start
total_steps = y_end - y_start
start_rgb = hex_to_rgb(colors[0])
end_rgb = hex_to_rgb(colors[1])
while current_y <= y_end:
proportion = (current_y - y_start) / total_steps
interpolated_rgb = tuple(
int(start + (end - start) * proportion)
for start, end in zip(start_rgb, end_rgb)
)
pencolor(interpolated_rgb)
penup()
goto(x_start, current_y)
pendown()
forward(x_end - x_start)
current_y += 1
Expliquons la fonction draw_gradient()plus en détail :
Celle-ci effectue une boucle while qui s’arrête lorsque current_y dépasse ou est égal aux coordonnées y de destination (y_end).
Pour calculer la valeur RGB correspondante à la position de current_y, nous effectuons une boucle for qui consiste à construire un tuple contenant les valeurs rouge, vert, et bleu en fonction de start_rgb, end_rgb et la valeur qui change selon current_y : proportion.
Résultat avec les valeurs hexadécimales ["#4a4c9b", "#050758"].
Appel de la fonction complète : draw_gradient(["#4a4c9b", "#050758"], -SCREEN_WIDTH//2, -SCREEN_HEIGHT//2, SCREEN_WIDTH//2, SCREEN_HEIGHT//2)
Les étoiles
Pour pimenter notre gradient, nous avons placé des étoiles à des emplacements aléatoires.
Voici l’algorithme que nous avions développé.
def initialize_positions(count, screen_width, screen_height):
# liste avec des tuples dedans PRCQ ON ADORE LES TUPLES !!!!! TOUCHE PAS A MON TUPLE !!!
positions = []
for _ in range(count):
positions.append((randint(-screen_width // 2, screen_width // 2), randint(-screen_height // 2, screen_height // 2)))
return positions
def draw_stars(stars):
for (x, y) in stars:
draw_pixel(2, x, y, '#ffffff')
stars = initialize_positions(STAR_COUNT, SCREEN_WIDTH, SCREEN_HEIGHT)
draw_stars(stars)
Pour générer les positions aléatoires, on à décidé de créer une fonction initialize_positions(count, screen_width, screen_height) qui prend en compte les arguments correspondant au montant désiré, la largeur et la hauteur de l’écran. Cette fonction renvoie une liste [] remplie de tuples (x, y) contenant les positions aléatoires en x et y. Créer cette fonction nous permettra d’optimiser encore plus notre système de flocons dans la prochaine section de cet article.
Puis, une fonction draw_starts(stars) à été réalisée pour looper dans chaques tuples contenus dans la liste stars et placer un pixel de taille 2 à l’emplacement correspondant.
Gradient + Etoiles
Gradient + Etoiles + Rideaux
Les compléments des rideaux
Pour ajouter un peu plus de détails, nous avons décidé de rajouter un mur en bas de l’image et un cadre de fenêtre.
De plus, nous avons détaillé les couleurs en rajoutant un système de randomization pour altérner les couleurs marron (claires & foncées). Pour faire cela, il fallait inventer un système pour que chaques pixels ai une variation de marron propre à celui-ci. (Vu qu’il y a une animation plus tard, faire colour_variations_marron[randint(0, 1)] changerait la couleur du pixel à chaques générations).
colour_variations_marron = []
# initialisation des variations de couleurs une seule fois
colour_variations_marron = tuple(
tuple("#63352d" if randint(0, 1) == 0 else "#5e3129" for _ in range(SCREEN_HEIGHT))
for _ in range(SCREEN_WIDTH)
)
def supplement_rideaux():
x = -SCREEN_WIDTH//2
y = SCREEN_HEIGHT//2
# Barre horizontale
for _ in range(44):
draw_pixel_symmetric('#4e2b25',x,PIXEL_SIZE * 2.2)
x = x + PIXEL_SIZE
x = 0 - PIXEL_SIZE * 12
y = SCREEN_HEIGHT//2
# Double Barre Verticale
for _ in range(45):
color = colour_variations_marron[round(x)][round(y)]
draw_pixel_symmetric(color, x, y)
draw_pixel_symmetric(color, x - PIXEL_SIZE // 1.5, y)
y -= PIXEL_SIZE
x = -SCREEN_WIDTH//2
y = -SCREEN_HEIGHT//2 + PIXEL_SIZE * 8
# Barre horizontale au dessus du mur
for _ in range(43):
draw_pixel_symmetric('#4e2b25',x,y)
x = x + PIXEL_SIZE
x = -SCREEN_WIDTH//2
y = -SCREEN_HEIGHT//2
# Mur en bas
for _ in range(7):
for _ in range(22):
for _ in range(3):
color = colour_variations_marron[round(x)][round(y)]
draw_pixel(PIXEL_SIZE,x,y,color)
x = x + PIXEL_SIZE
draw_pixel(PIXEL_SIZE,x,y,'#8f563b')
x = x + PIXEL_SIZE
x = -SCREEN_WIDTH//2
y += PIXEL_SIZE
Et voici le résultat !
Les flocons animés
Cette dernière partie était la plus intéressante à faire. Beaucoup de travail et de recherches mais pour un résultat surprenant.
Voici la fonction draw_snowflake() qui déssine un flocon en x, y. Le choix d’une couleur est possible grâce à l’argument couleur. Et la taille de celui-ci est désirable grâce à l’argument size_ratio. Étonnement, Clovis était celui qui à désinné ce flocon, et à trouvé cela plus compliqué comparé aux autres fonctions développées dans tout le projet (ça à pris du temps et de l’imagination).
def draw_snowflake(size_ratio, og_x, og_y, couleur):
color(couleur)
x, y = og_x, og_y
ps = 7 * size_ratio
# pixel(ps, og_x, og_y)
goto(og_x - 8*ps, og_y - 8*ps)
x, y = pos()
left(90)
pendown()
for _ in range(16):
draw_pixel(ps, x, y)
x, y = x + ps, y + ps
goto(x, y)
goto(og_x - 8*ps, og_y + 7*ps)
x, y = pos()
for _ in range(16):
draw_pixel(ps, x, y)
x, y = x + ps, y - ps
goto(x, y)
goto(og_x - ps, og_y + ps * 8)
x, y = pos()
og_x2, og_y2 = x, y
for p in range(18):
goto(og_x2, og_y2 - (p * ps))
x, y = pos()
for i in range(2):
draw_pixel(ps, x + (i * ps), y)
x, y = pos()
goto(og_x - 8 * ps, og_y- ps)
x, y = pos()
og_x2, og_y2 = x, y
for p in range(16):
goto(og_x2 + (p * ps), og_y2)
x, y = pos()
for i in range(2):
draw_pixel(ps, x , y+ (i * ps))
x, y = pos()
penup()
‘Quel banger‘ – Léandre quand Clovis à montré son flocon pour la premère fois
Ensuite, passons au système de mouvement des flocons.
def update_snowflake_positions(current_positions):
updated_positions = []
for (x, y) in current_positions:
new_y = y + SNOWFLAKE_MOVE_DOWN
# snowflake pos reset if goes too down
if new_y < -SCREEN_HEIGHT // 2:
new_y = SCREEN_HEIGHT // 2
new_x = randint(-SCREEN_WIDTH // 2, SCREEN_WIDTH // 2)
updated_positions.append((new_x, new_y))
else:
updated_positions.append((x, new_y))
return updated_positions
snowflakes = initialize_positions(SNOWFLAKE_COUNT, SCREEN_WIDTH, SCREEN_HEIGHT)
Pour commencer, la fonction update_snowflake_positions(current_positions) prend en compte la liste [(x, y), (x, y)] contenant les tuples de positions x, y de chaques flocons. (réf. initialize_positions(count, screen_width, screen_height)).
Puis initialise une nouvelle liste updated_positions qui contient une nouvelle version de chaques tuples (x, y), cette fois-ci avec une valeur y différée selon la constante SNOWFLAKE_MOVE_DOWN(new_y = y + SNOWFLAKE_MOVE_DOWN).
En plus, nous avons ajouté un système qui replace le flocon en haut de l’écran si les coordonnées y de celui-ci dépasse le point le plus bas de l’écran.
Point le plus haut de l’écran : SCREEN_HEIGHT // 2
Point le plus bas de l’écran : -SCREEN_HEIGHT // 2
La valeur SCREEN_HEIGHT est divisée par 2, car le module turtle fait en sorte que la position (0, 0) correspond au centre absolu de l’écran.
Enfin, voici la boucle finale permettant une animation.
for generation in range(1, TOTAL_GENERATIONS + 1): # main loop
clear()
snowflakes = update_snowflake_positions(snowflakes)
draw_snowflakes(snowflakes)
update()
print(f"Generation n'{generation} dessinée :D")
time.sleep(WAIT_TIME_MS / 1000) # Converti millisecondes en seconds
Explication des termes :
clear() permet d’effacer complètement tous les éléments de la fenêtre turtle.
update() permet de mettre à jour la fenêtre, utile pour réaliser des animations.
time.sleep(WAIT_TIME_MS / 1000) permet un temps d’attente entre chaques image exposée. Ici la constante WAIT_TIME_MS est de 100, et la fonction time.sleep() ne prend seulement comme argument des secondes. Il faut donc convertir les millisecondes en secondes, signifiant une division par 1000.
Si TOTAL_GENERATIONS = 1, alors turtle nous renverra une seule image, et non un animé.
Autrement, si TOTAL_GENERATIONS est au dessus de 1, on obtient une animation. Voici un exemple avec 100 :
Pas mal non ?
Sources
Pour réaliser toutes ces fonctions, nous avons utilisé nos propres connaissances, logique, et w3schoolsqui nous à beaucoup servi pour comprendre certaines opérations et fonctions integrées dans python (comme la fonction zip).
Image et animation finale
Télécharger le projet
Remarque des enseignants : les élèves n’ont pas respecté le nombre maximal de lignes imposé (404) ni la charte de nommage des variables. Cela pose de nombreux problèmes. L’article est néanmoins publié.
L’Op Art, ou art optique est un mouvement artistique qui joue avec notre perception visuelle. Son origine remonte aux années 1920 mais il connaît un véritable essor dans les années 1960 avec des artistes comme Victor Vasarely et Bridget Riley. Ils utilisent notamment les contrastes de couleurs, la perspective, la répétition et l’alternance de formes géométriques, pour créer l’illusion de mouvement et de profondeur. Dans cet article, nous allons vous présenter une œuvre inspirée de ce mouvement et entièrement réalisée à l’aide d’un code écrit en langage Python avec le module Turtle.
L’inspiration de départ
Le problème avec les illusions d’optique est que ce que l’on voit, n’est pas la réalité. La première difficulté rencontrée a donc été de trouver un modèle avec des explications pour réaliser la figure. Après de nombreuses recherches, nous avons fini par trouver un programme de construction d’un couloir en damier sur le site d’une classe de CM2 (https://la-gazette-des-cm2-de-ducerceau.sitew.fr/Illusions_d_optique.qB.htm) dans le cadre d’un travail sur Victor Vasarely. Nous l’avons adapté pour respecter les dimensions de l’image finale (forme rectangulaire et non carrée).
Le programme de construction
Le programme de construction nous a permis d’identifier les différentes étapes à programmer :
Partager les côtés du rectangle en intervalles de même longueur ;
Tracer les segments qui relient deux points symétriques par rapport à l’origine ;
Tracer les rectangles qui diminuent régulièrement en taille.
Pour apporter notre touche personnelle, nous avons choisi de « peindre » les murs, le sol et le plafond du « couloir » avec des dégradés de couleurs.
Les variables modifiables seront la longueur, la largeur, les couleurs, le nombre d’intervalles, la taille des intervalles, le nombre de rectangles.
Programmation des couleurs
Nous avons commencé par les gradients de couleur en utilisant la méthode expliquée par Eric Schrafstetter dans sa vidéo « l’ART génératif, partie 1 – Transformations affines. »
Explication pour le « mur droit » :
La tortue se déplace en abscisse de 0 à L/2. à chaque pas, elle va tracer un segment en couleur de bas en haut (cap = 90°).
Pour une abscisse u donnée, ce segment part d’une diagonale et arrive sur l’autre. Donc on a créé les fonctions diag1 et diag2 qui retournent les ordonnées sur chaque diagonale.
def diag1(u):
return largeur/longueur * u
def diag2(u):
return - largeur/longueur * u
Entre 0 et L/2, la couleur varie de col_dep (couleur de départ = violet) à col_arr (couleur d’arrivée = jaune).
Comme la couleur ne varie pas sur le même intervalle que l’abscisse de la tortue, on utilise une fonction affine qui transforme un point de l’intervalle [0 ; L/2] en un point de l’intervalle [col_dep ; col_arr] :
Comme les dégradés ne sont pas dans le même sens ni de la même couleur suivant les triangles, nous avons créé une fonction « triangle » qui dépend de l’orientation de la tortue (cap) et des couleurs de départ et d’arrivée :
def triangle (cap, col_dep, col_arr):
colormode(255) # pour pouvoir utiliser le mode RVB
rvb = [0,0,0]
pensize(2)
u_fin= trunc(longueur/2)
for u in range(u_fin):
for k in range(3):
rvb[k] = T(u, 0, u_fin, col_dep[k], col_arr[k])
pencolor((trunc(rvb[0]), trunc(rvb[1]), trunc(rvb[2])))
penup()
if cap == 90 :
goto(u,diag2(u))
pendown()
goto(u,diag1(u))
elif cap == 180 :
goto(u,diag1(u))
pendown()
goto(-u,diag2(-u))
elif cap == 270 :
goto(-u,diag2(-u))
pendown()
goto(-u,diag1(-u))
elif cap == 0 :
goto(-u,diag1(-u))
pendown()
goto(u,diag2(u))
Programmation des « diagonales »
Pour simplifier, nous avons appelé aussi « diagonales », les segments qui relient un point et son symétrique par rapport à l’origine.
La tortue part de (-L :2 ; -l /2) à gauche, fait sa diagonale, revient à gauche en se décalant d’un intervalle vers le haut, fait sa diagonale, …
On procède de la même manière pour les diagonales de haut en bas, en partant de (-L/2 ; l/2).
On a donc d’abord créé une fonction « diag » qui sert à relier un point et son symétrique :
Puis, nous avons programmé deux boucles, pour tracer les « diagonales gauche-droite » puis les « diagonales haut-bas » :
for i in range(nb_int2):
diag(-longueur / 2, -largeur/2 + i*taille_int2)
for j in range(nb_int1):
diag(-longueur/2 + j*taille_int1, largeur / 2)
Programmation des rectangles
Nous avons codé une fonction « rectangle » où la tortue part du coin bas à gauche et tourne dans le sens inverse des aiguilles d’une montre :
def rectangle(L): # fonction permettant de tracer un rectangle
penup()
goto(-L/2, diag1(-L/2))
pendown()
goto(L/2,diag2(L/2))
goto(L/2,diag1(L/2))
goto(-L/2,diag2(-L/2))
goto(-L/2, diag1(-L/2))
Pour faire diminuer la taille des rectangles de manière régulière, nous avons décidé d’appliquer un pourcentage de diminution de p% à la longueur (p est une variable globale qui peut être modifiée) :
t = float(longueur)
while t > 10 :
rectangle(t)
t = t - t*p #la longueur diminue de p % à chaque itération
Pour l’extrémité du couloir, nous avons tracé un rectangle noir pour lequel nous avons essayé plusieurs dimensions et nous avons finalement choisi 160 pour des raisons esthétiques :
# rectangle final
fillcolor('black')
begin_fill()
rectangle(160)
end_fill()
Plongeons dans un univers qui évoque sans le savoir pourquoi une nostalgie avec cette scène inspirée de ces soirs où après être passer une soirée avec ses amis il est temps de retourner à sa voiture dans la nuit et l’humidité. Au premier plan, une voiture au design minimaliste évoque les lignes classiques d’une BMW M3 e30, garée devant un bâtiment aux néons vibrants. Sous un ciel étoilé, l’ensemble évoque une esthétique des années 80, où le contraste entre l’ombre et les couleurs vives nous transporte dans une ambiance intemporelle et nostalgique.
Inspirations
Pour créer nôtre image, celle-ci nous a beaucoup servit de repère, notamment dans les perspectives.
source : @initial_clip (instagram)
Cette voiture est celle que l’on a représentée, une BMW M3 e30. Mise en vente dans le milieu des années 80
Résultat Final
Pour générer cette image le script est découper en plusieurs parties :
Mise en place du script
L’arrière plan
Le bâtiment
La voiture
L’enregistrement de l’image
Mise en place du script
import turtle
import random
try:
from PIL import Image
pillow_installed = True
except:
print("Oops! - ModuleNotFoundError: No module named 'PIL' - RTFM :")
print("https://nsi.xyz/py2png")
pillow_installed = False
titre = "Décor Urbain"
turtle.title(titre)
screen = turtle.Screen()
screen.setup(width=1920, height=1080)
turtle.speed(150000)
turtle.ht()
turtle.colormode(255)
On commence le code en important tout nos modules nécessaires : Turtle, Random et Pillow.
import turtle
import random
try:
from PIL import Image
pillow_installed = True
except:
print("Oops! - ModuleNotFoundError: No module named 'PIL' - RTFM :")
print("https://nsi.xyz/py2png")
pillow_installed = False
On continue avec la mise en place du titre de la fenêtre, des dimensions de l’écran, la vitesse du curseur, la disparition du curseur et le système de couleur mit en rgb.
L’arrière plan
On rentre dans le vif du sujet avec l’arrière plan de l’image. Qui comporte le ciel étoilé et la route avec ses trottoirs.
# Fonction pour dessiner le fond avec un dégradé
def fond():
rciel, gciel, bciel = 176, 196, 205 # Couleur initiale du ciel
hauteur = -351
turtle.penup()
turtle.goto(-960, hauteur)
turtle.pendown()
# Boucle pour créer un dégradé de couleur vers le haut
while hauteur < 540:
turtle.pencolor(int(rciel), int(gciel), int(bciel))
turtle.forward(1920)
hauteur += 1
turtle.goto(-960, hauteur)
bciel = max(100, bciel - 205 / 540) # Ajuste la composante bleue
rciel = max(0, rciel - 176 / 540) # Ajuste la composante rouge
gciel = max(0, gciel - 196 / 540) # Ajuste la composante verte
# Fonction pour dessiner des étoiles aléatoirement
def etoiles():
for i in range(150):
turtle.penup()
x = random.randint(-960, 960)
y = random.randint(-351, 540)
turtle.goto(x, y)
turtle.pendown()
turtle.dot(random.randint(1, 8), "white")
# Dessiner la route en perspective
def route():
turtle.pensize(7)
turtle.begin_fill()
turtle.color("black","Slate Grey")
turtle.penup()
turtle.goto(-428,-81)
turtle.pendown()
turtle.goto(-928,-81)
turtle.goto(-928,-411)
turtle.goto(-428,-81)
turtle.end_fill()
turtle.begin_fill()
turtle.color("black")
turtle.penup()
turtle.goto(-928,-411)
turtle.pendown()
turtle.goto(-428,-81)
turtle.goto(1200,-300)
turtle.goto(315,-900)
turtle.goto(-928,-411)
turtle.end_fill()
turtle.color("white")
turtle.penup()
turtle.goto(-775,-411)
turtle.pendown()
turtle.goto(-275,-81)
turtle.color("Slate Grey")
turtle.begin_fill()
turtle.penup()
turtle.goto(315,-410)
turtle.pendown()
turtle.goto(-500,-330)
turtle.goto(0,0)
turtle.goto(1000,-350)
turtle.goto(315,-410)
turtle.end_fill()
# Appelle les fonctions pour dessiner le fond, les étoiles et la route
fond(),etoiles(),route()
Le ciel :
# Fonction pour dessiner le fond avec un dégradé
def fond():
rciel, gciel, bciel = 176, 196, 205 # Couleur initiale du ciel
hauteur = -351
turtle.penup()
turtle.goto(-960, hauteur)
turtle.pendown()
# Boucle pour créer un dégradé de couleur vers le haut
while hauteur < 540:
turtle.pencolor(int(rciel), int(gciel), int(bciel))
turtle.forward(1920)
hauteur += 1
turtle.goto(-960, hauteur)
bciel = max(100, bciel - 205 / 540) # Ajuste la composante bleue
rciel = max(0, rciel - 176 / 540) # Ajuste la composante rouge
gciel = max(0, gciel - 196 / 540) # Ajuste la composante verte
.Le ciel de l’image est en grand dégradé qui vire d’un gris-bleu à un bleu nuit. Pour ce faire on défini la couleur initiales du ciel, avec sa quantité de rouge, vert et bleu. On détermine ensuite la hauteur où démarre le dégradé avec la variable « hauteur ». On déplace le curseur en -960 et à la hauteur minimale ici -351. On démarre une boucle qui prend fin lorsque hauteur atteint 540, soit la hauteur maximale souhaitée. La couleur y est défini sur les valeurs actuelles de rouge, de vert et de bleu, on fait avancer le curseur de 1920, la largeur de la fenêtre. On ajoute un à la hauteur et déplace le curseur de nouveaux en -960 quant aux abscisses et à la nouvelle hauteur. La couleur est ensuite modifier en soustrayant la quantité initiale de la couleur divisé par le nombre de traits faits. Ce qui va logiquement amené la valeur à 0 au bouts de toute les itérations. Mais voulant du bleu et non du noir en couleur finale en instaure une limite avec la fonction max() qui est définie sur 100.
Les étoiles :
# Fonction pour dessiner des étoiles aléatoirement
def etoiles():
for i in range(150):
turtle.penup()
x = random.randint(-960, 960)
y = random.randint(-351, 540)
turtle.goto(x, y)
turtle.pendown()
turtle.dot(random.randint(1, 8), "white")
Pour faire les étoiles on défini le nombre d’étoiles que l’on veut mettre ici c’est défini en argument de range(), que est défini sur 150 itérations.
On défini une variable x qui comporte une valeur entière aléatoire entre -960 et 960, de même pour la variable y cette fois entre -351 et 540. On déplace le curseur à ces valeurs qui servent de coordonnées. Et on y fait un point d’un diamètre aléatoire entre 1 et 8 et de couleur blanche : range()
La génération aléatoire permet d’avoir parfois la formations de constellation non calculées. Cela donne je trouve une belle authenticité à l’image.
Le code là assez répétitif, on trace un polygone que l’on rempli de couleur à des fonctions turtle.begin_fill() qui déterminer le début du remplissage et turtle.end_fill() qui détermine la fin du remplissage. On fait ceci pour trois polygones, un qui va faire le trottoir gauche, un qui va faire la route, et l’autre qui va s’installer devant la route et va servir de trottoir droit. Après le traçage du polygone pour la route on trace une ligne simple qui sert de ligne blanche pour ajouter du réalisme à la route.
Les polygones et traits paraissent pas propres, et avec des coordonnées douteuses mais seront par la suites recouverts de façons à ce que cela soit joli.
Appel des fonctions :
# Appelle les fonctions pour dessiner le fond, les étoiles et la route
fond(),etoiles(),route()
On appelle finalement les trois fonctions.
Le bâtiment
#fonction pour convertir les points de mon dessin en des points sur python
def point(x,y):
l = (1920 * x) / 14,5
h = (1080 * y) / 8
return l,h
pen = turtle.Turtle()
pen.penup()
pen.pensize(3)
pen.speed(15000)
pen.ht()
# Liste des coordonnées pour les points du bâtiment
def batiment():
coords = [ (315, 445),(-398, 324),(-398, -284),(315, -351), (398, -351), (973, -324), (973, 324), (315, 445), ]
pen.fillcolor("light gray")
pen.penup()
pen.goto(coords[0])
pen.pendown()
pen.begin_fill()
for x, y in coords[1:]:
pen.goto(x, y)
pen.end_fill()
# Dessiner la ligne centrale
pen.penup()
pen.goto(315, 445) # Retour au sommet
pen.pendown()
pen.goto(315, -351) # Descend jusqu'au bas du bâtiment
return
def pare_soleil():
coords = [(-398, 27), (315, 54), (315, -108),(-438, -81), (-398, 27), (-110, 37.5),(-157, -90.5),(108, -101.2),(151,47.25),(315,54),(274,-108),]
pen.penup()
pen.goto(coords[0]) # Aller au premier point de la liste
pen.pendown()
pen.fillcolor("#FFD700")# colorier le pare soleil côté gauche
pen.penup()
pen.goto(coords[0])
pen.pendown()
pen.begin_fill()
pen.goto(coords[5])
pen.goto(coords[6])
pen.goto(coords[3])
pen.end_fill()
pen.fillcolor("#FAFAD2")# colorier le pare soleil côté droit
pen.penup()
pen.goto(coords[5])
pen.pendown()
pen.begin_fill()
pen.goto(coords[1])
pen.goto(coords[2])
pen.goto(coords[6])
pen.end_fill()
pen.fillcolor("#FFFFF0")# colorier le pare soleil sur l'extrémité de droite pour donné un effet de 3D
pen.penup()
pen.goto(coords[1])
pen.pendown()
pen.begin_fill()
pen.goto(coords[1])
pen.goto(coords[2])
pen.goto(coords[10])
pen.goto(coords[1])
pen.end_fill()
pen.color("black") # Couleur du contour
pen.pensize(5) # Épaisseur du contour
pen.penup()# Début du remplissage de la figure
pen.goto(coords[0]) # Aller au premier point de la liste des coordonnées
pen.pendown()
# Dessiner la figure en reliant les points
for x, y in coords[1:]:
pen.goto(x, y)
pen.penup()
return
def contour_fenetre():
coords = [ (-370, 162),(185, 216),(209, 202),(209,53),(185,52),(185, 201.5),(185, 216),(185, 201.5),(-350, 148),(-350, 31),(-370, 30),(-370, 162),(-350, 148),(-370, 162),(-112,187),(-112,38),(-82.5,39),(-82.5,189),(-62.5,175),(-62.5,41),]
pen.pensize(3)
pen.penup()
pen.goto(coords[0]) # Aller au premier point de la liste des coordonnées
pen.pendown()
for x, y in coords[1:]: # Boucle pour aller de point en point
pen.goto(x, y)
pen.fillcolor("#FFFFF0")
pen.fillcolor("#808080")# colorier en gris le contour des fentres
pen.penup()
pen.goto(coords[0])
pen.pendown()
pen.begin_fill()
pen.goto(coords[1])
pen.goto(185,202)
pen.goto(-82.5,175)
pen.goto(coords[16])
pen.goto(coords[15])
pen.goto(-112,173)
pen.goto(coords[8])
pen.goto(coords[9])
pen.goto(coords[10])
pen.goto(coords[0])
pen.end_fill()
return
def fenetre_gauche():
coords = [ (-370, 162),(185, 216),(209, 202),(209,53),(185,52),(185, 201.5),(185, 216),(185, 201.5),(-350, 148),(-350, 31),(-370, 30),(-370, 162),(-350, 148),(-370, 162),(-112,187),(-112,38),(-82.5,39),(-82.5,189),(-62.5,175),(-62.5,41),]
pen.pensize(3)
pen.fillcolor("#FF69B4")
pen.penup()
pen.goto(coords[8])
pen.pendown()
pen.begin_fill()
pen.goto(-112,173)
pen.goto(coords[15])
pen.goto(coords[9])
pen.goto(coords[8])
pen.end_fill()
return
def fenetre_droite():
coords = [ (-370, 162),(185, 216),(209, 202),(209,53),(185,52),(185, 201.5),(185, 216),(185, 201.5),(-350, 148),(-350, 31),(-370, 30),(-370, 162),(-350, 148),(-370, 162),(-112,187),(-112,38),(-82.5,39),(-82.5,189),(-62.5,175),(-62.5,41),]
pen.pensize(3)
pen.fillcolor("#FF69B4")# fenetre de droite
pen.penup()
pen.goto(coords[18])
pen.pendown()
pen.begin_fill()
pen.goto(185,202)
pen.goto(coords[4])
pen.goto(coords[19])
pen.goto(coords[18])
pen.end_fill()
return
batiment(), pare_soleil(), contour_fenetre(), fenetre_gauche(), fenetre_droite()
Fonction usuelle et mise en place du code :
def point(x,y):
l = (1920 * x) / 14,5
h = (1080 * y) / 8
return l,h
Pour commencer, nous avons créé une fonction appelée point. Cette fonction consiste à convertir l’emplacement des points de notre image de référence ( en cm) en point sur python tout en gardant les proportions et symétries. Cette fonction est très simple, il suffit de lui donner 2 valeurs soit x et y puis elle va procéder à un produit en croix qui nous rendra l et h l’emplacement du point sur python.
pen.turtle est utilisé pour créer un nouvel objet turtle nommé pen.
On utilisera la “tortue” (ici pen) , on pourra ensuite l’utiliser pour dessiner.
pen.penup()Cette commande indique à la tortue de lever son stylo, ce qui signifie qu’elle va se déplacer sans tracer de ligne.
pen.pensize(3)Cette ligne définit la taille du stylo de la tortue, c’est-à-dire l’épaisseur des lignes qu’elle va tracé.
pen.speed(15000)Cette commande fixe la vitesse de déplacement de la tortue. Nous avons choisi 15000 pour être sûr que la tortue va à sa vitesse maximale en fonction de l’ordinateur utilisé.
pen.ht()cela signifie “hide turtle”, c’est-à-dire cacher la tortue.
def batiment():
coords = [ (315, 445),(-398, 324),(-398, -284),(315, -351), (398, -351), (973, -324), (973, 324), (315, 445), ]
pen.fillcolor("light gray")
pen.penup()
pen.goto(coords[0])
pen.pendown()
pen.begin_fill()
for x, y in coords[1:]:
pen.goto(x, y)
pen.end_fill()
# Dessiner la ligne centrale
pen.penup()
pen.goto(315, 445) # Retour au sommet
pen.pendown()
pen.goto(315, -351) # Descend jusqu'au bas du bâtiment
return
def batiment()
Tout d’abord, nous avons créé une fonction nommée batiment. Elle regroupe le code utilisé pour faire la base du bâtiment.
Puis , nous avons créé une liste de tuples nommé coords, chacun représentant les coordonnées (x, y) de points autour desquels la « tortue » va se déplacer pour dessiner les contours du bâtiment.
pen.fillcolor(“light gray”)
Cette commande fixe la couleur de remplissage pour le dessin de la tortue en gris clair. La tortue remplira l’intérieur du bâtiment avec cette couleur.
pen.goto(coords[0])La tortue va se déplacer au premier point de la liste de tuples.
pen.begin_fill()démarre le processus de remplissage. Une fois que la tortue trace tous les côtés du bâtiment, elle remplira la forme fermée avec la couleur light gray définie plus haut.
pen.end_fill() termine le processus de remplissage et remplit la forme fermée (le bâtiment) en gris clair.
for x, y in coords[1:]:
pen.goto(x, y)
Cette boucle for parcourt les coordonnées dans coords à partir du deuxième point (indiqué par coords[1:]).
À chaque itération, la tortue se déplace vers le point (x, y), dessinant une ligne entre chaque point consécutif.
pen.penup()
pen.goto(315, 445)
pen.pendown()
pen.goto(315, -351)
Cette partie dessine une ligne centrale verticale à l’intérieur du bâtiment.
pen.penup() lève le stylo pour que la tortue se déplace sans tracer jusqu’au sommet du bâtiment.
pen.goto(315, 445) la place en haut du bâtiment.
pen.pendown() abaisse le stylo, permettant de dessiner une ligne jusqu’à pen.goto(315, -351), qui est le bas du bâtiment.
def pare_soleil():
coords = [(-398, 27), (315, 54), (315, -108),(-438, -81), (-398, 27), (-110, 37.5),(-157, -90.5),(108, -101.2),(151,47.25),(315,54),(274,-108),]
pen.penup()
pen.goto(coords[0]) # Aller au premier point de la liste
pen.pendown()
pen.fillcolor("#FFD700")# colorier le pare soleil côté gauche
pen.penup()
pen.goto(coords[0])
pen.pendown()
pen.begin_fill()
pen.goto(coords[5])
pen.goto(coords[6])
pen.goto(coords[3])
pen.end_fill()
pen.fillcolor("#FAFAD2")# colorier le pare soleil côté droit
pen.penup()
pen.goto(coords[5])
pen.pendown()
pen.begin_fill()
pen.goto(coords[1])
pen.goto(coords[2])
pen.goto(coords[6])
pen.end_fill()
pen.fillcolor("#FFFFF0")# colorier le pare soleil sur l'extrémité de droite pour donné un effet de 3D
pen.penup()
pen.goto(coords[1])
pen.pendown()
pen.begin_fill()
pen.goto(coords[1])
pen.goto(coords[2])
pen.goto(coords[10])
pen.goto(coords[1])
pen.end_fill()
pen.color("black") # Couleur du contour
pen.pensize(5) # Épaisseur du contour
pen.penup()# Début du remplissage de la figure
pen.goto(coords[0]) # Aller au premier point de la liste des coordonnées
pen.pendown()
# Dessiner la figure en reliant les points
for x, y in coords[1:]:
pen.goto(x, y)
pen.penup()
return
pare soleil
Ensuite, nous avons créé une fonction nommée pare_soleil, qui regroupe le code utilisé pour dessiner un pare-soleil avec des effets de remplissage et de contour.
Puis, nous avons créé une liste de tuples nommée coords. Chacun de ces tuples représente les coordonnées (x, y) de points autour desquels la tortue va se déplacer pour dessiner le contour du pare-soleil.
La commande pen.penup() lève le stylo pour éviter de tracer une ligne jusqu’à la position initiale. Ensuite, pen.goto(coords[0]) déplace la tortue au premier point de la liste coords, et pen.pendown() abaisse le stylo pour pouvoir commencer à dessiner.
Pare soleil extrémité de gauche
La commande pen.fillcolor(« #FFD700 ») fixe la couleur de remplissage en jaune doré pour dessiner le côté gauche du pare-soleil.
La séquence suivante utilise pen.penup() pour lever le stylo, puis pen.goto(coords[0]) pour déplacer la tortue au premier point de la liste des coordonnées, et pen.pendown() pour abaisser le stylo à cet endroit.
pen.begin_fill() démarre le processus de remplissage.
Ensuite, la tortue se déplace successivement aux coordonnées coords[5], coords[6], et coords[3], ce qui crée un contour fermé. pen.end_fill() termine le processus et remplit cette zone en jaune doré.
Pare soleil extrémité de droite
Ici, pen.fillcolor(« #FAFAD2 ») change la couleur de remplissage pour un jaune clair (presque crème) qui sera utilisé pour le côté droit du pare-soleil.
pen.penup() lève le stylo pour déplacer la tortue sans tracer. pen.goto(coords[5]) place la tortue au point coords[5], et pen.pendown() abaisse le stylo pour commencer à tracer le contour.
pen.begin_fill() démarre le remplissage, puis pen.goto(coords[1]), pen.goto(coords[2]), et pen.goto(coords[6]) déplace la tortue aux différents points du côté droit du pare-soleil pour former le contour. Enfin, pen.end_fill() remplit cette zone avec la couleur jaune clair.
Troisième remplissage(effet 3d)
Ensuite, pen.fillcolor(« #FFFFF0 ») définit la couleur de remplissage en blanc cassé pour créer un effet 3D sur le bord droit du pare-soleil.
La séquence suivante lève le stylo avec pen.penup(), puis pen.goto(coords[1]) positionne la tortue au point de départ du bord droit. pen.pendown() abaisse le stylo pour commencer à dessiner.
pen.begin_fill() démarre le remplissage, et la tortue se déplace aux coordonnées coords[2], coords[10], et retourne à coords[1] pour former la bordure en blanc cassé, créant ainsi un effet de profondeur. pen.end_fill() termine et remplit cette zone.
Contour
Pour le contour du pare-soleil, pen.color(« black ») définit la couleur du contour en noir, et pen.pensize(5) fixe l’épaisseur de ce contour à 5 pixels.
pen.penup() lève le stylo pour éviter de tracer avant d’arriver au point de départ. pen.goto(coords[0]) place la tortue au premier point de la liste, et pen.pendown() abaisse le stylo pour commencer le tracé.
La boucle for parcourt les coordonnées à partir du deuxième point (indiqué par coords[1:]). À chaque itération, la tortue se déplace aux coordonnées (x, y), dessinant un segment de ligne entre chaque point et formant ainsi le contour complet du pare-soleil.
Enfin, pen.penup() lève le stylo pour éviter de tracer accidentellement en dehors de la figure.
def contour_fenetre():
coords = [ (-370, 162),(185, 216),(209, 202),(209,53),(185,52),(185, 201.5),(185, 216),(185, 201.5),(-350, 148),(-350, 31),(-370, 30),(-370, 162),(-350, 148),(-370, 162),(-112,187),(-112,38),(-82.5,39),(-82.5,189),(-62.5,175),(-62.5,41),]
pen.pensize(3)
pen.penup()
pen.goto(coords[0]) # Aller au premier point de la liste des coordonnées
pen.pendown()
for x, y in coords[1:]: # Boucle pour aller de point en point
pen.goto(x, y)
pen.fillcolor("#FFFFF0")
pen.fillcolor("#808080")# colorier en gris le contour des fentres
pen.penup()
pen.goto(coords[0])
pen.pendown()
pen.begin_fill()
pen.goto(coords[1])
pen.goto(185,202)
pen.goto(-82.5,175)
pen.goto(coords[16])
pen.goto(coords[15])
pen.goto(-112,173)
pen.goto(coords[8])
pen.goto(coords[9])
pen.goto(coords[10])
pen.goto(coords[0])
pen.end_fill()
return
def contour fenetre
Nous avons créé une fonction appelée contour_fenetre, qui contient le code nécessaire pour dessiner le contour d’une fenêtre avec des effets de remplissage.
Nous définissons ensuite une liste de coordonnées coords pour représenter les points (x, y) que la tortue va relier afin de former le contour de la fenêtre.
La commande pen.pensize(3) définit l’épaisseur du trait à 3 pixels. Ensuite, pen.penup() lève le stylo pour éviter de tracer pendant le déplacement initial, et pen.goto(coords[0]) positionne la tortue au premier point de la liste de coordonnées. pen.pendown() abaisse le stylo pour commencer à dessiner.
La boucle for parcourt chaque point dans coords à partir du deuxième (indiqué par coords[1:]). À chaque itération, la tortue se déplace aux coordonnées (x, y) et trace une ligne entre chaque point, créant ainsi le contour extérieur de la fenêtre.
La commande pen.fillcolor(« #808080 ») change la couleur de remplissage en gris pour le contour de la fenêtre. Ensuite, pen.penup() lève le stylo pour éviter de tracer avant d’arriver au point de départ. pen.goto(coords[0]) positionne la tortue au premier point des coordonnées, et pen.pendown() abaisse le stylo pour commencer le remplissage de la fenêtre.
La commande pen.begin_fill() démarre le processus de remplissage. Tous les segments suivants seront remplis de gris jusqu’à ce qu’on appelle pen.end_fill()
Dans cette séquence, la tortue se déplace de point en point pour dessiner les différents segments de la fenêtre en utilisant des coordonnées spécifiques dans coords ainsi que des coordonnées explicites pour certaines parties de la fenêtre.
pen.goto(coords[1]), pen.goto(185, 202), et pen.goto(-82.5, 175) tracent le premier côté du contour intérieur de la fenêtre.
pen.goto(coords[16]), pen.goto(coords[15]), et pen.goto(-112, 173) dessinent le côté gauche de la fenêtre.
pen.goto(coords[8]), pen.goto(coords[9]), et pen.goto(coords[10]) tracent la partie inférieure.
pen.goto(coords[0]) ramène la tortue au point de départ, fermant ainsi la forme.
La fonction fenetre_gauche dessine une fenêtre colorée en rose (code hexadécimal #FF69B4) sur le côté gauche de la structure.
Nous commençons par définir la liste coords, qui contient les points (x, y) pour tracer les contours de la fenêtre. Ces coordonnées permettent de structurer la forme que la tortue va dessiner.
Ensuite, pen.pensize(3) définit l’épaisseur du trait à 3 pixels, et pen.fillcolor(« #FF69B4 ») fixe la couleur de remplissage en rose.
La tortue se rend au point de départ coords[8] sans tracer, puis abaisse le stylo pour commencer le remplissage.
La tortue se déplace vers plusieurs points pour créer une forme fermée
Cette séquence de déplacements trace les côtés de la fenêtre. pen.end_fill() termine le processus de remplissage en rose, créant ainsi une fenêtre complète.
Pour la fenêtre de droite, la fonction est exactement la même.Les seules différences sont les pen.goto(coords[.]) car les fenêtres ne sont pas superposées mais côte à côte.
On appel là toutes les fonctions pour dessiner le bâtiment.
La voiture
Pour terminer le visuel de l’image on dessine la voiture.
turtle.pensize(6)
def ligne(xa,ya,xb,yb):
turtle.penup()
turtle.goto(xa,ya)
turtle.pendown()
turtle.goto(xb,yb)
# faire une ellipse
def roue(x,y,rad):
turtle.color("black")
turtle.begin_fill()
turtle.penup()
turtle.goto(x,y)
turtle.pendown()
# inclinaison
turtle.seth(45)
# rad --> rayon de l'arc
for i in range(2):
# deux arcs de cercles
turtle.circle(rad,90) #côté grand
turtle.circle(rad//2.5,90) #côté petit, le diviseur est responsable de la perspective
turtle.end_fill()
def phares(x,y):
positions = [(x, y, "orange"), (x + 40, y + 5, "light cyan"), (x + 150, y + 20, "light cyan"), (x + 190, y + 25, "orange")]
for pos_x, pos_y, color in positions:
turtle.penup()
turtle.goto(pos_x, pos_y)
turtle.pendown()
turtle.dot(30, color)
def pc(x,y):
turtle.color("white smoke")
for i in range (7):
turtle.pensize(2)
ligne(x+40,y+abs((y/25))-(4*i)+5,x+150,y+abs((y/20))-(4*i)+15)
phares(x,y)
def voiture_v2():
#CÔTÉ
turtle.color("black","grey")
coord = [((-330,-200),(-310,-210)),((-310,-210),(-310,-223)),((-310,-223),(-265,-220)),((-265,-220),(-270,-233)),((-270,-233),(-35,-240)),((-35,-240),(100,-280)),((100,-280), (100,-388)),((100, -388),(-293,-365)),((-293,-365),(-330,-350)),((-330,-350),(-330,-200))]
turtle.begin_fill()
for start, end in coord:
turtle.penup()
turtle.goto(start)
turtle.pendown()
turtle.goto(end)
turtle.end_fill()
ligne(-35,-240,-35,-380)
#AILERON
turtle.color("black")
coord = [((-330,-200),(-250,-195)),((-250,-195),(-255,-206)),((-255,-206),(-310,-210)),((-310,-210),(-330,-200))]
turtle.begin_fill()
for start, end in coord:
turtle.penup()
turtle.goto(start)
turtle.pendown()
turtle.goto(end)
turtle.end_fill()
#HAUT
turtle.color("black","royal blue")
coord = [((-270,-233),(-220,-140)),((-220,-140),(-50,-150)),((-50,-150),(180,-130)),((180,-130),(250,-210)),((250,-210),(-35,-240)),((-35,-240),(-270,-233))]
turtle.begin_fill()
for start, end in coord:
turtle.penup()
turtle.goto(start)
turtle.pendown()
turtle.goto(end)
turtle.end_fill()
turtle.color("black")
coord = [((-220,-140),(-30,-127)),((-30,-127),(180,-130)),((180,-130),(-50,-150)),((-50,-150),(-220,-140))]
turtle.begin_fill()
for start, end in coord:
turtle.penup()
turtle.goto(start)
turtle.pendown()
turtle.goto(end)
turtle.end_fill()
ligne(-50,-150,-35,-240)
ligne(-210,-370,-190,-140)
#AVANT
roue(280,-380,57) #roue avant droite
turtle.color("black","dim gray")
coord = [((-35,-240),(-50,-210)),((-50,-210),(-83,-207)),((-83,-207),(-83,-223)),((-83,-223),(-59,-227)),((-59,-227),(-35,-240)),((-35,-240),(100,-280)),((100,-280),(100,-388)),((100,-388), (350,-355)),((350,-355),(350,-250)),((350,-250),(250,-210)),((250,-210),(-35,-240))]
turtle.begin_fill()
for start, end in coord:
turtle.penup()
turtle.goto(start)
turtle.pendown()
turtle.goto(end)
turtle.end_fill()
ligne(100,-280,350,-250)
voiture_v2()
roue(-250,-383,55) #roue arrière
roue(50,-410,65) #roue avant gauche
pc(130,-300)
Déclaration d’une fonction usuelle :
On définit d’abord de quelle épaisseur seront les traits pour construire la voiture avec turtle.pensize(), ici défini sur 6. On déclare ensuite une fonction ligne() avec en argument les coordonnées de deux points. Cette fonction va permettre le traçage de lignes en évitant d’utiliser la fonction turtle.forward(), trop imprécise, ou les quatre lignes habituelles en utilisant des turtle.goto(). Faisant gagner quelques lignes.
# faire une ellipse
def roue(x,y,rad):
turtle.color("black")
turtle.begin_fill()
turtle.penup()
turtle.goto(x,y)
turtle.pendown()
# inclinaison
turtle.seth(45)
# rad --> rayon de l'arc
for i in range(2):
# deux arcs de cercles
turtle.circle(rad,90) #côté grand
turtle.circle(rad//2.5,90) #côté petit, le diviseur est responsable de la perspective
turtle.end_fill()
Pour la génération de la voiture on va devoir générer 3 roues. Pour ce faire on déclare une fonction roue() avec en arguments les coordonnées et le rayon de la roue.
On souhaite la roue pleine on utilise donc les balises turtle.begin_fill()() et turtle.end_fill() qui vont déterminer le remplissage des roues. On lève le stylo pour ne plus dessiner et on va aux coordonnées demandés. La fonction turtle.seth() permet d’incliner le curseur.
La route est enfaite une ellipse, une ellipse, c’est simplement deux arc de cercles de mêmes rayons reliés par deux autres arc de cercles de rayon différents aux premiers mais communs entre eux. Pour réaliser cela on utilise la fonction turtle.circle() avec en arguments le rayon demander et 90 degrés qui correspond au traçage d’un quart de cercle. On va utiliser une nouvelle fois cette fonction mais cette fois-ci avec en arguments le rayon diviser par 2.5, et toujours 90 degrés. Ceci va permettre le traçage à la suite du premier arc de cercle un deuxième plus petit.
On met ceci dans une boucle à deux itération à l’aide de for i in range(2), et on obtient une ellipse
Pare-chocs avant :
def phares(x,y):
positions = [(x, y, "orange"), (x + 40, y + 5, "light cyan"), (x + 150, y + 20, "light cyan"), (x + 190, y + 25, "orange")]
for pos_x, pos_y, color in positions:
turtle.penup()
turtle.goto(pos_x, pos_y)
turtle.pendown()
turtle.dot(30, color)
def pc(x,y):
turtle.color("white smoke")
for i in range (7):
turtle.pensize(2)
ligne(x+40,y+abs((y/25))-(4*i)+5,x+150,y+abs((y/20))-(4*i)+15)
phares(x,y)
def phares(x,y):
positions = [(x, y, "orange"),
(x + 40, y + 5, "light cyan"),
(x + 150, y + 20, "light cyan"),
(x + 190, y + 25, "orange")]
for pos_x, pos_y, color in positions:
turtle.penup()
turtle.goto(pos_x, pos_y)
turtle.pendown()
turtle.dot(30, color)
Pour tracer les phares je déclare la fonction phares() avec comme arguments les coordonnées des phares.
On déclare en premier lieu les positions et couleur qu’auront les phares à l’aide d’une boucle for avec trois indices correspondants aux coordonnées en x et en y, et la couleur on parcours la liste « positions ». On lève le stylo, se déplace aux positions x et y correspondants à là où se trouvent les variables pos_x et pos_y qui parcourent la liste des coordonnées, on abaisse le stylo, utilise la fonction turtle.dot() avec en arguments une épaisseur de 30 et la couleur correspondante à là où se trouve la variable color qui parcoure la liste. La boucle for permet de mettre fin aux itérations lorsqu’on atteint la fin de la boucle.
def pc(x,y):
turtle.color("white smoke")
for i in range (7):
turtle.pensize(2)
ligne(x+40,y+abs((y/25))-(4*i)+5,x+150,y+abs((y/20))-(4*i)+15)
phares(x,y)
Le pare-chocs est composé des phares qu’on a défini juste avant et de 7 lignes qui relient les phares. On déclare donc une fonction pc() avec en argument les coordonnées où le dessin va se faire.
On défini premièrement la couleur sur « white smoke » et l’épaisseur du trait à 2.
On commence une boucle for avec comme indice i avec une range() de 7.
Pour tracer ces traits en gardant une perspective on appelle la fonction ligne(), déclarée en début de code, avec comme arguments les coordonnées des points inscrits en argument de pc(). Quant aux abscisses de points on se contente de garder les valeurs en argument de la fonction en ajouter un léger décalage. Par contre pour les coordonnées en ordonné on ajoute à l’ordonnée de départ une fraction de celle-ci, et de manière à ce que l’ordonné d’arrivé est plus haut pour créer une perspective. On ajoute ensuite 4*i, permettant d’espacer chaque traits à chaque itérations.
Suite à cette boucle on appelle la fonction phares() avec comme arguments les arguments de pc().
def voiture_v2():
#CÔTÉ
turtle.color("black","grey")
coord = [((-330,-200),(-310,-210)),((-310,-210),(-310,-223)),((-310,-223),(-265,-220)),((-265,-220),(-270,-233)),((-270,-233),(-35,-240)),((-35,-240),(100,-280)),((100,-280), (100,-388)),((100, -388),(-293,-365)),((-293,-365),(-330,-350)),((-330,-350),(-330,-200))]
turtle.begin_fill()
for start, end in coord:
turtle.penup()
turtle.goto(start)
turtle.pendown()
turtle.goto(end)
turtle.end_fill()
ligne(-35,-240,-35,-380)
#AILERON
turtle.color("black")
coord = [((-330,-200),(-250,-195)),((-250,-195),(-255,-206)),((-255,-206),(-310,-210)),((-310,-210),(-330,-200))]
turtle.begin_fill()
for start, end in coord:
turtle.penup()
turtle.goto(start)
turtle.pendown()
turtle.goto(end)
turtle.end_fill()
#HAUT
turtle.color("black","royal blue")
coord = [((-270,-233),(-220,-140)),((-220,-140),(-50,-150)),((-50,-150),(180,-130)),((180,-130),(250,-210)),((250,-210),(-35,-240)),((-35,-240),(-270,-233))]
turtle.begin_fill()
for start, end in coord:
turtle.penup()
turtle.goto(start)
turtle.pendown()
turtle.goto(end)
turtle.end_fill()
turtle.color("black")
coord = [((-220,-140),(-30,-127)),((-30,-127),(180,-130)),((180,-130),(-50,-150)),((-50,-150),(-220,-140))]
turtle.begin_fill()
for start, end in coord:
turtle.penup()
turtle.goto(start)
turtle.pendown()
turtle.goto(end)
turtle.end_fill()
ligne(-50,-150,-35,-240)
ligne(-210,-370,-190,-140)
#AVANT
roue(280,-380,57) #roue avant droite
turtle.color("black","dim gray")
coord = [((-35,-240),(-50,-210)),((-50,-210),(-83,-207)),((-83,-207),(-83,-223)),((-83,-223),(-59,-227)),((-59,-227),(-35,-240)),((-35,-240),(100,-280)),((100,-280),(100,-388)),((100,-388), (350,-355)),((350,-355),(350,-250)),((350,-250),(250,-210)),((250,-210),(-35,-240))]
turtle.begin_fill()
for start, end in coord:
turtle.penup()
turtle.goto(start)
turtle.pendown()
turtle.goto(end)
turtle.end_fill()
ligne(100,-280,350,-250)
Cette voiture est construite de plusieurs polygones le code en est de ce fait assez répétitif suivant toujours la même méthodologie :
On défini la couleur de contour et de remplissage du polygone avec la fonction turtle.color()
On déclare une liste de coordonnées des sommets de nos polygones
On débute le remplissage de nos polygones avec la fonction turtle.begin_fill()
On créer une boucle for() qui avec comme indices deux variables, start et end, qui parcourent la liste de coordonnées pour déterminer les deux points à relier
On relit les deux points à l’aide de turtle.goto() auxquels on met en argument les valeurs de start et end
On conclue avec turtle.end_fill(), pour finir le remplissage.
On note quelques moments où on ajoute des lignes supplémentaires :
Lorsque dans #CÔTÉ on ajoute une ligne pour définir la partie droite de la portière
Dans #HAUT on fait deux lignes, une qui relie le toit à ligne faite juste avant pour définir le par brise. Et une autre ligne définissant la partie gauche de la portière en reliant le toit au bas de la voiture.
Dans #AVANT une ligne définissant la partie haute du pare-chocs
Dans #AVANT on appelle la fonction roue() pour faire la roue gauche qui sera en partie cachée par la voiture
Appel des fonctions :
On appel toutes les fonctions ensembles
voiture_v2()
roue(-250,-383,55) #roue arrière
roue(50,-410,65) #roue avant gauche
pc(130,-300)
L’enregistrement de l’image :
# Enregistrement de l'image
image = turtle.getcanvas()
nom_du_fichier_sans_extension=titre+"_"+hex(random.randint(2**30+2**25,2**30+2**25+2**24-1))[2:]
image.postscript(file=nom_du_fichier_sans_extension+".ps", colormode='color')
try:
psimage = Image.open(nom_du_fichier_sans_extension+".ps")
psimage.load(scale=2)
psimage_resized = psimage.resize((1920, 1080))
psimage.save(nom_du_fichier_sans_extension+".png")
print(nom_du_fichier_sans_extension+".png", psimage.size, "sauvegardé dans le dossier")
except:
if not pillow_installed:
print("Oops! - ModuleNotFoundError: No module named 'PIL' - RTFM :")
print("https://nsi.xyz/py2png")
else:
print("Oops! - 'ghostscript' not installed- RTFM :")
print("https://nsi.xyz/py2png")
turtle.exitonclick()
turtle.done()
On récupère l’image, on lui assigne un nom aléatoire afin de ne pas écraser les autres et on l’enregistre automatiquement dans le fichier où se trouve le programme, au format png.
Image finale
Lors de l’enregistrement en png, on voit des traits qui apparaissent suite aux déplacements en goto() même si le stylo est en position penup().
Les calculatrices graphiques programmables sont bien plus que de simples outils pour les calculs. Elles ouvrent un monde de possibilités aux élèves, en permettant d’explorer les mathématiques d’une manière interactive et visuelle. Mais leur potentiel va au-delà des formules et des graphiques : elles peuvent être utilisées pour créer de l’art numérique, des animations, et même des jeux !
En programmant ces machines, les étudiants développent leur créativité tout en renforçant leurs compétences en logique et en résolution de problèmes. Ces calculatrices deviennent ainsi des alliées indispensables pour apprendre de manière ludique et innovante, et pour repousser les limites de l’imagination.
Depuis 2019, j’invite mes élèves à explorer leur potentiel créatif en réalisant des dessins uniques, soit avec l’application Grapheur, soit avec l’application Python de la calculatrice. Chaque année, leurs œuvres sont soumises à l’éditeur de la calculatrice, NumWorks, qui sélectionne la plus belle réalisation. L’auteur de cette création se voit offrir une coque au design original pour sa calculatrice. Si vous croisez un élève au lycée Louis Pasteur arborant une telle coque, il est fort probable qu’il soit lauréat de l’un de ces concours.
Certaines de ces réalisations sont également partagées sur les réseaux sociaux, notamment sur Instagram et X (anciennement Twitter). Une quinzaine de ces images ont même été sélectionnées et publiées, avec l’accord de leurs auteurs, dans un livre intitulé Découvrir la calculatrice graphique NumWorks édité en Français et en Anglais.
Il est vrai que se lancer dans la programmation sur une calculatrice graphique peut sembler déroutant au premier abord. Le défi de traduire des idées créatives en code peut déstabiliser, surtout pour ceux qui n’ont jamais exploré cet univers. Cependant, une fois les premières hésitations surmontées, les élèves découvrent rapidement le plaisir de voir leurs concepts prendre vie à l’écran. Ce processus, bien qu’exigeant, devient une source de satisfaction personnelle, les encourageant à se dépasser. En fin de compte, ils s’amusent tout en repoussant leurs propres limites, transformant un défi intimidant en une expérience enrichissante.
Tout à commencé en 2019 …
En 2019, après réflexion et concertation de l’équipe des enseignants de mathématiques, nous avons pris la décision collective de passer aux calculatrices NumWorks dans toutes nos classes. Pour familiariser les élèves avec cet outil, leur premier travail a été de réaliser un projet simple, destiné à leur faire découvrir les différentes fonctionnalités de la calculatrice. Sans attente particulière, j’ai été agréablement surpris par l’enthousiasme et la créativité dont ils ont fait preuve. Certaines productions, bien au-delà de ce que j’avais imaginé, ont révélé un potentiel insoupçonné chez les élèves, ouvrant la voie à des projets encore plus ambitieux par la suite.
Le titre du sujet était : Les mathématiques sont belles. Voici les 30 réalisations des élèves.
Certaines de ces images sont issues de scripts bien connus, adaptés et optimisés pour la NumWorks. Elles ont été réalisées à distance, en ligne, pendant le confinement de mars 2020. J’ai alors demandé à mes élèves de Terminale de constituer un jury pour évaluer ces créations, en insistant sur l’importance d’une bienveillance maximale dans leurs délibérations. Bien que les codes Python aient parfois été maladroits, ces erreurs faisaient partie intégrante du processus d’apprentissage. Se tromper, tâtonner, recommencer et s’améliorer sont autant d’étapes essentielles dans le développement de leurs compétences.
Quelques thread colorés publiés sur X (Twitter)
J’ai rejoint X (anciennement Twitter) durant le confinement, à l’origine pour passer le temps. Depuis, j’ai régulièrement partagé des threads mettant en avant les créations de mes élèves. En voici quelques exemples. (Un tableau à la fin de cet article propose davantage de liens.)
Le tableau ci-dessous récapitule tous les fils de discussion publiés sur X (anciennement Twitter). Malheureusement, depuis le rachat de Twitter par Elon Musk, il n’est plus possible de consulter ces fils sans posséder un compte sur la plateforme. Cette restriction illustre bien les défis liés à l’utilisation d’outils fermés, qui peuvent rapidement se transformer en véritables obstacles à l’accès à l’information. 🥴
A compter novembre 2024, compte tenu de la fermeture progressive de X, de l’abus des publicités et de la toxicité du réseau, les fils seront publiés sur Blue Sky. Les fils sur X existent toujours, en cliquant sur le T vous pouvez le lire sans compte sur X (Twitter)
Création (1er éd.)
Titre du travail à rendre Classe cible
Thread X (Twitter)
Blue Sky
2019 (2020)
Les mathématiques sont belles. Seconde, mathématiques
Enseignant de mathématiques et de spécialité NSI, Lycée Louis Pasteur d’Avignon.
Aime compter jusqu’à 666 mais s’arrête souvent à 42.
Auteur du livre Découvrir la calculatrice NumWorks.
Plongez dans des mondes visuels éblouissants créés à partir de simples équations mathématiques, les fractales. Découvrez des fractales emblématiques telles que Julia et Mandelbrot, personnalisez votre expérience avec des palettes de couleurs. Embarquez pour un voyage captivant au cœur de l’art mathématique !
Les prémices du projet
Tout débute durant mon année de seconde. En math, j’ai utilisé le script Mandelbrot initialement présent dans la calculatrice Numworks. Je me suis amusé à analyser le script et grâce à ça et à mon père, je suis tombé dans les fractales.
Ensuite, j’ai commencé la NSI en première et j’ai réalisé mon premier tutoriel sur ledit script. Et en fin d’année, j’ai modifié ce script afin de faire de plus belles couleurs.
Cette année, j’ai eu envie d’aller bien plus loin, l’idée vient du fait que pour réaliser de belles images de fractale, j’utilise des explorateurs de fractales trouvables facilement sur internet pour trouver des coordonnées intéressantes. Mais l’expression le dit bien, on n’est jamais mieux servi que par soi-même, et j’ai donc choisi pour mon dernier projet de lycée de faire mon propre explorateur de fractale.
Le début du projet
Je suis parti du script Julia que j’avais fait durant mon projet de fin d’année de première, vous pourrez retrouver l’explication du script ici (lien vers le tuto Julia palette). Ainsi, nous partons de ce script :
from kandinsky import*
def julia(N_iteration):
palette = []
xmax = 2
xmin = -2
ymax = 1.3875
ymin = -1.387
r = 255
g = 255
b = 255
for j in range(0,128):
b = 255 -2 * j
palette.append([r,g,b])
for j in range(128,256):
r = 255 -2 * (j-128)
g = 255 -2 * (j-128)
palette.append([r,g,b])
for x in range(320):
for y in range(222):
i = 0
z = complex(xmin+(xmax-xmin)*x/320+(ymax-(ymax-ymin)*y/222)*1J)
c = complex(0.36,0.36)
while i < N_iteration and abs(z) < 2:
i = i + 1
z = z*z+c
couleur = palette[int(255*i/N_iteration)]
col = color(couleur[0],couleur[1],couleur[2])
set_pixel(x,y,col)
La logique
I – optimisation
Pour faire mon explorateur, je veux générer une nouvelle fractale à chaque zoom, dézoome, déplacement, sur la droite, la gauche, le haut, le bas en modifiant les valeurs des coins de l’image. Mais si je suis cette logique, le script Julia pose déjà un problème. En effet, le script met des dizaines de secondes à fabriquer une seule image, vous conviendrez qu’un zoom en deux minutes, c’est un peu lent non ? Étrangement, un tutoriel a été écrit durant les vacances de Noël 2023 et bizarrement ce script présente exactement ce dont j’ai besoin ici.
Ainsi, j’ai un script qui me permet de générer des images en .png de fractale rapidement. Maintenant, j’ai remplacé la bibliothèque Kandinsky par Pillow et j’ai entièrement modifié les calculs de la fractale pour utiliser NumPy. Nous avons donc ce script :
from PIL import Image
import time
import tkinter as tk
from tkinter import PhotoImage
import keyboard
import numpy as np
global xmax, xmin, ymax, ymin, réso_x, réso_y
#valeurs de base
xmax = 2
xmin = -2
ymax = 1.3875
ymin = -1.387
réso_x = 30720
réso_y = 21312
def julia_PIL(N_iteration = 100):
palette = []
r = 255
g = 255
b = 255
for j in range(0, 128):
b = 255 - 2 * j
palette.append((r, g, b))
for j in range(128, 256):
r = 255 - 2 * (j - 128)
g = 255 - 2 * (j - 128)
palette.append((r, g, b))
palette = np.array(palette, dtype=np.uint8)
# Créer une grille de coordonnées complexes
x = np.linspace(xmin, xmax, réso_x)
y = np.linspace(ymin, ymax, réso_y)
X, Y = np.meshgrid(x, y)
Z = X + 1J * Y
# Initialiser une matrice d'indices pour la palette
indices_matrix = np.zeros((réso_y, réso_x), dtype=int)
for i in range(N_iteration):
print(i)
# Mettre à jour les pixels
mask = np.logical_and(i < N_iteration, np.abs(Z) < 2)
indices_matrix[mask] = np.round(255 * i / N_iteration).astype(int)
# Mettre à jour Z pour les pixels actifs
Z[mask] = Z[mask] ** 2 + complex(0.36, 0.36)
# Créer une image à partir de la matrice d'indices
img_array = palette[indices_matrix]
# Créer une image PIL à partir de l'array
img = Image.fromarray(img_array, 'RGB')
# Sauvegarder l'image
img.save('fractales_images/test.png')
II – Affichage de l’image
Pour afficher l’image, j’utilise la fonction Pillow mixé à Tkinter. Pillow génère une image en .png et l’enregistre dans un dossier et à chaque nouvelle génération la nouvelle image remplace l’ancienne.
Tkinter lui génère une fenêtre de la même résolution que l’image générée par Pillow. Ensuite, il va chercher dans le dossier cette image faite par Pillow et l’affiche dans la fenêtre précédemment créée.
def fractal_builder(N_iteration = 100,nom_img='Explorer_image/Image.png'):
"""
script de génération de la fractale
"""
# Créer une image à partir de la matrice des indices
img_array = palette[indices_matrix]
# Créer une image à partir de l'array
img = Image.fromarray(img_array, 'RGB')
# Sauvegarder l'image
img.save(nom_img)
def afficher_image():
img = PhotoImage(file=chemin_image)
# stocke l'image dans la variable img
canvas.create_image(0, 0, anchor=tk.NW, image=img)
#affiche l'image
III – déplacement et zoom
Afin de me déplacer et de zoomer, je vais utiliser la bibliothèque keyboard. Elle me permet de détecter quand j’appuie sur les touches de mon clavier. Je crée donc une fonction “explorer” qui s’occupe des déplacements et de leur logique. Je vais ainsi modifier les valeurs des coordonnées des coins de l’image que je prends de la fractale puis la générer avec ses nouvelles valeurs dans la fenêtre de Tkinter.
Au début du projet, ma volonté était qu’à la fin, j’ai réussi à faire un explorateur de fractaleS. Pouvoir explorer des fractales comme Julia et Mandelbrot que je maîtrise déjà et peut-être même d’autres.
Mais pour faire ça il faut que l’utilisateur puisse choisir dans un menu quelle fractale veut-il explorer et faire un menu, quand j’ai commencé le projet été pour moi le plus dur à réaliser.
Durant les vacances de février 2024 il nous a été demandé de faire un gestionnaire de base de données, d’ailleurs voici ce que j’ai réalisé (lien vers le projet). Mais quel rapport avec des fractales ? Eh bien le fait que ce projet utilise Tkinter pour réaliser un menu, exactement ce que cherche à faire et surtout, c’est simple ! (même si honnêtement, on ne dirait pas).
Parallèlement à ce projet de base de données, j’ai donc piqué des bouts de mon code pour le mettre dans mon explorateur et en seulement quelques minutes, j’ai un menu ! Il ne sert à rien et il est moche (et il le restera, je suis pas designer).
Faire une fenêtre avec Tkinter est plutôt simple à comprendre, on crée des variables qui vont être chaque élément de la page, texte, menu déroulant, champs pour écrire, etc. Pour les construire, Tkinter nous offre des fonctions comme Label() pour les textes, Entry() pour les champs d’écritures entre autres. Il ne nous reste qu’à trouver sur internet les paramètres à mettre à l’intérieur (comme text = “le texte que l’on veut afficher” pour un texte).
titre_acceuil = tk.Label(cadre_acceuil, text="Bienvenue sur cet explorateur de fractales", font=("Consolas", 20), bg="#C2C2C2", fg="black")
soustitre_acceuil = tk.Label(cadre_acceuil, text="Choisissez les paramètres de votre fractale", font=("Consolas", 15), bg="#C2C2C2", fg="black")
titre_acceuil.pack(pady=10)
soustitre_acceuil.place(x=130,y=50)
#création de la liste déroulante de choix des palettes
desc_liste_deroul_palette = tk.Label(cadre_acceuil, text="Choisissez la palette de couleur que vous voulez utiliser", font=("Consolas", 12), bg="#C2C2C2", fg="black")
desc_liste_deroul_palette.place(x=15,y=100)
liste_choix = ["Blanc - Jaune - Noir","Blanc - Noir"] # élément de la liste déroulante
variable_palette = tk.StringVar() # élément initial
variable_palette.set("Blanc - Noir")
liste_deroulante_palette = ttk.Combobox(cadre_acceuil, textvariable=variable_palette, values=liste_choix)
liste_deroulante_palette.place(x=15,y=125)
select = liste_deroulante_palette.get() # sélection de l'élément choisi dans la liste
#création de la liste déroulante de choix de la fractale
desc_liste_deroul_fractale = tk.Label(cadre_acceuil, text="Choisissez la fractale que vous voulez voir", font=("Consolas", 12), bg="#C2C2C2", fg="black")
desc_liste_deroul_fractale.place(x=15,y=145)
liste_choix = ["Julia","Mandelbrot"] # élément de la liste déroulante
variable_fractal = tk.StringVar() # élément intiaux
variable_fractal.set("Julia")
liste_deroulante_fractal = ttk.Combobox(cadre_acceuil, textvariable=variable_fractal, values=liste_choix)
liste_deroulante_fractal.place(x=15,y=170)
# création du champ de texte pour choisir la valeur de c
desc1_chmp_val_julia = tk.Label(cadre_acceuil, text="Si vous avez choisi de générer une fractale de Julia :", font=("Consolas", 12), bg="#C2C2C2", fg="black")
desc2_chmp_val_julia = tk.Label(cadre_acceuil, text="Choisissez la valeur de la constante c (où laisser par défaut), sachant c est un complexe", font=("Consolas", 10), bg="#C2C2C2", fg="black")
desc1_chmp_val_julia.place(x=15,y=195)
desc2_chmp_val_julia.place(x=25,y=220)
variable_r = tk.StringVar()
variable_r.set("0.36")
chmp_str_c_r_julia = tk.Entry(cadre_acceuil, textvariable=variable_r, font=("Helvetica",12), bg="#ffffff", fg="black", width=5)
chmp_str_c_r_julia.place(x=40,y=245)
variable_i = tk.StringVar()
variable_i.set("0.36")
chmp_str_c_i_julia = tk.Entry(cadre_acceuil, textvariable=variable_i, font=("Helvetica",12), bg="#ffffff", fg="black", width=5)
chmp_str_c_i_julia.place(x=100,y=245)
#création de la liste déroulante de choix de la résolution
desc_liste_deroul_resolution = tk.Label(cadre_acceuil, text="Choisissez la résolution de l'explorateurr", font=("Consolas", 12), bg="#C2C2C2", fg="black")
desc_liste_deroul_resolution.place(x=15,y=270)
liste_choix = ["320x222","480x333","720x555"]
variable_resolution = tk.StringVar()
variable_resolution.set("320x222")
liste_deroulante_resolution = ttk.Combobox(cadre_acceuil, textvariable=variable_resolution, values=liste_choix)
liste_deroulante_resolution.place(x=15,y=295)
V – Menu, faire devenir utile l’accueil
Maintenant qu’on a un superbe menu, rendons le utile. Pour cela, je crée des fonctions pour sélectionner la palette, la résolution, la fractale etc que j’affecte à une grande fonction start que j’affecte elle au bouton qui lance l’explorateur. Les fonctions de sélection récupèrent ce qui est écrit dans les champs de textes, menu déroulant pour pouvoir donner c’est paramètre à la fonction mère, start().
start (), elle initialise toutes les variables utiles à l’explorateur, supprime la fenêtre du menu, crée la fenêtre de l’explorateur, initialise l’explorateur avec la première image et lance les dernières fonctions nécessaires comme explorer().
def selection_reso(): # fonction de sélection de la résolution utilisée
global réso_x,réso_y
if liste_deroulante_resolution.get() == "320x222":
réso_x = 320
réso_y = 222
if liste_deroulante_resolution.get() == "480x333":
réso_x = 480
réso_y = 333
if liste_deroulante_resolution.get() == "720x555":
réso_x = 720
réso_y = 555
def selection_palette(): # fonction de sélection de la palette utilisée
global palette
palette = []
select = liste_deroulante_palette.get()
if select == "Blanc - Jaune - Noir":
r, g, b = 255, 255, 255
for j in range(0, 128):
b = 255 - 2 * j
palette.append((r, g, b))
for j in range(128, 256):
r = 255 - 2 * (j - 128)
g = 255 - 2 * (j - 128)
palette.append((r, g, b))
else :
palette = [[i,i,i] for i in range(255)]
def start(): # fonction de lancement de l'exploration
global img,chemin_image,canvas,choix_fract,compl_r,compl_i, réso_x, réso_y
selection_palette()
# sélèction de la fractale
if liste_deroulante_fractal.get() == "Julia":
choix_fract = 0
if liste_deroulante_fractal.get() == "Mandelbrot":
choix_fract = 1
selection_reso()
compl_r,compl_i = chmp_str_c_r_julia.get(),chmp_str_c_i_julia.get() # sélection des valeurs de c
fenetre.destroy() #supprime la fenêtre de l'accueil
cadre_acceuil_explo = tk.Tk() # crée la fenètre de l'explorateur
cadre_acceuil_explo.title("Affichage d'une Image")
chemin_image = "Explorer_image/Image.png"
# Charge l'image
img = PhotoImage(file=chemin_image)
# Crée un widget Canvas pour afficher l'image
canvas = tk.Canvas(cadre_acceuil_explo, width=réso_x, height=réso_y)
canvas.pack()
# initialisation de la 1ère fractale
fractal_builder()
afficher_image()
cadre_acceuil_explo.mainloop()
# création et placement du bouton de lancement de l'explorateur
bouton_start_explo = tk.Button(cadre_acceuil, text="Commencer l'exploration", font=("Consolas",15), bg="white", fg="black", command = start)
bouton_start_explo.place(x=230,y=495)
VI – Menu, prévisualisation
Actuellement, j’ai donc un menu qui me permet d’explorer 2 fractales différentes avec x palette différente et une infinité de fractales de Julia. Mais pendant que je joue avec mon script, je me rends compte que c’est lourd de devoir mettre les paramètres, lancer l’exploration, se rendre compte que ce n’est pas ce qu’on veut, donc on relance le script et ainsi de suite… Une idée me vient alors en tête : “pouvoir prévisualiser la fractale qu’on génère dans le menu, ce serait bien non ?” et voilà un nouvel objectif et pas des moindres, il me demande de mettre plusieurs variables en global pour y accéder, d’utiliser les fonctions de sélection, etc.
Pour réaliser cette fonction, on fait la même chose que la fonction start(). Mais cette fois, on ne supprime ni ne crée aucune fenêtre, on vient juste placer un canvas, l’image de la fractale que nous voulons prévisualiser au bon endroit avec les bons paramètres.
def previsu():
global palette, choix_fract,compl_r,compl_i, réso_x, réso_y
#sélèction des diffèrents paramètres
réso_x, réso_y = 240,167
selection_palette()
if liste_deroulante_fractal.get() == "Julia":
choix_fract = 0
if liste_deroulante_fractal.get() == "Mandelbrot":
choix_fract = 1
compl_r,compl_i = chmp_str_c_r_julia.get(),chmp_str_c_i_julia.get()
fractal_builder() # génération d'une fractale avec ces paramètres
prévi = PhotoImage(file="Explorer_image/Image.png") # récupération de l'image
# création du cardre et placement de l'image dans le cadre
label_image = tk.Label(cadre_acceuil, image=prévi)
label_image.place(x=245,y=310)
label_image.mainloop()
VII – Menu, tutoriel
La dernière barrière entre mon explorateur et l’utilisateur est ainsi ma logique. En effet, les touches que j’ai choisies pour mon explorateur ne sont sûrement pas les meilleures, donc je rajoute une nouvelle page à mon menu pour y écrire un petit guide des touches. Je profite de ça pour ajouter deux nouvelles fonctions. La première fonction récupère les coordonnées de la fractale qu’on voit pour les nerds. La seconde, plus complexe, prend des “screenshot” de ce qu’on voit dans l’explorateur. En réalité, elle génère une fractale avec les mêmes paramètres que celle que l’on voit dans l’explorateur, mais change son nom au moment de l’enregistrer.
#création du cadre de tutoriel dans la fenêtre de l'accueil
cadre_acceuil = tk.Frame(fenetre, bg="#C2C2C2",heigh = 555,width=720)
cadre_acceuil.pack_propagate(False)
cadre_tuto = tk.Frame(fenetre, bg="#C2C2C2",heigh = 555,width=720)
cadre_tuto.pack_propagate(False)
# création et placement du texte du tuto
titre_tuto = tk.Label(cadre_tuto, text="Guide des Touches", font=("Consolas", 20), bg="#C2C2C2", fg="black")
soustitre_tuto = tk.Label(cadre_tuto, text="Vous vous sentez un peu perdu ?", font=("Consolas", 15), bg="#C2C2C2", fg="black")
titre_tuto.pack()
soustitre_tuto.pack(pady=10)
texte_tuto = tk.Label(cadre_tuto, text="z - aller vers le haut \ns - aller vers le bas \nq - aller à droite \nd - aller à gauche \n\nflèche du haut - zoom avant \nflèche du bas - zoom arrière \n\nm - renvoie les coordonnées de \n où vous êtes dans la fractale \n\nc - sauvegarde un PNG de ce que \n vous voyez dans le dossier Explorer_image \n", font=("Consolas", 13), bg="#C2C2C2", fg="black")
texte_tuto.pack()
fin = tk.Label(cadre_tuto, text="Amusez-vous !", font=("Consolas", 15), bg="#C2C2C2", fg="black")
fin.pack(pady=20)
#nouvelles fonctions ajoutées à l'explorateur
def explorer(action):
global xmax, xmin, ymax, ymin,img,nbr_img
x = xmax - xmin
y = ymax - ymin
"""
différentes fonctions de déplacements
"""
elif keyboard.is_pressed('m'): # récupération de nos coordonnées (pour les nerds)
print("xmax = ",xmax)
print("xmin = ",xmin)
print("ymax = ",ymax)
print("ymin = ",ymin)
elif keyboard.is_pressed('c'): # prend un screenshot de la fractale
print("Image enregistrée !")
nbr_img +=1
fractal_builder(100,'Explorer_image/Image_saved'+str(nbr_img)+'.png')
afficher_image()
print(nbr_img)
Conclusion
En conclusion, ce projet ma permis d’utiliser la plupart de mes compétences. Il m’a suivi durant la moitié de mon année de terminale.
Galerie
Quelques exemples de fractale que vous pourrez à votre tour explorer :
Julia avec c = -1.476Julia avec c = -0.8 + 0.2iJulia avec c = -1.476
Script complet
Voici le script final en .7z, il vous suffit de l’extraire et vous pourrez directement commencer à explorer !
Pour notre premier projet en classe de 1ère NSI, nous nous sommes basées sur le thème d’halloween. Ici vous trouverez nos démarches pour créer cette image de style pop. Notre image est composée de quatre parties comportant chacune un fond et une citrouille de couleur différente.
Vidéo de présentation du projet :
Le projet :
Ce projet consiste à créer de l’art génératif grâce à un script python qui doit principalement utiliser des fonctions. Pour le réaliser, nous avons utilisé le module turtle pour tracer l’image et la fonction randint du module random pour pouvoir transformer notre image (.py) en png. Le thème de l’image générée était libre, elle pouvait même être abstraite !
Le processus de création :
Durant ce projet, nous sommes passées par plusieurs étapes pour concevoir l’image et répondre aux attendus.
Nous avons tout d’abord dû trouver une idée de l’image que l’on voulait créer. Pour cela, nous nous sommes inspirées de l’artiste américain Andy Warhol et de ses oeuvres comme « Shot Marilyns » et nous avons transposé son style dans le thème d’Halloween.
Après avoir dessiné un croquis à la main, nous avons créé le script d’une citrouille puis nous l’avons transformé en plusieurs fonctions pour pouvoir la reproduire en quatre exemplaires. Nous avons fait de même pour les rectangles.
Contrairement aux citrouilles et aux rectangles, nous avons tout de suite codé les lettres en tant que fonctions ce qui nous a permis d’aller plus vite dans la conception de l’image.
Enfin, nous avons dû organiser notre script rigoureusement pour que la tortue trace les éléments dans le bon ordre pour un rendu propre et travaillé.
Le code expliqué étape par étape :
Pour concevoir cette image, nous avons agi étape par étape. Nous avons donc relevé les différentes parties du code qui ont permis de tracer l’image. (Nous ne montrerons pas la mise en place des modules et comment nous avons généré des images automatiquement. Pour cela, vous pouvez vous rendre sur cet article.)
Le fond :
Tout d’abord, nous avons divisé l’écran en quatre parties égales et rectangulaires. Nous avons défini une fonction rectangle(x,y,color). Pour obtenir nos quatre parties distinctes, il suffit de mettre les coordonnées ainsi qu’une couleur en argument pour tracer les rectangles au bon endroit.
# trace les rectangles
def rectangle(x, y, color):
up()
goto(x, y)
down()
pencolor(color)
fillcolor(color)
begin_fill()
for i in range(2):
forward(640)
right(90)
forward(360)
right(90)
end_fill()
Nous appelons donc la fonction avec des coordonnées et des couleurs différentes pour tracer nos quatre rectangles.
Ensuite, nous avons créé des fonctions pour chaque lettre différente composant l’expression « HAPPY HALLOWEEN » soit une fonction pour les lettres h, a, p, y, l, o, w, e et n. La lettre « o » est spéciale car nous avons voulu la représenter par une citrouille pour rester dans le thème d’Halloween. Ici, nous vous montrerons les fonctions lettre_h(x,y), lettre_o(x,y) et lettre_e(x,y).
# trace la lettre h en majuscule
def lettre_h(x,y):
pensize(3)
color("black")
up()
goto(x,y)
setheading(90)
down()
forward(50)
backward(25)
right(90)
forward(25)
right(90)
forward(25)
backward(50)
# la lettre o est représentée par une citrouille
def lettre_o(x,y,f):
pensize(3)
color("black")
fillcolor(f)
up()
goto(x,y+25)
a = x
b = y
for i in range(2):
up()
goto(x, y)
down()
begin_fill()
circle(25)
end_fill()
x += 25 / (35 / 15)
y -= 25 / 14
a = x + 25 / 1.4
for i in range(2):
up()
goto(a, b)
down()
begin_fill()
circle(25)
end_fill()
a -= 25 / (35 / 15)
b -= 25 / 14
goto(a + 25 / 14, b)
begin_fill()
circle(25)
end_fill()
setheading(0)
up()
goto(a, b + 25 * 2 + 2)
down()
pencolor("black")
left(350)
for i in range(4):
left(40)
forward(25 / (35 / 15))
goto(a, b + 25 * 2 + 2)
# trace la lettre e en majuscule
def lettre_e(x,y):
pensize(3)
color("black")
up()
goto(x,y)
setheading(90)
down()
forward(50)
right(90)
forward(25)
backward(25)
left(90)
backward(25)
right(90)
forward(15)
backward(15)
left(90)
backward(25)
right(90)
forward(25)
Après avoir créé toutes ces fonctions, nous les appelons dans un ordre précis pour écrire « HAPPY HALLOWEEN » et nous utilisons des boucles for pour que l’expression soit répétée et forme un motif. Nous rajoutons également la fonction stamp() qui permet de laisser l’empreinte de la tortue à la fin de la lettre « N ».
h = 20
for i in range(4):
lettre_h(50,h)
lettre_a(80,h)
lettre_p(110,h)
lettre_p(140,h)
lettre_y(170,h)
lettre_h(230,h)
lettre_a(260,h)
lettre_l(290,h)
lettre_l(320,h)
lettre_o(370,h,"#C9BB32")
lettre_w(460,h)
lettre_e(510,h)
lettre_e(540,h)
lettre_n(570,h)
stamp()
h += 90
h = -340
for i in range(4):
lettre_h(50,h)
lettre_a(80,h)
lettre_p(110,h)
lettre_p(140,h)
lettre_y(170,h)
lettre_h(230,h)
lettre_a(260,h)
lettre_l(290,h)
lettre_l(320,h)
lettre_o(370,h,"#E1770C")
lettre_w(460,h)
lettre_e(510,h)
lettre_e(540,h)
lettre_n(570,h)
stamp()
h += 90
h = 20
for i in range(4):
lettre_h(-600,h)
lettre_a(-570,h)
lettre_p(-540,h)
lettre_p(-510,h)
lettre_y(-480,h)
lettre_h(-420,h)
lettre_a(-390,h)
lettre_l(-360,h)
lettre_l(-330,h)
lettre_o(-280,h,"#A8608E")
lettre_w(-190,h)
lettre_e(-140,h)
lettre_e(-110,h)
lettre_n(-80,h)
stamp()
h += 90
h = -340
for i in range(4):
lettre_h(-600,h)
lettre_a(-570,h)
lettre_p(-540,h)
lettre_p(-510,h)
lettre_y(-480,h)
lettre_h(-420,h)
lettre_a(-390,h)
lettre_l(-360,h)
lettre_l(-330,h)
lettre_o(-280,h,"#25AE80")
lettre_w(-190,h)
lettre_e(-140,h)
lettre_e(-110,h)
lettre_n(-80,h)
stamp()
h += 90
shape("turtle")
stamp()
Résultat :
Le corps de la citrouille :
Puis, nous avons défini la fonction corps_citrouille(x,y,pen,fi) pour dessiner le corps de la citrouille. Celle-ci prend en paramètre la couleur et les coordonnées du corps. Le corps est constitué de plusieurs cercles assemblés dans un ordre précis pour que le remplissage s’effectue correctement.
# trace le corps de la citrouille
def corps_citrouille(x,y,pen,fi):
pencolor(pen)
pensize(5)
fillcolor(fi)
a = x
b = y
for i in range(2):
up()
goto(x,y)
down()
begin_fill()
circle(70)
end_fill()
x += 30
y -= 5
a = x + 50
for i in range(2):
up()
goto(a,b)
down()
begin_fill()
circle(70)
end_fill()
a -= 30
b -= 5
goto(a + 5,b)
begin_fill()
circle(70)
end_fill()
Nous appelons cette fonction avec des coordonnées et des couleurs différentes pour créer nos quatre corps de citrouille.
De plus, nous avons conçu la tige à l’aide d’une autre fonction qui prend en compte les coordonnées et les couleurs de la tige. Pour la concevoir, nous avons d’abord tracé deux traits partant d’un même point puis nous les avons reliés pour effectuer le remplissage.
# trace la tige de la citrouille
def tige_citrouille(x,y,pn,fl):
setheading(0)
up()
goto(x,y)
down()
pencolor(pn)
fillcolor(fl)
begin_fill()
right(160)
for i in range(2):
left(110)
forward(30)
goto(x,y)
end_fill()
begin_fill()
right(20)
for i in range(35):
forward(1)
right(2)
end_fill()
Nous appelons ensuite cette fonction tige_citrouille(x,y,pn,fl) avec différentes coordonnées et couleurs pour bien positionner nos quatre tiges de citrouille.
Enfin, nous avons paramétré une fonction afin de lui créer un visage qui a pour arguments ses coordonnées. Le visage est composé de deux yeux qui sont des triangles, d’un nez qui est un triangle plus petit et d’une bouche également composée de formes géométriques.
# trace le visage de la citrouille
def visage(x,y):
setheading(0)
pensize(1)
up()
goto(x,y)
down()
pencolor("#000000")
fillcolor("#000000")
begin_fill()
# trace les deux yeux
for i in range(2):
up()
goto(x,y)
down()
for i in range(3):
forward(30)
left(120)
x += 70
end_fill()
# trace le nez
up()
goto(x - 100,y - 22)
down()
begin_fill()
for i in range(3):
forward(22)
left(120)
end_fill()
# trace la bouche
up()
goto(x - 120,y - 35)
down()
begin_fill()
l = 10
for i in range(2):
forward(l)
right(45)
forward(12)
left(90)
forward(12)
right(45)
l = 12
forward(15)
for i in range(90):
forward(0.5)
right(2)
for i in range(2):
right(45)
forward(12)
left(90)
forward(12)
right(45)
forward(12)
right(45)
forward(12)
left(90)
forward(12)
right(45)
for i in range(90):
forward(0.5)
right(2)
end_fill()
Nous devons donc appeler cette fonction visage(x,y) avec des coordonnées différentes pour aligner le visage sur le corps de chaque citrouille.
La première difficulté a été de trouver la distance entre les lettres pour former l’expression « HAPPY HALLOWEEN ». Au début, nous les avions espacées de 30 pixels puis nous nous sommes aperçues que certaines lettres se chevauchaient. Après de nombreuses tentatives, nous sommes arrivées au rendu recherché.
Une autre difficulté a été de tracer les cercles qui composent le corps de la citrouille dans le bon ordre pour que le remplissage s’effectue correctement. En ayant compris la logique du remplissage nous sommes finalement parvenues à trouver cet enchaînement.
Enfin, nous avons dû trouver les emplacements de tous les éléments qui composent la citrouille (le corps, la tige et le visage). Ce processus a été très long et a nécessité de nombreux essais mais nous y sommes arrivées !
Sources :
Pour écrire ce script, nous avons utilisé nos connaissances ainsi que le site python.org pour trouver de nouvelles commandes en python. Nous avons également regardé des projets de l’année dernière comme ceux qui sont dans la catégorie art.
Image finale :
Voici le rendu final de notre projet après avoir fait des tests, corrigé nos erreurs et pris du plaisir à coder !
Télécharger le script en .py :
Ne vous inquiétez pas, nous avons pensé à vous ! Vous pouvez télécharger le script ci-dessous pour vous amuser à le modifier ou tout simplement le montrer à vos amis !
L’art génératif est une fusion fascinante entre la créativité humaine et la puissance des algorithmes informatiques, nous vous invitons à plonger dans un univers où la machine devient artiste, créant des œuvres d’une beauté unique et imprévisible.
Notre Projet
Pour ce premier projet de NSI, nous avons décidé de représenter la ville de Riyad en python. Par conséquent, notre image rentre dans le thème de l’Architecture. Nous avons réalisé une ville assez moderne, avec des bâtiments de toutes formes et un soleil hors du commun, notre but étant de faire ressortir la ville luxueuse de Riyad, tout en apportant notre petite touche d’originalité. La vrais question étant comment nous sommes passé d’une simple idée à un résultat splendide ?
Les différentes étapes de la création de l’image
Pour être arrivé à notre résultat final, nous sommes passé par 4 étapes;
Tout d’abord voici le script python qui nous a permis d’obtenir un fond innovateur, les couleurs n’ont pas été choisi par hasard, en effet nous avons souhaité créer une ambiance qui évoque l’originalité sans oubliée le luxe notamment avec des arrondie et un dégradée de couleur reflétant l’étendue de la ville. Nous avons dans un premier temps définie la fonction disque pour dessiner un disque, rayon pour définir la taille des disques, x et y pour les coordonnées du centre et pour le dégradé de couleur nous avons fait appel a Background-color, enfin nous avons utilisé les fonctions arrondi_gauche et arrondi_droit pour dessiner des parties d’arcs.
def disque(rayon, x, y, couleur=(1, 1, 1)):
penup()
goto(x, y-rayon)
pendown()
pencolor(couleur)
fillcolor(couleur)
begin_fill()
circle(rayon)
end_fill()
x, y = (0,-250)
radius = (700)
color = ("#FA1D65")
disque(radius, x, y, color)
t
x, y = (0,-250)
radius = (600)
color = ("#F72367")
disque(radius, x, y, color)
x, y = (0,-250)
radius = (500)
color = ("#F02E6B")
disque(radius, x, y, color)
x, y = (0,-250)
radius = (400)
color = ("#EA3970")
disque(radius, x, y, color)
x, y = (0,-250)
radius = (300)
color = ("#E73F72")
disque(radius, x, y, color)
def arrondi_gauche():
for i in range(120):
left(1)
forward(5/40)
def arrondi_droit():
for i in range(100):
right(1)
forward(5/80)
Le fond est certes beau, mais nous n’avions toujours pas trouvée cette touche de beauté supplémentaire, c’est ce pourquoi nous avons rajouté des étoiles, nous avons utilisé un code python assez simple. Nous avons commencée par définir une nouvelle fonction étoile, puis nous avons placés 125 points grâce à la boucle for i in range ces points sont placés aléatoirement grâce à randint.
def etoile():
pensize(1)
pencolor("white")
for i in range(125):
penup()
x,y = randint(-700,700), randint(-0,700)
goto(x,y)
pendown()
circle(1)
Il est désormais temps de passer, au bâtiment, pour ce qui est des bâtiments nous avons voulus représenter des grattes ciel luxueux de différentes formes, pour ce faire nous avons créer des fonctions bat 1, bat 2 etc … nous avons ensuite définis leur largeur, longueur et hauteur jusqu’à que les bâtiments ressemble à la forme qui nous convenais et enfin nous les avons placés à des endroits différents.
Enfin, il manquait la structure la plus importe, le soleil pour, le soleil on a imaginé un soleil assez original, nous l’avons d’abord dessinée, puis nous l’avons ensuite codée en python, pour ce faire nous nous sommes aidés du concours NumWorks et nous avons utilisé une boucle avec un pas de 1 qui dessine le soleil avec les instructions de forme et de taille donnés.
from math import *
penup()
goto(0, 0)
pendown()
for r in range(20, 80, 1):
penup()
pensize(4 if r % 2 else 1)
for a in range(361):
d = r + 5 * cos(radians(12 * a))
x = d * cos(radians(a))
y = d * sin(radians(a))
goto(x, y)
pendown()
Image final
Les problèmes rencontrés
Il faut savoir que cette image n’est pas aussi facilement réalisable qu’elle ne le paraît, en effet nous avons rencontrés énormément d’obstacle à la création de cette image, notamment lorsque les bâtiments on été créer les tailles on été difficilement ajustable, nous avons dus rajouter plusieurs paramètres pour ajuster la taille des bâtiments ce qui nous a pris plusieurs heure. Nous avons également rencontrés de nombreux code d’erreur heureusement que toute les ressources étais à notre disposition, au final il suffisait de lire.
Notre ressentis sur ce premier projet
Nous avons beaucoup aimé ce premier projet, nous avons pris du plaisir à réaliser le projet, c’est une belle expérience et un coup de coeur, j’ai énormément appris en python pendant ses vacances et je trouve que ce qui est magique c’est d’apprendre en prenant du plaisir.
Art
