EndShape call inside mouseDragged doesn't work in instanciated mode

p5.js Coding Questions
1

Hi guys,

It’s all in the title, here is an example of the code:

var s1 = function( sketch ) {
sketch.setup = function() {
let canvas1 = sketch.createCanvas(400, 400, sketch.WEBGL);
canvas1.position(0,0);
canvas1.background(“blue”);
}
sketch.mousePressed = function(){
sketch.beginShape();
sketch.fill(“green”);
}

sketch.mouseDragged = function(){
sketch.curveVertex(sketch.mouseX-200,sketch.mouseY-200);
}
sketch.mouseReleased = function(){
sketch.endShape();

}

};
new p5(s1);
var s2 = function( sketch ) {
sketch.setup = function() {
var canvas1 = sketch.createCanvas(400, 400, sketch.WEBGL);
canvas1.position(400,0);
canvas1.background(0,0,0,0);
}
sketch.mousePressed = function(){
sketch.beginShape();
sketch.fill(“yellow”);
}

sketch.draw = function(){
sketch.curveVertex(sketch.mouseX-205,sketch.mouseY-200);
sketch.endShape();

}
sketch.mouseReleased = function(){
}

};

// create the second instance of p5 and pass in the function for sketch 2
new p5(s2);

So for example the EndShape call in mouseReleased in this example works, but not the one in mouseDragged.

Hopefully someone has an answer !
Thanks !

2
3

Yes that’s the github issue I opened too !

Also, the code is obviously wrong in my example here, it’s not sketch.draw, but sketch.mouseDragged.

I tried a couple things before posting :wink:

4

Just did some more tests,
It seems that if I use a delay on the EndShape function I do get something drawn.
It’s as if after using Endshape once, I can’t use it anymore.

What I don’t understand is that I can use EndShape this way when I use p5js in regular mode.