Créer et utiliser un quadrillage

ghmesnil   22 mars 2016   Commentaires fermés sur Créer et utiliser un quadrillage

Pour des jeux ou des animations utilisant des pions, on peut créer avec tkinter un terrain Canvas quadrillé où chaque cellule peut être modifiée en cours de programme.

Principe

Le terrain a une largeur de L pixels et une hauteur de H pixels. Chaque carreau sera un carré de a pixels de côté. Le quadrillage sera formé de P colonnes (numérotées de 0 à P-1) et de N lignes (numérotées de 0 à N-1) comme sur la figure ci-dessous.

L=P\times a et H=N\times a

carreau

Sur le Canvas, on définit donc un tableau de P colonnes et N lignes, appelé carreaux,  dont chaque case sera un carré.

carreau[i][j] est situé à l’intersection de la colonne i et de la ligne j. C’est un carré dont les sommets ont pour coordonnées (pixels) :

(i.a ; j.a),

((i+1).a ; j.a),

((i+1).a ; (j+1).a),

(i.a ; (j+1).a).

Pour créer un rectangle sur un Canvas, on utilise l’instruction create_rectangle (voir documentation).

Exemple

Dans l’exemple ci-dessous, le Canvas Terrain est un carré de 600 pixels de côtés. Il est quadrillé en 10 colonnes et 10 lignes. Chaque carreau fait donc 60 pixels de côté.

La fonction clic permet d’afficher dans le champ Coord les coordonnées (i; j ) du carreau sur lequel l’utilisateur a cliqué. (Ce programme ne marche pas en l’état, puisque la fonction clic n’est pas encore écrite).

Lignes d’affichage de la fenêtre tkinter

from tkinter import *

# fenêtre Tkinter
fenetre=Tk()

fenetre.title("Quadrillage")
Terrain=Canvas(fenetre,height=600,width=600)
Terrain.pack()
carreau=[[Terrain.create_rectangle(i*60,j*60,(i+1)*60,(j+1)*60,fill="#FFFFFF")
                                        for i in range(10)] for j in range(10)]

Terrain.bind('<ButtonRelease>',clic)

Coord=Label(fenetre)
Coord.pack(pady='10px')

fenetre.mainloop()

Comprendre les coordonnées d’un carreau à l’aide de la fonction clic

Cette fonction est lancée lorsque le programme réagit à un événement (qui est, en l’occurrence un clic de la souris sur le Canvas Terrain).  Elle doit donc avoir le paramètre event dans sa ligne de définition.

A l’aide de event.x et event.y, on récupère les coordonnées (en pixels) du bout de la flèche lorsque l’on clique avec la souris.

Si le carreau cliqué est à l’intersection de la ligne i et de la colonne j, alors, d’après la figure ci-dessous :

i.a\leq event.x<(i+1).a

j.a\leq event.y<(j+1).a

carreau2

Donc i et j sont les quotients des divisions euclidiennes de event.x et event.y par a.

La fonction clic s’écrit donc (ici a = 60) :

def clic(event):
 j=event.x//60
 i=event.y//60
 Coord['text']='Les coordonnées du carreau cliqué sont ('+str(i)+','+str(j)+')'

Utiliser le tableau carreaux avec la fonction aleatoire

La fonction ci-dessous, appelée aleatoire, choisit une ligne et une colonne au hasard et colorie le carreau correspondant à l’aide d’une couleur choisi aléatoirement dans la liste Couleurs.

La méthode after permet de relancer la fonction aleatoire (pour colorier un autre carreau) après 40 millisecondes.

from random import *

couleurs=['#677E52','#B9121B','#E70739','#F0F168','#8FCF3C',
    '#34396E','#FF5B2A','#6E81BD','#E0DC63', '#252545']

def aleatoire():
    # cette fonction change les couleurs des carreaux aléatoirement
    # sans intervention humaine
    i=randint(0,9)
    j=randint(0,9)
    Terrain.itemconfigure(carreau[i][j],fill=choice(couleurs))
    Terrain.after(40,aleatoire)

On n’oublie pas de créer un bouton dans la fenêtre tkinter pour lancer cette fonction :

# bouton pour lancer le coloriage aléatoire
Bouton=Button(fenetre,text='Mode aléatoire', command=aleatoire)
Bouton.pack(padx='20px',pady='10px')

Le résultat en vidéo