Instance specific variables for vertex()

[Ajayneethikannan]

Nature of issue?

• Found a bug

Most appropriate sub-area of p5.js?

• Core/Environment/Rendering

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices)
• Desktop/Laptop
• Others (specify if possible) Platform independent

Details about the bug:

• p5.js version: 0.7.3
• Web browser and version: Browser independent
• Operating System:
• Steps to reproduce this:

This sketch can be used for reference :
Tips to use :

1. Use mouse to draw points
2. Enter to join the points, backspace to clear the canvas.

let p1 = new p5(function sketchMaker(sketch){
sketch.setup = function()
{
  sketch.createCanvas(500, 500);
  sketch.background(55);
  sketch.stroke(10);
  sketch.strokeWeight(3);
  sketch.beginShape();
}
sketch.keyPressed = function ()
{
  console.log('s')
  if(sketch.key == 'Backspace'){
    sketch.background(55);
    sketch.beginShape();
  }
  if(sketch.key == 'Enter'){
    sketch.endShape(sketch.CLOSE);
    sketch.beginShape();
  }

}
sketch.mousePressed = function()
{
  sketch.vertex(sketch.mouseX, sketch.mouseY);
  sketch.point(sketch.mouseX, sketch.mouseY);
}

});


let p2 = new p5(function sketchMaker(sketch){
  sketch.setup = function()
  {
    sketch.createCanvas(500, 500);
    sketch.background(100);
    sketch.stroke(10);
    sketch.strokeWeight(3);
    sketch.beginShape();
  }
  sketch.keyPressed = function ()
  {
    console.log('s');
    if(sketch.key == 'Backspace'){
      sketch.background(100);
      sketch.beginShape();
    }
    if(sketch.key == 'Enter'){
      sketch.endShape(sketch.CLOSE);
      sketch.beginShape();
    }
  
  }
  sketch.mousePressed = function()
  {
    sketch.vertex(sketch.mouseX, sketch.mouseY);
    sketch.point(sketch.mouseX, sketch.mouseY);
  }
  
  });

// function setup()
// {
//    createCanvas(500, 500);
//    background(55);
//    stroke(10);
//    strokeWeight(3);
//    beginShape();
// }

// function keyPressed()
// {

//   if(key == 'Backspace'){
//     background(55);
//     beginShape();
//   }
//   if(key == 'Enter'){
//     endShape(CLOSE);
//     beginShape();
//   }
// }

// function mousePressed()
// {
//   console.log(mouseX, mouseY);
//   point(mouseX, mouseY);
//   vertex(mouseX, mouseY);
// }

Uncomment the global sketch functions to see normal behavior.

A lot of the variables in vertex.js are present globally, and are not instance specific , leading to errors in instance mode.

Possible solution : Make the variables in vertex.js instance specific .

Waiting for suggestions ,
Thanks !

[simranaggarwal1999]

Hey can I work upon this issue?

[montoyamoraga]

hi @simranaggarwal1999 sorry we didn't see this issue before,
i assigned it to you, if you still want to work on it :)

[simranaggarwal1999]

@montoyamoraga Thankyou! for assigning this issue to me. But as of now I am quite busy with my college stuff.

[montoyamoraga]

@simranaggarwal1999 i can unassign then and you can work on it when you can, don't worry :)

[sflanker]

Just FYI, there are issue with both the webGL and canvas renderers. Both seem to work fine with just a single instance, but are broken when there are multiple instances on the same page. Here's a jsfiddle with the repro: https://jsfiddle.net/sflanker/nxzhp3bq/1/

[davepagurek]

^ We're planning on partially addressing this in #6560 🙂