Dessiner des points [Processing]

Dessiner des points

Activité 1

Tapez dans l'éditeur de programme le code suivant

def setup():
    pass
def draw():
    pass
    

def setup():
    pass

def draw():
    pass

Puis exécutez-le à l'aide du bouton

Simulation : Résultat

Voici ce que vous devriez obtenir

Félicitations ! vous venez de réaliser votre premier programme graphique en Python. Bon... ce n'est pas extraordinaire non plus, pourtant la structure de base est déjà en place.

Complément : Quelques explications :

Nous avons 2 fonctions :

la fonction setup() qui sera exécutée une seule fois au "démarrage" du programme
la fonction draw() qui sera exécutée à chaque rafraîchissement de l'écran, soit en principe, autour de 60 fois par seconde.

Dans ces fonctions, nous ne mettons encore aucune instruction. Pour faire un bloc vide en Python, on utilise le mot réservé pass.

Pour l'instant, nous allons uniquement utiliser la fonction setup(). Nous reviendrons sur la fonction draw() quand nous nous intéresserons aux animations.

La fonction setup() est utilisée pour mettre en place le paramétrage initial de notre application. Typiquement, on y réglera la taille de notre fenêtre et la couleur du fond.

Activité 2 : paramétrer le canevas

La première instruction que nous allons voir, va nous permettre de créer une surface de dessin (canvas en anglais) :

size(800,600)

size(800,600)

permet de créer une surface où nous allons pouvoir dessiner de 800 pixels de large et de 600 pixels de haut.

Pour mettre une couleur de fond, nous utiliserons la fonction background(). Voici donc le programme complet tel qu'il doit être :

def setup():
    size(800,600)
    background(50,255,255)
def draw():
    pass
    

def setup():
    size(800,600)
    background(50,255,255)

def draw():
    pass

Simulation : Résultat

La fenêtre suivante, de taille 800x600 s'affiche à l'écran

Comme vous pouvez le constater, la fenêtre de dessin est bien présente.

Afin de bien distinguer la surface de dessin, nous mettrons (au moins dans un premier temps) la couleur de fond en blanc, ce qui correspond au triplet 255,255,255.

Complément : La gestion des couleurs

Que signifie le (50,255,255) de l'instruction background?

Chaque pixel (chaque point) est constitué de 3 éléments (appelé aussi canal): un rouge, un vert et un bleu. C'est la somme de ces 3 couleurs qui permet d'obtenir un grand nombre de couleurs (synthèse additive)

Classiquement, à chaque canal, on associe un nombre entre 0 et 255.

Pour chaque pixel, on aura donc une valeur pour le rouge (comprise entre 0 et 255), une valeur pour le vert (comprise entre 0 et 255) et une valeur pour le bleu (comprise entre 0 et 255). Quelques exemples : (0,0,0)=> noir ; (255,0,0)=> rouge ; (255,255,255)=> blanc ; (0,255,0)=> vert...

Toutes les combinaisons sont possibles, vous trouverez sur ce site un nuancier qui vous indiquera les valeurs des canaux Rouge, Vert et Bleu (RVB ou RGB en anglais).

Activité 3 : Dessiner un point

La fonction point() va nous permettre de dessiner un point (pixel) sur l'écran :

point(200,100)

point(200,100)

Que représente le "(200,100)" dans point (200,100) ? Tout simplement les coordonnées du point que nous voulons dessiner.

Qui dit coordonnées, dit axe x, axe y et origine O :

Affichez un point aux coordonnées (200,100) à l'écran, puis amusez-vous à modifier les coordonnées afin de vérifier l'orientation dex axes du repère. Vous remarquerez que l'axe des ordonnées (y) est orienté dans le sens contraire de celui utilisé en cours de mathématiques...

Exemple : A vous de jouer. Exercice 1 : la nuit étoilée

Dans cet exercice, vous allez devoir réaliser cette mage d'une nuit étoilée :

Voici quelques indications pour y parvenir :

la couleur de fond noire est obtenue à l'aide du nombre 0
pour dessiner en blanc, vous devrez indiquer la couleur du crayon au moyen de l'instruction stroke(255,255,255) (le 255,255,255 correspond à la couleur blanche comme nous avons vu précédemment).
Il y a 1000 points de dessinés à des emplacements aléatoires. Vous aurez probablement besoin d'utiliser une boucle pour
pour générer un nombre entier aléatoire, vous aurez besoin de l'instruction randint(). Celle-ci n'est pas intégrée à Python en standard, il faut donc l'importer au début du programme. Cela se fait en ajoutant en première ligne du programme

from random import randint

from random import randint

Ensuite, pour fabriquer un nombre aléatoire entre 1 et 500, utiliser l'instruction randint(1,500).

Vous êtes à présent armés pour réaliser cet exercice. A vous de jouer.

PS : si vous ne vous rappelez plus la syntaxe de la boucle pour, jetez un œil discret sur l'exemple de l'activité 4...

Activité 4 : la ligne bicolore

Recopiez et exécutez le programme suivant.

from random import randint
def setup():
    size(300,200)
    background(255,255,255)
    stroke(0,0,0)
    for i in range(300):
        point(i,100)
def draw():
    pass

from random import randint

def setup():
    size(300,200)
    background(255,255,255)
    stroke(0,0,0)
    for i in range(300):
        point(i,100)

def draw():
    pass

Simulation : Résultat

Vous devriez obtenir une ligne parcourant la fenêtre de gauche à droite comme ceci :

Complément : Explications :

Tout se passe encore dans la fonction setup(). Nous créons une fenêtre de taille 300x200 puis positionnons les couleurs de fond et du crayon (stroke).

Vient ensuite une boucle pour. La variable i prendra successivement les valeurs 0, 1, 2 etc... jusqu'à 299 (300 exclus). Nous traçons ensuite les pixels en positionnant l'abscisse sur la valeur variable i et l'ordonnée fixe à 100, c'est à dire la moitié de la hauteur.

Cela se traduit donc par le dessin d'une ligne horizontale.

Compliquons un peu ...

Nous souhaitons à présent changer la couleur de la ligne à mi parcours et dessiner en rouge. L'idée pour cela est de tester à quel moment la variable i atteint la moitié de la largeur c'est à dire 150. A ce moment précis, on bascule la couleur du crayon sur du rouge (255,0,0).

Insérez les deux lignes suivantes à l'intérieur de la boucle afin de réaliser cette opération. Vous ferez bien attention à respecter les décalages des blocs par rapport à la marge afin de ne pas provoquer d'erreur d'indentation.

if i==150:
    stroke(255,0,0)

if i==150:
    stroke(255,0,0)

Vous devriez obtenir à présent ceci :

Exemple : A vous de jouer. Exercice 2 : le drapeau tricolore

Écrivez un programme permettant d'obtenir un drapeau tricolore comme ci-dessous :

Les dimensions du drapeau seront de 300 pixels par 200 pixels.

Indication : on pourra utiliser deux boucles pour imbriquées : une permettant à la variable x de parcourir la largeur et une autre permettant à la variable y de parcourir la hauteur.