P5.js Ressources Thématiques À Propos Rechercher

Ajouter plusieurs sketchs dans une page (flexbox)

23/3/2020 ☼ animation ☼ mouvement ☼ grille ☼ p5js

Niveau : ★★★☆☆

Voici l’exemple à étudier et à travailler avec l’éditeur en ligne de p5.js. Les commentaires dans le code permettent de suivre les différentes étapes.

Cet exercice est basé sur plusieurs points :

  1. En premier lieu il faut avoir conçu plusieurs sketchs avec l’éditeur en ligne de p5.js
  2. Il faut prendre en compte de la taille des sketchs (avec createCanvas(windowWidth, windowHeight);) car ceux-ci seront affichés de manière proportionnelle dans la grille en fonction de la taille des éléments de votre mise en page (ici des carrés)
  3. Le choix de la mise en page des sketchs dans la page. Dans cet exemple, j’ai choisi une grille de 3 x 3 (9 carrés) conçue avec CSS Flexbox
  4. Chaque carré est un sketch qui est intégré dans la page html et positionné avec CSS.

(Dans cet exemple je n’ai réalisé au final que 3 sketchs différents. J’ai donc répété chaque sketch trois fois)

Les 3 sketchs

Le code du sketch 1 :

let myFont;
function preload() {
  myFont = loadFont('SpaceGrotesk-Light.otf');
}

var xpos = 50;
var speed = 1;

function setup() {
  createCanvas(windowWidth, windowHeight);
  ellipseMode(CENTER);
  textAlign(CENTER, CENTER);
  noCursor();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function draw() {
  background('#f8fab8');
  stroke('#f8fab8');
  strokeWeight(8);
  ellipse(mouseX, mouseY, 170, 170);

  fill('#f76a8c');
  //noStroke();
  ellipse(xpos, height / 2, 50, 50);
  
  xpos = xpos + speed;

  if ((xpos > width - 50) || (xpos < 50)) {
    speed = speed * -1;
  }
  
  push();
  textSize(width/12);
  textFont(myFont);
  fill(0);
  noStroke();
  text('horizontal',mouseX, mouseY);
  pop();

   for (var x = 10; x < windowWidth; x = x+40){
        for (var y = 10; y < windowWidth; y = y+40){
            push();
            translate(x, y);            
            dessiner();
            pop();
        }   
    }   
}

function dessiner() {
    ellipse(10, 10, 1.1, 1.1);
}

Le code du sketch 2 :

let myFont;
function preload() {
  myFont = loadFont('SpaceGrotesk-Light.otf');
}

var xpos = 50;
var speed = 1.8;


function setup() {
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER, CENTER);
  noCursor();

}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}


function draw() {
  background('#f8fab8');
  strokeWeight(3);
  ellipseMode(CENTER);
  rectMode(CENTER);

  xpos = xpos + speed;

  if ((xpos > width - 50) || (xpos < 50)) {
    speed = speed * -1;
  }

  fill(204, 240, 225);
  noStroke();


  if (mouseIsPressed) {
    ellipse(height / 2, xpos, 50, 50);
  } else {
    rect(height / 2, xpos, 50, 50);
  }


  push();
  textSize(width/12);
  textFont(myFont);
  fill(0);
  noStroke();
  text('vertical',mouseX, mouseY);
  pop();


  for (var x = 10; x < windowWidth; x = x + 40) {
    for (var y = 10; y < windowWidth; y = y + 40) {
      push();
      translate(x, y);
      dessiner();
      pop();
    }
  }

}

function dessiner() {
  fill('#f76a8c');
  rect(10, 10, 5, 5);
}

Le code du sketch 3 :

let myFont;

function preload() {
  myFont = loadFont('SpaceGrotesk-Light.otf');
}

var xpos = 50;
var speed = 1;

function setup() {
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER, CENTER);
  noCursor();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function draw() {
  background('#f8fab8');
  strokeWeight(3);
  ellipseMode(CENTER);

  for (var x = 10; x < windowWidth; x = x + 40) {
    for (var y = 10; y < windowWidth; y = y + 40) {
      push();
      translate(x, y);
      dessiner();
      pop();
    }
  }

  if ((xpos > width - 50) || (xpos < 50)) {
    speed = speed * -1;
  }

  fill('#f8dc88');
  noStroke();
  ellipse(xpos, xpos, 80, 80);

  if (mouseIsPressed) {
    xpos = xpos + speed;
  } else {
    speed = speed * -1;
  }

  push();
  textSize(width / 12);
  textFont(myFont);
  fill(0);
  noStroke();
  text('diagonal', mouseX, mouseY);
  pop();
}

function dessiner() {
  fill(204, 240, 225);
  ellipse(10, 10, 30, 30);
}

L’assemblage dans la page (chaque sketch est répété 3 fois)

See the Pen Grille de sketchs p5.js by Nicolas Tilly (@nicolastilly) on CodePen.

Le code HTML

Chaque sketch possède un code d’intégration. Il se trouve ici dans l’éditeur p5.js :

Ensuite, j’ai utilisé Flexbox pour réaliser la grille. Il existe cependant plusieurs solutions pour faire vos grilles : flexbox, CSS grid, la grille responsive…

<!-- Ensemble des blocs par ligne de 3 blocs -->
<div class="conteneur-flexbox">

    <!-- 1ère ligne de 3 blocs. Les codes d'intégration sont à ajouter ici -->
  <div class="box"><iframe src="https://editor.p5js.org/NicolasTilly/embed/Bo55Hq-Q"></iframe></div>
  <div class="box"><iframe src="https://editor.p5js.org/NicolasTilly/embed/QXjJSe-x"></iframe></div>
  <div class="box"><iframe src="https://editor.p5js.org/NicolasTilly/embed/JYxADIEW"></iframe></div>
    
</div>

    <!-- 2eme ligne de 3 blocs. Les codes d'intégration sont à ajouter ici -->
<div class="conteneur-flexbox2">
    
  <div class="box"><iframe src="https://editor.p5js.org/NicolasTilly/embed/QXjJSe-x"></iframe></div>
    <div class="box"><iframe src="https://editor.p5js.org/NicolasTilly/embed/JYxADIEW"></iframe></div>
  <div class="box"><iframe src="https://editor.p5js.org/NicolasTilly/embed/Bo55Hq-Q"></iframe></div>
    
</div>

    <!-- 3eme ligne de 3 blocs. Les codes d'intégration sont à ajouter ici -->
<div class="conteneur-flexbox3">
    
  <div class="box"><iframe src="https://editor.p5js.org/NicolasTilly/embed/QXjJSe-x"></iframe></div>
  <div class="box"><iframe src="https://editor.p5js.org/NicolasTilly/embed/Bo55Hq-Q"></iframe></div>
  <div class="box"><iframe src="https://editor.p5js.org/NicolasTilly/embed/JYxADIEW"></iframe></div>
    
</div>

Le code CSS

html, body {
  padding: 0;
  margin: 0;
    background-color: #ccf0e1;
}

.conteneur-flexbox {
  max-width: 630px;
  margin: 100px auto 0 auto;
  padding: 0px 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.conteneur-flexbox2 {
  max-width: 630px;
    height: 220px;
  margin: 0px auto 0 auto;
  padding: 0 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.conteneur-flexbox3 {
  max-width: 630px;
  margin: 0px auto 0 auto;
  padding: 0 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.box {
  width: 200px;
  height: 200px;
}

iframe {
    width: 100%;
    height: 100%;
  border: none;
}

Il vous faut donc maintenant décider du type de mise en page que vous voulez mettre en place. Pour cela, je vous invite à vous familiariser avec flexbox :

Voici un lien vers un guide complet pour utiliser flexbox
Mises en page Flexbox via le site jenseign.com