Étape 1: Les bases
Système de coordonnées :
Quand il s’agit de l’infographie, le système de coordonnées est un tantinet différent de notre habitude haute-école/Collège/repère cartésien (voir ci-dessus, première photo).
Ici, chaque unité est un pixel. Donc, si nous appeler une fonction dans le traitement comme ceci :
ellipse(100,200,30,50) ;
Cela signifie tout simplement ce qui suit : dessiner une ellipse qui est 100 pixels à partir de l’axe des abscisses, 200 pixels à partir de l’axe y, 30 pixels de large et a une hauteur de 50 pixels.
La première esquisse :
Imaginez le traitement comme une toile vide et vous invite à dessiner des trucs sur elle avec le code. En outre, traitement le rend très facile pour vous de dessiner des formes de base et les manipuler à la volée à l’aide d’un tas de fonctions intégrées utiles.
La structure de n’importe quel schéma de traitement sera celui ci-dessous :
void setup() {}
trucs qui s’exécute qu’une seule fois
}
{} void draw()
s’exécute dans une boucle infinie, sauf si vous arrêtez le programme.
}
Les deux fonctions ci-dessus contrôlent le flux de vos croquis. Simplement mis, toute fonction ou toute autre chose que vous voulez exécuter une seule fois au début du programme (par exemple, la taille et la couleur de votre toile, par exemple) va à l’intérieur du bloc setup(). Par conséquent, tout le reste va à l’intérieur du bloc draw(). Le bloc de code à l’intérieur de draw() se déroulera dans une boucle infinie. Nous allons voir pourquoi c’est utile par la suite, mais pour l’instant, nous allons dessiner un cercle à l’intérieur de la boucle de dessin, tout simplement parce qu’elle est appelée « dessiner » !
void setup() {}
Size(400,400) ; définit la taille du canevas
Background(255) ; définit la toile de fond
}
{} void draw()
ellipse (120,256,40,40); //draws une ellipse
}
Le résultat doit afficher une ellipse (voir supra, deuxième photo).
Comme prévu, un cercle apparaît droite où nous qu’il soit codé. Yay !
Notez les fonctions intégrées qui ont été mises en œuvre. Voici une liste composée d’un petit nombre d'entre eux (vérifier le traitement de référence pour en savoir plus) :
Dimensions (largeur, hauteur) - définit la toile selon les paramètres fournis.
background(color) - définit l’arrière-plan à la couleur spécifiée par l’utilisateur (interprétation sur plusieurs couleurs dans un peu).
fill(color) - définit la couleur pour les entités dans votre toile.
ellipse(x,y,width,height) - dessine une ellipse. X et y coordonnées sont celles du centre de l’ellipse par défaut.
rect(x,y,width,height) - dessine un rectangle. X et y coordonnées sont celle du coin gauche en haut du rectangle par défaut.
arc(x,y,width,height,start angle, end angle) - dessine un arc, qui ressemble au dessin d’une ellipse, à l’exception, ici, vous spécifiez sous quel angle l’ellipse commence et où elle se terminera.
* Note : tous les paramètres spacial les fonctions ci-dessus sont en pixels.
Nous allons utiliser ces fonctions pour dessiner quelque chose au hasard :
void setup() {}
Size(400,400) ;
Background(255) ; Smooth() ;
}
{} void draw()
noStroke() ;
Fill(140) ;
ellipse(190,256,40,40) ;
Fill(224,131,131) ;
Rect(width/2,height/2,40,90) ;
arc(190,200,90,90,0,radians(270)) ;
}
Voir les résultats ci-dessus (troisième image)
Il convient de noter que :
1. fill() background() prend un numéro, ou trois numéros différents et il se traduit par une couleur. Chacun de ces numéros ont une plage de 0 à 255. Si vous passez le long d’un numéro, vous obtiendrez des tons de gris, 0 étant complètement noir et 255 blanc. En revanche, si vous passez trois nombres, chacun représente la quantité de rouge, vert et bleu vous voulez mélanger pour obtenir la couleur souhaitée. Heureusement, si vous ne vous souvenez pas tout ce jargon, traitement dispose d’un outil de « Sélecteur de couleur », qui se trouve sous « Outils ».
2. Remarquez l’ordre du code. Le cercle gris apparaît tout d’abord parce que nous avons appelé la fonction ellipse() au sommet. Ensuite, le rectangle rose chevauche le cercle gris et puis vient l’arc. Bottom line : formes apparaîtront dans le même ordre que vous appelez les fonctions correspondantes dans le code.
3. la fonction radians() convertit un angle en degrés valeur radian, étant donné que la fonction arc() n’accepte pas les angles en degrés. Mais, pour nous, calcul des angles en degrés est essentiellement pratique.
4. la « largeur » et « height » sont les mots clés spéciaux qui renvoie la largeur et la hauteur de la toile. Ils sont très utiles, car ils font votre code adaptable à tout changement de taille de toile à l’avenir.
