Programmation créative Dessine avec Processing​.

Etape 1: Débuter avec processing

Avec l’éditeur en ligne Processing, tu peux commencer à coder immédiatement sans avoir besoin de télécharger de logiciel. C’est un excellent moyen de s’initier à la programmation, et tu peux créer des graphiques et des animations étonnantes avec seulement quelques lignes de code.

1. Aller sur l’éditeur en ligne Processing

Aller sur le site web

2. Utiliser l’éditeur en ligne Processing

Ta toile a une largeur de 500 pixels et une hauteur de 400 pixels.
La position (0;0) se trouve en haut à gauche de la toile.​

Exemple : pour dessiner un rectangle en haut à gauche, tu dois définir les coordonnées du rectangle à la position x=0 et y=0 (0;0).​​​ ​ ​ ​

3. Utiliser l’éditeur en ligne Processing

Dans la zone texte en bas à gauche, tu peux écrire ton code.
Dans notre exemple, nous avons écrit:​ rect(0,0,100,100); ​
rect(0,0,100,100); ​
Tu peux essayer en cliquant sur le bouton d’execution.​ ​

Étape 2: Dessiner un ballon

Voici l’algorithme que nous utiliserons :

Dessine un grand cercle.
Dessine un petit triangle sous le cercle avec la pointe qui touche le bas du cercle.
Dessine une ligne du milieu de la base du triangle jusqu’au bas de la page.

1. Dessine un grand cercle

Un cercle est une ellipse dont la largeur et l’hauteur sont égales.

Nous pouvons utiliser la fonction « ellipse »

Ecris: 

				
					 ellipse(250,150,200,200);

Cette instruction signifie

Dessine une ellipse
dont le centre se trouve sur les coordonnées X=250 et Y=150
dont la hauteur est 200 pixels
dont la hauteur est 200 pixels

2. Dessine un petit triangle sous le cercle dont le sommet touche le cercle

Pour dessiner un triangle, nous avons besoin de cette instruction

Si le centre du cercle est sur la position (250;150) et la hauteur est 200 pixels, le bas du cercle se trouve sur (250;250). (250;250) est donc la position de la pointe du triangle. ​​
​
Le code commence comme suit:
​
triangle (250,250,?,?,?,?);​​
​ ​Les deux autres points doivent se situer sur la gauche et sur la droite de la première pointe.
Remplace les « ? » avec les coordonnées des deux pointes.​ ​

Voici une solution

				
					triangle (250,250,240,260,260,260);

Mais il y en a d’autres

3. Dessine une ligne du milieu de la base du triangle jusqu’au bas de la page.

Pour dessiner une ligne, nous aurons besoin de la fonction line(x1, y1, x2, y2)

Le milieu de la base du triangle est (dans notre exemple) sur la coordonnée (250;260)​

Le code commence comme suit :
line (250,260,?,?);​
Le 2ème point doit avoir la même abscisse x et une coordonnée y plus basse.

Peux-tu compléter cette instruction ?

Ceci est une solution : 

				
					line(250,260,250,390);

Mais ce n’est pas la seule solution!

Etape 3: Essaie de coder d’autres dessins

Illustration of the fill function

Fill() function

Cette instruction remplit toutes les formes qui suivent avec la couleur sélectionnée. La couleur par défaut est le blanc.

				
					fill(92);//fills with shades of grey
ellipse(200,200,50,50);

fill(0, 128, 162);//fills with RGB colors
ellipse(150,150,50,50);

Stroke() function

Cette fonction dessinera la bordure de toutes les formes qui suivent avec la couleur sélectionnée. La couleur par défaut est le noir.

				
					stroke(92);//will draw the outline in grey
ellipse(100,100,90,90);

//will draw the outline in the selected RGB color
stroke(255, 20, 11);
ellipse(150,150,50,50);
Dog drawn in Processing 
				
					//draw the face
triangle(190,120,250,240,310,120);

//add the ears
triangle(340,125,295,190,295,105);
triangle(160,125,205,190,205,105);

//add the nose
ellipse(250, 248, 16, 16);

//draw the eyes
fill(0);//fill the following shapes in black
ellipse(230, 150, 12, 12);
ellipse(270, 152, 12, 12);
Ghost drawn in Processing 
				
					//draw the outline of the ghost
stroke(0); //draw the following shapes in black
ellipse(255, 150, 90, 80);
rect(210, 150, 90, 100);
triangle(210, 250, 240, 250, 225, 265);
triangle(240, 250, 270, 250, 255, 265);
triangle(270, 250, 300, 250, 285, 265);

//erase the undesired lines
stroke(255); //draw in white
line(211,150,299,150); //top line of the rectangle
line(211,250,299,250); //bottom line ot the rectangle
line(211,249,299,249); //top line of the triangles

// draw the eyes
stroke(0); //draw in black
ellipse(235, 150, 12, 12);
ellipse(275, 152, 12, 12);
Retourner aux tutoriels

Questionnaire

Bravo pour avoir terminé le tutoriel!

Nous serions ravis de connaître ton avis sur la façon dont nous pourrions l’améliorer.