- Voir quelques exemples de creative coding et pratiques similaires
- Retour sur l'exercice donné à la séance précédente
- La fonction
random()(p5.js) - Les tableaux, ou "arrays" en anglais (JavaScript)
The Spite est un développeur web qui participe activement à l'amélioration de certains outils open source pour faire la 3D dans le navigateur (en WebGL).
https://twitter.com/thespite
https://www.clicktorelease.com/code/polygon-shredder/
(décommenter les parties du codes pour voir des effets supplémentaires)
let t; // variable qui sert de compteur (t pour time)
let x1, x2, x3, x4;
let y1, y2, y3, y4;
let rndmRange; // variable qui définie l'espace où les carrés apparaîssent
let rndmRedValue;
let rndmGreenValue;
let rndmBlueValue;
let diametreCercle;
let backgroundColor;
function setup() {
createCanvas(windowWidth * 0.9, windowHeight * 0.9);
noStroke();
t = 0;
x1 = random(0, width);
y1 = random(0, height);
// x2 = random(0, width);
// y2 = random(0, height);
// x3 = random(0, width);
// y3 = random(0, height);
// x4 = random(0, width);
// y4 = random(0, height);
rndmRange = random(30, 300);
rndmRedValue = random(0, 127);
rndmGreenValue = random(75, 200);
rndmBlueValue = random(127, 255);
diametreCercle = random(40, 170);
// // Le code ci-dessous utilise un tableau (ou array), cf. cours #3
// backgroundColor = [
// random(0, 40),
// random(30, 70),
// random(60, 100)
// ];
}
function draw() {
t += 0.01;
background(0, 50, 60);
// background(backgroundColor[0], backgroundColor[1], backgroundColor[2]);
let r = rndmRedValue;
let g = rndmGreenValue;
let b = rndmBlueValue;
fill(r, g, b);
x1 += random(-0.7 * t, 0.7 * t);
y1 += random(-0.7 * t, 0.7 * t);
ellipse(x1, y1, diametreCercle);
// ellipse(x2, y2, diametreCercle);
// ellipse(x3, y3, diametreCercle);
// ellipse(x4, y4, diametreCercle);
for (let i = 0; i < t * 2; i++) {
// fill(random(20 + i * 20), random(i * 5), random(i * 10));
let rndmRectX = random(width / 2 - rndmRange, width / 2 + rndmRange);
let rndmRectY = random(height / 2 - rndmRange, height / 2 + rndmRange);
rect(rndmRectX, rndmRectY, 25, 25);
}
}
La fonction random() de p5.js est très utile :
Elle permet de générer une nouvelle valeur aléatoire à chaque fois qu'elle s'execute.
En mettant deux arguments, on précise le minimum et le maximum de cette valeur aléatoire :
function setup() {
createCanvas(400, 400);
background(128);
let x = random(0, width); // donne une valeur aléatoire entre 0 et width
let y = random(0, height); // donne une valeur aléatoire entre 0 et height
ellipse(x, y, 50, 50);
}
// Dessine un cercle à une position aléatoire dans le canvas.
Un tableau (ou "array" en Anglais) est une collection de données. Il s'écrit grâce à des crochets [] .
On peut par exemple faire un tableau qui contient plusieurs variables :
// On déclare un tableau comme ci-dessous :
let monTableau = [5, 9, 15];
// Pour des questions de lisibilité, on peut très bien déclarer un tableau en le répartissant sur plusieurs lignes :
let monTableau = [
1.61803398875,
3.14159265359,
6.28318530718
];
// Si besoin, on peut déclarer un tableau vide et le remplir plus tard :
let monTableauARemplir = [];
Pour accéder à une valeur dans un tableau, on écrit le nom du tableau suivi de crochets où figure l'index de la valeur : monTableau[index]
L'index est le chiffre qui donne la "position" d'une valeur dans le tableau.
La première valeur est à l'index 0, la deuxième à l'index 1, ensuite 2, 3 etc.
On doit donc compter à partir de 0 (ce qui est souvent le cas en programmation).
// On déclare un tableau avec 2 variables à l'intérieur
let monTableau = [20, 40];
// Ensuite on peut accéder à ces variables comme ceci :
console.log( monTableau[0] ); // ici on affichera la première variable du tableau.
// Ici on ajoute 3 à la première valeur du tableau :
monTableau[0] += 3;
// On peut assigner directement une valeur dans le tableau comme ceci :
monTableau[2] = 60; // ici on assigne 60 à la troisième valeur du tableau
console.log( monTableau ) // ici on affiche le tableau entier : [23, 40, 60]
Il s'agit de quelque chose qu'on peut être amenés à faire très souvent quand on travaille avec une multitude d'objets auxquels on veut faire faire les même choses.
Pour parcourir un tableau avec une boucle for(), on utilise l'index qu'on incrémente à chaque itération de la boucle, comme ceci :
// On crée un tableau avec 4 variables
let monTableau = [10, 11, 12, 13];
// On utilise une boucle qui multiplie par 2 chaque élément du tableau
for (let i = 0 ; i < 4 ; i++) {
monTableau[i] *= 2;
}
console.log( monTableau ) // On obtient [20, 22, 24, 26]
On peut aussi créer un tableau directement avec une boucle :
// On doit d'abord créer un tableau vide :
let monTableau = [];
// On crée une variable qui précise la taille du tableau (facultatif)
let tailleDeMonTableau = 6;
// On utilise une boucle qui assigne une nouvelle valeur à chaque index
for (let i = 0 ; i < tailleDeMonTableau ; i++) {
monTableau[i] = i + 2;
}
console.log( monTableau ) // On obtient [2, 3, 4, 5, 6, 7]
- Déclarer un tableau vide (nommé par exemple
positionsX) en dehors des fonctionssetup()etdraw() - Déclarer une variable qui spécifie la taille du tableau (le nombre de valeurs qu'il y aura dans celui-ci)
- Dans la fonction
setup(), utiliser une bouclefor()et la fonctionrandom()pour assigner des valeur aléatoires (entre0etwidthpar exemple) à celui-ci - Dans la fonciton
draw(), utiliser une autre fonctionfor()pour dessiner des ellipses, en assignant chaque position x avec les valeurs du tableau précédemment créé