Code vide

• Télécharger p5js_statique_512x512.zip

Étapes

1. Trouver une fonction qui dessine une forme

/**
CODE VIDE QUI CREE UN CANEVAS DE 512x512 PIXELS.
*/

/**
DEBUT DE LA FONCTION setup()
QUI DETERMINE LE CODE A EXECUTER
AU DEMARRAGE
*/
function setup() {
        // CREER LE CANVAS
        createCanvas(512, 512);

        // CODE PERSONNALISE A EXECUTER AU DEMARRAGE :
        ellipse(256,256,100);

} // FIN DE LA FONCTION setup()

1. Remplacer les arguments de la fonction par des variables

/**
CODE VIDE QUI CREE UN CANEVAS DE 512x512 PIXELS.
*/

/**
DEBUT DE LA FONCTION setup()
QUI DETERMINE LE CODE A EXECUTER
AU DEMARRAGE
*/
function setup() {
        // CREER LE CANVAS
        createCanvas(512, 512);

        // CODE PERSONNALISE A EXECUTER AU DEMARRAGE :
        let x = 160;
        let y = 256;
        let d = 100;
        ellipse(x,y,d);

} // FIN DE LA FONCTION setup()

1. Créer une boucle avec une variable qui va déterminer le début et la fin. Par exemple:
   • un nombre d'itérations : for ( let i=0; i < 10 ; i=i+1 ) { ... }
   • une relation entre la position horizontale(x) et la taille du canevas: for ( let x = 0; x < width; x=x+5 ) { ... }
   • une relation entre le diamètre et la taille du canevas: for ( let d = width ; d > 0 ; d=d+5 ) { ... }
2. Contrôler les variables de la fonction de dessin avec la variable de la boucle
3. Explorer

/**
CODE VIDE QUI CREE UN CANEVAS DE 512x512 PIXELS.
*/

/**
DEBUT DE LA FONCTION setup()
QUI DETERMINE LE CODE A EXECUTER
AU DEMARRAGE
*/
function setup() {
        // CREER LE CANVAS
        createCanvas(512, 512);

        // CODE PERSONNALISE A EXECUTER AU DEMARRAGE :

        noFill();
        for ( let i = 0 ; i < 1000 ; i = i+1 ) {

                let x = 256;
                let y = 256;
                let d = 100 + i * 10;
                ellipse(x,y,d);

        }


} // FIN DE LA FONCTION setup()

/**
CODE VIDE QUI CREE UN CANEVAS DE 512x512 PIXELS.
*/

/**
DEBUT DE LA FONCTION setup()
QUI DETERMINE LE CODE A EXECUTER
AU DEMARRAGE
*/
function setup() {
        // CREER LE CANVAS
        createCanvas(512, 512);

        // CODE PERSONNALISE A EXECUTER AU DEMARRAGE :

        noFill();

        for ( let x = 0 ; x < width ; x = x+10 ) {
                let y = 256;
                let d = 100;

                ellipse(x,y,d);

        }


} // FIN DE LA FONCTION setup()

/**
CODE VIDE QUI CREE UN CANEVAS DE 512x512 PIXELS.
*/

/**
DEBUT DE LA FONCTION setup()
QUI DETERMINE LE CODE A EXECUTER
AU DEMARRAGE
*/
function setup() {
        // CREER LE CANVAS
        createCanvas(512, 512);

        // CODE PERSONNALISE A EXECUTER AU DEMARRAGE :

        noFill();

        for ( let d = width ; d > 0  ; d = d - 5) {
                let x = 256 ;
                let y = 256;


                ellipse(x,y,d);

        }


} // FIN DE LA FONCTION setup()