1

I am using the p5.js library as the basis for my program due to its ease of implementing visual features to javascript, however I have run into a bit of trouble.

I am wanting to create multiple canvases within the same file to be displayed on an html page. I have attempted a few means of doing this and have had the most success with this means of achieving it. Effectively separating two p5 sketches via “instance mode” to then be able to reference them from separate div elements in the html file.

This means works for what I want it to. I can create x number of instances and separate them into x number of div elements on my html page without problem.

However, an integral feature of my program is that when a key is pressed it calls a function that is specific to a particular canvas. Using the keyPressed() function in p5 I am able to achieve this. However, it is not scalable to multiple canvases.

Effectively it seems that (at least with my implementation) that putting this function inside of multiple instances causes the function to only be called in the first instance and ignoring the others. To go around this I was thinking I could implement this keyPressed() function outside the scope of the instances and then have that keyPressed() function call a function from each instance to achieve what I desire.

This is where my problem has arisen, I do not know how I can refer to a function within an instance from outside the local scope of that instance. Here is some example code of what I am wanting to achieve. I am not very experienced with JavaScript and any help would be much appreciated.

function keyPressed() {
  if(keyCode === [SOME_KEY]) {
    //Call doSomething() from sketch1 and sketch2
  }
}

//Sketch 1
var sketch1 = function( p ) { // p could be any variable name

  p.setup = function() {
    createCanvas(); //etc
  };

  p.doSomething = function() {
    //etc
  }
};
var myp5 = new p5(sketch1, 'c1');

// Sketch Two
var sketch2 = function( p ) { 

  p.setup = function() {
    createCanvas(); //etc
  };

  p.doSomething = function() {
    //etc
  }
};
var myp5 = new p5(sketch2, 'c2');
  • 1
    What happens if you get rid of the top-level `keyPressed()` function and `return true` from the individual sketch-level `keyPressed()` functions? Do you have a CodePen or JSFiddle we can play with? – Kevin Workman Dec 11 '17 at 22:11
  • @KevinWorkman My original implementation put the keyPressed() functions in each instance in place of the "doSomething" functions. This caused only the first sketches keyPressed() function to be used and ignored any following in other instances. My current work around has been to use keyPressed() in one and keyReleased() in the other, however this solution is not scalable. –  Dec 11 '17 at 22:13
  • Yeah, I'm asking what happens if you add a `return true` at the end of the `keyPressed()` functions in your original implementation. If that doesn't work, please provide a CodePen or JSFiddle we can play with. – Kevin Workman Dec 11 '17 at 22:15
  • Having a bit of trouble getting the JSFiddle to work... Never used it before, but it doesn't appear to be displaying any of the ellipsis though it creates one of the canvases... https://jsfiddle.net/bmhsoszu/ also here is a link to what the html should look like... https://imgur.com/a/Wnajd thank you for your patience –  Dec 11 '17 at 22:33

0 Answers0