Ajouter plusieurs sketchs dans une page (instance mode)

24/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.

Les différences avec la version flexbox :

Tous les sketchs sont actifs en même temps dans la page.
Le positionnement des sketchs est très limité sans CSS (grid, flexbox…).
Le code des différents sketchs se situe dans le même projet dans l’éditeur (dans la version flexbox, les codes sont dans des sketchs séparés).
Cet exemple est travaillé avec “instance mode” (The techniques demonstrated are useful for “namespacing” your sketch (so that there are no conflicts with other libraries or other global variables). It is also useful if you want to have more than one canvas on the same web page.)
Il est assez simple avec “instance mode” de dupliquer un sketch dans la page.

La page avec les 3 sketchs

Le code dans sketch.js

/*
Ref :

http://www.joemckaystudio.com/multisketches/

https://stackoverflow.com/questions/39970680/why-are-constants-not-defined-when-using-p5-js-in-instance-mode

https://github.com/processing/p5.js/wiki/Global-and-instance-mode

*/

// Sketch Un

var sketch1 = function(p) {

  p.setup = function() {
    p.createCanvas(400, 400);
  };

  p.draw = function() {
    p.background("#d8b9c3");
    p.fill("#363062");
    p.noStroke();
    p.rect(200, p.mouseY, 150, 150);
  };
  
};

var myp5 = new p5(sketch1, 'c1');





// Sketch Deux

var sketch2 = function(p) {

  p.setup = function() {
    p.createCanvas(400, 200);
  };

  p.draw = function() {
    p.background("#827397");
    p.fill("#4d4c7d");
    p.noStroke();
    p.ellipse(p.mouseX, 90, 90, 90);
  };
  
};

var myp5 = new p5(sketch2, 'c2');



// Sketch Trois

var sketch3 = function(p) {
  
  var x = 10; 
  var y = 40; 
  var speed = 3; 

  p.setup = function() {
    p.createCanvas(400, 80);
  };

  p.draw = function() {
    p.background("#844685");
    p.fill("#f3c623");
    p.noStroke();
    x += speed; 
    if(x > p.width){
      x = 0; 
    }
    p.ellipse(x,y,20,20);
  };
  
};

var myp5 = new p5(sketch3, 'c3');

Le code html

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />

</head>

<body>
  <script src="sketch.js"></script>

  <!-- placer les 3 sketchs avec les id -->
  <div id="c1"></div><!-- sketch1 -->
  <br><!-- retour à la ligne -->
  <div id="c2"></div><!-- sketch2 -->
  <br><!-- retour à la ligne -->
  <div id="c3"></div><!-- sketch3 -->

</body>

</html>