Mon intention est de créer un affichage qui fonctionne "seul" c'est à dire sans intéraction de l'ordre de clic ou autre type d'intéraction. Je crée un canvas qui prend la taille de la fenêtre du navigateur (largeur et hauteur) et donne le fond du canvas de couleur noir (code couleur 0). Mon code génère aléatoirement 10 positions en x et en y à l'intérieur du canvas. Pour chaque position, il génère aléatoirement un diamètre pour un cercle compris entre 50 et 100 pixels, ainsi qu'une couleur noire. Ensuite, il remplit chaque cercle avec la couleur noire préalablement définie, puis dessine chaque cercle à sa position respective. Et enfin, il définit également une couleur de contour en RVB avec des valeurs spécifiques bleu/vert (112, 255, 255), et de remplissage noir.

//sketch1 const s = (sketch) => { let animationActive = true; sketch.setup = () => { sketch.createCanvas(sketch.windowWidth, sketch.windowHeight); sketch.background(0); } sketch.draw = () => { if (animationActive) { // Vérif si l'anim est active let nombreE = 10; for (let i = 0; i < nombreE; i++) { let x = sketch.random(sketch.width); let y = sketch.random(sketch.height); let diametre = sketch.random(50, 100); let couleur = sketch.color(112, 255, 255); sketch.ellipse(x, y, diametre, diametre); sketch.fill(0); sketch.strokeWeight(3); sketch.stroke(112, 255, 255); } } } // Gestionnaire d'événement pour arrêter l'anim lorsque la souris est cliquée sketch.mouseClicked = () => { animationActive = !animationActive; // Inverse l'état de l'anim if (!animationActive) { sketch.clear(); // Efface le contenu du canvas si l'anima est off } } }; new p5(s, "s1");

Mon intention pour ce programme est de reprendre l'idée du premier sketch mais d'intégrer une intéraction de l'ordre du clic. C'est à dire qu'au clic sur le canvas, des cercles de différentes tailles vont apparaître aléatoirement sur le canvas. Dans un premier temps, je crée un canvas qui prend la taille de la fenêtre du navigateur (largeur et hauteur) et définit la couleur de fond du canvas à noir (code couleur 0). Mon code génère aléatoirement une position en x et en y à l'intérieur d'un espace défini par une largeur de 1920 pixels et une hauteur de 1080 pixels. Ce dernier génère également aléatoirement un diamètre pour un cercle compris entre 50 et 100 pixels. Si le bouton de la souris (ou le pad) est enfoncé (mouseIsPressed est vrai), alors le programme dessine un cercle noir à la position générée avec le diamètre spécifié. Enfin, il définit également une couleur de contour en RVB avec des valeurs spécifiques bleu/vert (112, 255, 255) et un remplissage noir.

//sketch2 const d = (sketch) => { sketch.setup = () => { sketch.createCanvas(sketch.windowWidth,sketch.windowHeight); sketch.background(0); } sketch.draw = () => { let width = 1920 let height = 1080 let x = sketch.random(width); let y = sketch.random(height); let diametre = sketch.random(50, 100); if (sketch.mouseIsPressed == true) { sketch.fill(0); sketch.ellipse(x, y, diametre, diametre); sketch.fill(0); sketch.strokeWeight(3); sketch.stroke(112, 255, 255); } }; }; new p5(d, "s2");

Mon intention pour ce programme est de créer une animation en 3D où un cercle est dessiné à une position fixe lorsque le bouton de la souris est enfoncé. Je crée un canvas en mode WEBGL, qui prend la taille de la fenêtre du navigateur, avec un fond noir. Ensuite le programme définit les variables x et y à 0 et génère aléatoirement un diamètre pour un cercle compris entre 50 et 300 pixels. Si le bouton de la souris est enfoncé (mouseIsPressed est vrai), le programme dessine un cercle noir en 3D à la position (0, 0, 0) avec le diamètre spécifié. Il définit également une couleur de contour en RVB avec des valeurs spécifiques bleu/vert (112, 255, 255) et un remplissage noir.

// sujet 3 const a = (sketch) => { sketch.setup = () => { sketch.createCanvas(sketch.windowWidth, sketch.windowHeight, sketch.WEBGL); sketch.background(0); } sketch.draw = () => { let x = 0; let y = 0; let diametre = sketch.random(50, 300); if (sketch.mouseIsPressed === true) { sketch.fill(0); sketch.ellipse(x, y, diametre, diametre); sketch.fill(0); sketch.strokeWeight(3); sketch.stroke(112, 255, 255); } } }; new p5(a, "s3");

Mon intention pour ce programme est de créer une animation en "3D" où un cercle est dessiné à une position fixe lorsque le bouton de la souris est enfoncé la fréquence (framerate) ralenti. Dans un premier temps, Je crée un canvas en mode WEBGL, qui prend la taille de la fenêtre du navigateur, avec un fond noir. Le programme initialise les variables x et y à 0 et génère aléatoirement un diamètre pour un cercle compris entre 50 et 300 pixels. Si le bouton de la souris est enfoncé (mouseIsPressed est vrai), le programme dessine un cercle noir en "3D" à la position (0, 0, 0) avec le diamètre spécifié. Ce dernier définit également une couleur de contour en RVB avec des valeurs spécifiques bleu/vert (112, 255, 255) et un remplissage noir.

//sujet 4 //sujet 4 const y = (sketch) => { sketch.setup = () => { sketch.createCanvas(sketch.windowWidth,sketch.windowHeight, sketch.WEBGL); sketch.background(0); } sketch.draw = () => { let x = 0; let y = 0; let diametre = sketch.random(50,300); if (sketch.mouseIsPressed === true) { sketch.frameRate(10); } else { sketch.frameRate(60); } sketch.fill(0); sketch.ellipse(x, y, diametre, diametre); sketch.fill(0); sketch.strokeWeight(3); sketch.stroke(112, 255, 255); } } let myp5 = new p5(y,"s4")

Mon intention pour ce programme crée une animation en "3D" où une ellipse est dessinée à une position fixe lorsque le bouton de la souris est enfoncé. Les dimensions de l'ellipse sont aléatoires à chaque framerate (=chaque répétition du code). Je crée un canvas en mode WEBGL, qui prend la taille de la fenêtre du navigateur, avec un fond noir. Le code initialise les variables x et y à 0 et génère aléatoirement deux diamètres pour un ellipse. Le premier diamètre est compris entre 5 et 900 pixels, tandis que le deuxième diamètre est compris entre 5 et 600 pixels. Si le bouton de la souris ou le pad est enfoncé (mouseIsPressed est vrai), le programme dessine une ellipse en 3D à la position (0, 0, 0) avec les diamètres spécifiés. Ce dernier définit également une couleur de contour en RVB avec des valeurs spécifiques bleu/vert (112, 255, 255), et un remplissage noir.

// sujet 5 const z = (sketch) => { sketch.setup = () => { sketch.createCanvas(sketch.windowWidth, sketch.windowHeight, sketch.WEBGL); sketch.background(0); } sketch.draw = () => { let x = 0; let y = 0; let diametre = sketch.random(5, 900); let diametre2 = sketch.random(5, 600); if (sketch.mouseIsPressed === true) { sketch.fill(0); sketch.ellipse(x, y, diametre, diametre2); sketch.fill(0); sketch.strokeWeight(3); sketch.stroke(112, 255, 255); } } }; new p5(z, "s5");