Instance mode creating two canvas

p5.js Coding Questions
1

Hello there,

I’m trying to use p5js instance mode, but I don’t know why, invoking new p5(sketch) create two canvases…

const p5 = require('p5')

global.p5 = p5

const sketch = () => {

    setup = () => {
        
        createCanvas(windowWidth, windowHeight)
        background(0)

    }

    draw = () => {

        background(0)
        ellipse(mouseX, mouseY, 10, 10)

    }

    windowResized = () => {
        
        resizeCanvas(windowWidth, windowHeight);

    }

}

new p5(sketch)

I’ve also tried :

new p5(sketch)
new p5(sketch, 'p5sketch')
new p5(sketch,document.getElementById('p5sketch'))

They all create two canvas, the right one and one smaller:

<canvas id="defaultCanvas0" class="p5Canvas" style="width: 852px; height: 717px;" width="1704" height="1434"></canvas>
<canvas id="defaultCanvas1" class="p5Canvas" style="width: 100px; height: 100px;" width="200" height="200"></canvas></body>
1 Like
2

Did you try the example form from the instance mode documentation? (untested)

const s = ( sketch ) => {
  // ...
};

let myp5 = new p5(s);
3

Hello, Jeremy
Also tested the code you sent, but same thing happens… a second blank canvas is added to

4

Here is an example of using instance mode to drop one sketch and replace it with a second sketch – at the same canvas attachment point on the page. Click the mouse to switch back and forth between the two sketches.

https://editor.p5js.org/jeremydouglass/sketches/0bn7mGGQo

5

Thank you, Jeremy!

Is there a way to use instance mode without having to scope everything with p.?

6

I am not a JavaScript expert, but as far as I know p5.js instance mode and scoping are synonymous – the reason it works is that your sketches are not defined in global scope, but instead in a defined scope.

Perhaps a person with a bit more p5.js experience like @GoToLoop could comment.

1 Like
7

You could simply use global mode! :globe_with_meridians:

If you need to have more than 1 sketch in the same page you can place the others within their own <iframe>. :bulb:

Bl.ocks.org/GoSubRoutine/raw/60b154e52336f7fee7c5f1fe817ceb22/

2 Likes
8

Very interesting. So an a global mode design, rather than having different setup/draw, a single sketch can re-invoke its own … what, its own setup / createCanvas, or its own custom reset() ? – creating a new canvas, or new canvas contents with different parameters?

Regarding this:

function setup() {
  createCanvas(600, 600).mousePressed(reset);

Coming from primarily Java / Python etc, I would expect clicking the mouse during draw() to do nothing, yet it does – so the method chaining in setup() must be configuring something that I don’t quite understand. I’m assuming the mouse calls reset() rather than calling setup()…

9

Like all Processing flavors, setup() should be called once only.
Indeed, the <canvas>’ mousedown event is set to callback reset():

Let’s dissect createCanvas(600, 600).mousePressed(reset); chaining call, shall we?

Method p5::createCanvas() returns a p5.Renderer object:

And b/c it’s the default P2D default renderer, it is more precisely a p5.Renderer2D object:

The class p5.Renderer is also a subclass of the base class p5.Element:

Therefore, all p5.Element’s methods & properties are available to a p5.Renderer instance; including of course p5.Element::mousePressed():

The main diff. between p5.Element::mousePressed() & p5::mousePressed() methods:

is that the former acts upon its p5.Element only; while the later fires anywhere within the document where the sketch is being run:

3 Likes