Markdown multiple P5 canvasses¶

Setup¶

Voer de extra javascript stap uit op P5js pagina als je dat nog niet had gedaan voor eerdere pagina’s.

Deze oplossing maakt gebruik van instance mode van p5js. Dit vereist wat geavanceerd begrip van javascript en closures.

Javascript¶

Maak 2 javascript bestanden canvas1.js en canvas2.js met elk een sketch.

const s1 = ( sketch ) => {

    let x = 100;
    let y = 100;

    sketch.setup = () => {
      sketch.createCanvas(200, 200);
      console.log("test");
    };

    sketch.draw = () => {
      sketch.background(0);
      sketch.fill(0, 0, 255);
      sketch.rect(x,y,50,50);
    };
  };

let canvas1 = new p5(s1, 'canvas1');

const s2 = ( sketch ) => {

    let x = 100;
    let y = 100;

    sketch.setup = () => {
        sketch.createCanvas(200, 200);
        console.log('test 2')
    };

    sketch.draw = () => {
        sketch.background(0);
        sketch.fill(255, 255, 0);
        sketch.rect(x,y,50,50);
    };
};

let canvas2 = new p5(s2, 'canvas2');

Markdown¶

| <div id="canvas1"><script defer src="../canvas1.js"></script></div> | <div id="canvas2"><script defer src="../canvas2.js"></script></div> |
|-|-|
|Canvas 1|Canvas 2|

Resultaat¶


Canvas 1	Canvas 2

Caveats¶

De p5.sound.js module blijkt niet compatible met meerdere sketches op een pagina. Je kunt deze weglaten of voor nu leven met de foutmelding in de browser console. Onderzoek naar oplossing nodig.

Last update: December 9, 2022