P5.js multiple canvases and one script with loadImage

Question

I have a problem placing multiple canvases in single html page with p5.js this is more complicated as its include importing images and procesing images.

var s1 = function(sketch) {
    let img, 
    sketch.colorFG = '#111111',
    sketch.colorBG = '#f1f1f1';

    function sketch.preload(){
    img = loadImage('https://picsum.photos/id/21/3008/2008'); //add an image
    }

    function sketch.setup() {
    sketch.createCanvas(600, 600);
    sketch.background(colorBG);
    img.resize(600, 600);
    }


    function sketch.draw() {
    sketch.background(colorBG);
    sketch.fill(colorFG);
    sketch.noStroke();
    const sketch.ratio = 600/600;
    let sketch.coefZ = (mouseX/width)*400;
    console.log(sketch.coefZ)
    console.log(sketch.mouseX)
    const sketch.tilesX = map(sketch.coefZ, 0, 600, 10, 100);
    const sketch.tilesY = ratio * sketch.tilesX;
    const sketch.tileSize = width / sketch.tilesX;
    for (let sketch.y = 0; y < img.height; sketch.y += sketch.tileSize) {
    for (let sketch.x = 0; x < img.width; sketch.x += sketch.tileSize) {
    let sketch.c = img.get(sketch.x, sketch.y);
    let sketch.b = map(brightness(sketch.c), 0, 255, 1, 0);
    push();
    translate(sketch.x, sketch.y);
    rect(0, 0, sketch.b * sketch.tileSize, sketch.b * sketch.tileSize);
    pop();
    }
    }
    }
};
new p5(s1);

var s2 = function(sketch) {
    let img2, 
    sketch.colorFG = '#111111',
    sketch.colorBG = '#f1f1f1';

    function sketch.preload(){
    img2 = loadImage('https://picsum.photos/id/22/4434/3729'); //add an image
    }

    function sketch.setup() {
    sketch.createCanvas(600, 600);
    sketch.background(colorBG);
    img2.resize(600, 600);
    }


    function sketch.draw() {
    sketch.background(colorBG);
    sketch.fill(colorFG);
    sketch.noStroke();
    const sketch.ratio = 600/600;
    let sketch.coefZ = (mouseX/width)*400;
    console.log(sketch.coefZ)
    console.log(sketch.mouseX)
    const sketch.tilesX = map(sketch.coefZ, 0, 600, 10, 100);
    const sketch.tilesY = ratio * sketch.tilesX;
    const sketch.tileSize = width / sketch.tilesX;
    for (let sketch.y = 0; y < img.height; sketch.y += sketch.tileSize) {
    for (let sketch.x = 0; x < img.width; sketch.x += sketch.tileSize) {
    let sketch.c = img2.get(sketch.x, sketch.y);
    let sketch.b = map(brightness(sketch.c), 0, 255, 1, 0);
    push();
    translate(sketch.x, sketch.y);
    rect(0, 0, sketch.b * sketch.tileSize, sketch.b * sketch.tileSize);
    pop();
    }
    }
    }
};
new p5(s2);

and html code for the website looks like this

<div class="row"> 
    <div class="column" id="s1">
      
</div>
    <div class="column" id="s2">
       </div>  
   
  </div>
  

I want both pictures to be rasterize and dsiplay on the webpage for now I have error

Uncaught SyntaxError: Identifier 'sketch' has already been declared (at script.js:3:5)

Answer 1

Just add in your HTML, specify which element should contain each sketch by setting the parent option when instantiating the sketch:

new p5(sketch1, 'sketch1-container');
new p5(sketch2, 'sketch2-container');

This will create two separate canvas elements, each containing one of your sketches, and place them within the specified HTML elements.

eg: https://jsfiddle.net/x27w6jaf/3/