Notions de Programmation
Un programme c'est quoi ?
Un programme est une suite d'instructions écrite dans un langage. Ces instructions seront interprétées par une machine et exécutées.
Commençons par l'incontournable "Hello World".
Dans Processing, écrire la ligne de code :
print("Hello World")
 | Dans la console, il apparaît le fameux : Hello World et une fenêtre dont les dimensions sont par défaut de 100 x 100 pixels est apparue, c'est dans cette fenêtre que nous ferons afficher des figures |
l'instruction pour faire apparaître une fenêtre de 300 X 300 pixels est :
size(300,300)
Méthode : Repérage dans la fenêtre
Pour se repérer dans la fenêtre, on utilise des coordonnées |  |
Dans une fenêtre de 300 x 300 pixels, on fait afficher :
Une ligne entre deux points, avec l'instruction
line(paramètres), où les paramètres sont : Les coordonnées des deux points séparés par des virgules
# affichage d'une ligne entre les points de coordonnées (10,10) et (200,200)size(300,300)
line(10,10,200,200)
Remarque : le symbole # signifie que la ligne est un commentaire.
La couleur de la ligne est par défaut le noir, pour changer cette couleur, on utilise l'instruction : stroke(couleur), où couleur est la donnée d'une couleur en (r,g,b) ("red", " green" , "blue" ). C'est à dire un mélange entre du rouge, du vert et du bleu. Ces valeurs sont des nombres entiers variant entre 0 et 255
Par exemple :
le noir : (0,0,0)
Le blanc : (255,255,255)
Le rouge : (255,0,0)
etc...
Dans le menu "outil" vous avez un sélecteur de couleur.
# affichage d'une ligne rouge entre les points de coordonnées (10,10) et (200,200)size(300,300)
stroke(255,0,0)
line(10,10,200,200)
Remarque : Observer l'ordre des instructions (On choisit la couleur avant de dessiner la ligne)
On peut également modifier l'épaisseur de la ligne avec l'instruction : strokeWeight(paramètre), où' paramètre' est un nombre entier donnant l'épaisseur en pixel.
# affichage d'une ligne rouge d'épaisseur 4 pixels entre les points de coordonnées (10,10) et (200,200)size(300,300)
stroke(255,0,0)
strokeWeight(4)
line(10,10,200,200)
Une ellipse, avec l'instruction
ellipse(paramètres), où les paramètres sont : les coordonnées du centre et les diamètres (horizontal et vertical)
# affichage d'une ellipse à bord rouge d'épaisseur 4 pixels centrée au point ( 150,150) et de diamètres ( 50 ,100)size(300,300)
stroke(255,0,0)
strokeWeight(4)
ellipse(150,150,50,100)
Par défaut la couleur de remplissage est le blanc, on peut la changer avec l'instruction : fill(couleur)
# affichage d'une ellipse orange à bord rouge d'épaisseur 4 pixels centrée au point (150,150) et de diamètres ( 50 ,100)size(300,300)
stroke(255,0,0)
strokeWeight(4)
fill(245,151,49)
ellipse(150,150,50,100)
les instructions : noFill() et noStroke() permettent respectivement de supprimer la couleur de remplissage et le tracé des bords :
# affichage d'une ellipse orange sans bord centrée au point (150,150) et de diamètres ( 50 ,100)size(300,300)
noStroke()fill(245,151,49)
ellipse(150,150,50,100)
#affichage d'une seconde ellipse sans remplissage..stroke(255,0,0)
strokeWeight(3)
noFill()ellipse(150,80,40,40)
D'autres formes :
Le rectangle :
Un rectangle se dessine par quatre valeurs en faisant l'appel de : rect(x,y,largeur,hauteur) où (x,y) sont les coordonnées du coin supérieur gauche et (largeur, hauteur) sont les dimensions du rectangle.
Le triangle :
Le triangle est une figure constituée de trois points. L'invocation de : triangle(x1,y1,x2,y2,x3,y3) définit un triangle par les coordonnées de ses sommets :
L'arc :
Un arc ou section de cercle, peut se dessiner avec l'appel de arc(x, y, largeur, hauteur, début, fin), où la paire (x, y) définit le centre du cercle, la seconde paire ses dimensions et la troisième paire, le début et la fin de l'angle d'arc en radians
Le quadrilatère :
Le quadrilatère se construit en spécifiant quatre paires de coordonnées x et y sous la forme quad(x1,y1,x2,y2,x3,y3,x4,y4) dans le sens horaire :
Formes libres :
Plusieurs formes libres peuvent être dessinées par une succession de points en utilisant la suite d'instructions
beginShape()
vertex(x1,y1)
vertex(x2,y2)
...
endShape().
Chaque point se construit par ses coordonnées x et y.
Remarque : Comme dans tous les apprentissages et notamment en informatique, il faut apprendre à utiliser la documentation[1]... Dans l'onglet "Help" cliquer sur référence pour avoir accès par exemple à toutes les formes possibles. Vous y trouverez de nombreux exemples.
