P5JS
Il existe plusieurs différentes libraries en JavaScript. P5JS est une super librairie pour commencer à apprendre!
Commencer !
Il existe plusieurs différentes libraries en JavaScript. P5JS est une super librairie pour commencer à apprendre!
Commencer !Avant de t'attaquer à ce défi, on te conseille de compléter les défis suivants:
La ligne de code que tu as vue dans la description du projet n'est pas du JavaScript, c'est probablement pour cela que tu ne l'a pas du tout reconnu. Regardons la de plus près:
10 PRINT CHR$(205.5+RND(1)); : GOTO 10
Elle a l'air bizarre non? Cela ne ressemble pas du tout au JavaScript... En effet, c'est en un language appellé BASIC, developpé pour tourner sur les ordinateurs Commodore 64... EN 1964!
Donc pas de problèmes, c'est totalement normal que tu n'aies jamais entendu parler de ce language et donc que tu ne le reconnaisse pas! Examinons maintenant ce qu'il fait:
Le 10 au début indique simplement le numéro de ligne. Cette ligne est donc la 10e ligne du code. Pourquoi est-ce qu'on n'a pas simplement mis un 1? En Basic, il est très compliqué de changer une ligne une fois écrite. Il est donc courant de mettre des multiples de 10 comme numéro de lignes où cas où il fait changer quelque chose entre 2 lignes.
Observe comment la fin du code est GOTO 10. La fin de la ligne nous dit donc de retourner à la ligne 10, qui est celle qu'on regarde en ce moment. Donc le code va boucler infiniement.
Le mot PRINT ne devrait pas être trop compliqué, il dit à l'ordinateur d'imprimer quelque chose. C'est un peu comme un console.log() en JavaScript.
Finalement, on a cette expression bizarre au milieu de la ligne: CHR$(205.5+RND(1)). Je ne vais pas expliquer pourquoi cette ligne fonctionne, mais sache qu'elle va imprimer soit un "/" soit un "\" de façon aléatoire.
Notre code va donc en fait juste imprimer plein de "/" et de "\" à la suite l'un de l'autre, pour créer un pattern comme celui que tu peux observer tout en haut de cette page.
Va jetter un coup d'oeil à cette vidéo. Tu verra le code en action!
Cela a l'air joli non? Bien que le Basic est sûrement un language très intéressant, on ne va pas coder ce projet en Basic. On va plutôt le coder en P5.JS, et le customiser à fond! Tu peux voir mon projet ici
Pour commencer, il nous faut savoir comment dessiner des "/" et des "\" en P5.JS. On ne va pas utiliser l'option text(), comme c'est très peu stylisable. On va dessiner les barres par nous même!
Pour dessiner des lignes, la fonction line() existe! De quels paramètres auras-tu besoin pour dessiner un "\"? Et pour un "/"?
line(0, 0, 10, 10);
Imaginons qu'on veuille dessiner plein de "\". On sait comment en dessiner 1, c'est déjà pas mal. On veut créer une animation comme dans la vidéo du code effectué en Basic. Pour faire cela, on va dessiner notre arrière-plan dans la fonction setup(). C'est un peu bizarre comme on le dessine normalement dans la fonction draw(), mais il y a bien une raison. En effet, si on dessine l'arrière-plan dans la fonction draw(), on doit tout re-dessiner à chaque fois comme on recouvrira tout avec l'arrière-plan. Si on dessine l'arrière-plan qu'un fois, on peut simplement rajouter un "\" à chaque étape!
On aimerait alors avoir une variable qui garde en quelle position on vient de dessiner un "\" pour pouvoir en dessiner un ailleurs après. Commençons par créer une variable positionX. Attention, comme cette variable doit être globale, soit sûr de la définer en dehors des fonctions.
let positionX = 0;
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
// Dessiner plein de "\"
}
Comment cas-tu changer ton code pour dessiner un "\" maintenant? Tu dois utiliser la nouvelle variable 2 fois!
line(positionX, 0, positionX + 10, 10);
Tu as surement remarqué que pour le moment on ne dessine toujours qu'un seul "\". Et tu as bien raison! Il nous faut chnager la variable variableX avec le temps pour faire "bouger" le "\". Pour faire changer cette variable, à la fin de la fonction draw() tu peux simplement faire
function draw() {
// Dessiner un "\"
positionX = positionX + 10;
}
Tu vas maintenant voir plein de "\" se dessiner l'un à la suite de l'autre. Mais lorsque la ligne est finie, le code ne passe pas à la ligne suivant, mais il continue en dehors de l'écran. As-tu une idée comment le faire passer à la ligne?
Bien vu! Pour passer à la ligne on doit introduire une variable positionY aussi. Crée la avec la première variable et re-écris le code pour dessiner la ligne en utilisant cette nouvelle variable. De nouveau, tu dois l'utilise 2 fois!
line(positionX, positionY, positionX + 10, positionY + 10);
Ici, on ne doit pas simplement augementer la variable à chaque tour. En effet, on doit augementer la positionY lorsqu'on dépasse de l'écran. Comment coderais-tu cela?
if( XXX ) {
// ...
}
Plutôt que le XXX, indique la condition pour passer à la ligne.
if( positionX > width ) {
positionX = 0;
positionY = positionY + 10;
}
Tu as maitnenant, si tout va bien, une jolie animation qui dessine plein de lignes! Bien joué!
On aimerait maintenant que l'ordinateur choissise aléatoirement entre un "\" et un "/"... Pour commencer, comment changerais tu ton code pour qu'il dessine des "/"?
En effet, il suffit de changer l'ordre de quelques paramètres dans la fonction line():
line(positionX + 10, positionY, positionX, positionY + 10);
Essaie de mettre les deux codes line() l'un après l'autre. Tu devrais voir les deux se dessiner normalement, et donc des croix apparaître. Super! On veut maintenant en dessiner qu'un seul de façon aléatoire!
Pour faire quelque chose avec une probabilité 1/2, c'est à dire que les deux actions ont autant de chance de se passer (Comme un lancer de pièce), on peut utiliser le code suivant:
if( random(1) > 0.5 ) {
// Action 1
} else {
// Action 2
}
La raison pour laquelle cela marche: random(1) va donner un nombre (à virgules) aléatoire entre 0 et 1. Il y a autant de nombres entre 0 et 0.5 qu'entre 0.5 et 1 (Comme 0.5-0=1-0.5), et donc random(1) > 0.5 va arriver la moitié du temps.
Essaie d'implementer ceci dans ton code! Tes deux actions sont les deux lignes que tu peux dessiner!
if( random(1) > 0.5 ) {
line( positionX, positionY, positionX + 10, positionY + 10);
} else {
line( positionX + 10, positionY, positionX, positionY + 10);
}
T'as vu comment c'est joli?? On a réussi à reproduire le code qui tenait en une ligne sur le Commodore 64!
Tu trouves peut-être que les traîts sont trop petits? C'est facile à résoudre! Je te conseille de créer une variable globale qui stocke la taille des traîts, comme cela c'est facile à la changer. Tu dois alors bien sûr te souvenir de changer tous les 10 dans ton code par cette variable. Par exemple
line( positionX, positionY, positionX + taille, positionY + taille);
Ensuite on pourrait changer la couleur des traîts. Pour ce faire, rajoute simplement un stroke() avec la couleur de ton choix au début de la function setup(). La function stroke() colorie les traîts, comme la function fill() colorie des objets.
stroke("green");
On peut aussi changer l'épaisseur de nos traîts. Pour ce faire, on utilise la function strokeWeight(10). De nouveau, le 10 est à titre indicatif!
Ce serait cool d'avoir une couleur qui change entre chaque traît de façon aléatoire non? Cela permet de donner des designs supers! Comme tu le sais peut-être, une façon de coder une couleur est avec la forme RGB. Par exemple, pour coder un stroke("green"), on peut aussi faire
stroke(0, 255, 0);
Les 3 paramètres de la function stroke() sont les niveaux de Rouge, Vert et de Bleu (Red Green Blue, d'où RGB). Le maximum est de 255. Pour faire un couleur aléatoire il suffit d'utiliser 3 fois la fonction random(). As-tu une idée de comment faire?
stroke( random(255), random(255), random(255) );
Utilisant une technique très similaire, tu peux donner une épaisseur aléatoire à ta ligne aussi!
Il est maintenant à ton tour d'être créatif! Tu peux changer les lignes par des carrés ou des rectangles ou des smileys! Tu peux faire exactement ce qui te plaît, sois créatif! Voici un exemple de ce que tu peux faire, mais sens toi libre de t'orienter vers ta propre idée!
