Multiple Javascript Sketches in P5JS Editor?

Question

I'm relatively new to P5JS and the P5JS editor. I am also new to Stack Overflow. I am trying to split my code into multiple sketches (.js files) by opening new tabs in the editor, as is explained in this 'Coding Train' video: https://www.youtube.com/watch?v=Yk18ZKvXBj4

I believe I followed the steps in the video accurately. My 'index.html' file looks like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Untitled</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>
    <script src="mybutton.js" type="text/javascript"></script>
    <script src="p5.collide2d.js" type="text/javascript"></script>

    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
  </head>
  <body>
  </body>
</html>

My goal was to take this function for an object called 'MyButton' in my program:

function MyButton(xLoc, yLoc) {
  this.on = false;
  this.startXLoc = xLoc;
  this.startYLoc = yLoc;
  this.xLoc = xLoc;
  this.yLoc = yLoc;
  this.display = function() {
    if (this.on) {
      fill(255);
    } else {
      fill(100, 0, 0);
    }
    rect(this.xLoc, this.yLoc, 30, 30);
  }
}

and give it its own file, called 'mybutton.js', to make the normal 'sketch.js' file less cluttered. For now, the 'sketch.js' file looks like this:

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  noStroke();
}

var testButton = new MyButton(50, 50);  //This line produces the error
console.log(testButton);

function draw() {
  background(40);
  testButton.display();
}

However, when I run the code this way, I get this error on line 7:

7: Uncaught TypeError: Illegal constructor

Whereas if I run the code with the 'MyButton' function inside of the 'sketch.js' file (and I don't give it its own file), it runs correctly, and I get no errors at all. I'm not sure what the problem is. How can I give the 'MyButton' function its own file without any errors? If it makes any difference, I am running P5JS on Linux Mint. Any help is appreciated. Thank you!

What exact line is the error on? Also you might not want to call something node.js as that is something [pretty specific](https://nodejs.org/en/) and might confuse people reading your question. Can you post the full content of your `index.html` file, or better yet post a fiddle or a CodePen running this code? — Kevin Workman, Apr 09 '17 at 00:15

score 0 · Accepted Answer · edited May 23 '17 at 11:47

0

If you remove var from before testButton, then the error is alleviated (like so):

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  noStroke();

  testButton = new MyButton(50, 50);  //This line produces the error
  console.log(testButton);

}

The original issue is that p5js needs the variable declared within setup for it to be accessed in the draw loop. Removing var from the global declaration makes testButton very similar to a global variable (but not quite) allowing the draw loop to "see" the variable. See this answer for more details.

edited May 23 '17 at 11:47

Community

1
1

answered May 03 '17 at 01:05

Bryce Frank

697
10
24

Thank you! This explains why it worked in some of my projects and not others - I must have been using "var" sometimes and not other times. – Ike Bishop May 05 '17 at 02:22

Multiple Javascript Sketches in P5JS Editor?

1 Answers1