1

I am writing some code in Processing that makes use of multiple classes. When I put them in one single JavaScript file, it is getting really long. It would be great if I could separate each class into their own file and import them in somehow.

I have tried putting the objects in their own files and tried bringing them in with script tags that look something like this:

<script type="application/processing" src="object1.js"></script>
<script type="application/processing" src="object2.js"></script>
<script type="application/processing" src="main.js"></script>

However, my main.js file does not seem to recognize the class definitions from my other 2 files. I am writing pure Processing code to put into a web environment.

Is there something wrong with what I am doing or is this something that Processing does not support? Thank you in advance for your help!

Daniel Hong
  • 93
  • 1
  • 7

1 Answers1

1

From the Processing.js docs, emphasis mine:

Create a web page that includes Processing.js as well as a with info about where to get your sketch file (you can specify multiple *.pde files, separating them with spaces):

<script src="processing-1.3.6.min.js"></script>
<canvas data-processing-sources="hello-web.pde"></canvas>

So you'd probably want something like this:

<canvas data-processing-sources="object1.pde object2.pde main.pde"></canvas>

Googling "Processing.js multiple pde files" also returns a bunch of results, including this GitHub issue.

Another approach would be to use the Processing editor and split your project up into multiple tabs. You'd have to use an old version though, since Processing.js is no longer supported in the latest version.

That brings us to the point I mentioned in your last question: Processing.js is old and not being actively developed. If you're developing Processing sketches for the web, and you're comfortable with JavaScript, then you should really be using P5.js. Otherwise you're going to be fighting with a library that's no longer maintained.

Community
  • 1
  • 1
Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
  • I tried what you wrote [here](https://repl.it/@DanielHong/ProcessingJS-With-Multiple-Files). Is there something wrong with the Button class file that I wrote? – Daniel Hong Dec 24 '17 at 00:14
  • @DanielHong Nothing looks wrong from a Java perspective, but keep in mind that this isn't Java. This is Processing.js, which is not maintained anymore, doing some magic behind the scenes to turn your Java into JavaScript. It's very hard to know what's going on if you aren't sticking with the absolute basics. Honestly, you really should switch to P5.js, or you should stick with basics (one file, pure Processing code). – Kevin Workman Dec 24 '17 at 00:46
  • The program that I am working one has many classes, so I try to avoid putting every class into one file. – Daniel Hong Dec 24 '17 at 00:48
  • I read more into P5.js. It looks friendlier to what I want to do, so I will give that a chance. Thank you for introducing me to it. I will accept your answer :) . – Daniel Hong Dec 24 '17 at 01:04
  • 1
    @DanielHong Also note that with ES6, you can create classes in JavaScript. And you can split that up into as many files as you want. – Kevin Workman Dec 24 '17 at 01:10
  • Thank you for your suggestion. I made use of ES6's classes. Can you help me have a look [here](https://repl.it/@DanielHong/ProcessingJS-With-Multiple-Files) on why I might be getting a script error? – Daniel Hong Dec 24 '17 at 02:31
  • 1
    @DanielHong The error says it all: `Uncaught size() is not a valid p5 function, to set the size of the drawing canvas, please use createCanvas() instead` – Kevin Workman Dec 24 '17 at 02:35
  • 1
    Thank you so much for all your help. I referred to P5 reference and figured the rest out. I will leave [this link](https://repl.it/@DanielHong/ProcessingJS-With-Multiple-Files) to a working example for people who come across the same issue. – Daniel Hong Dec 24 '17 at 02:49
  • 1
    @DanielHong Awesome, glad you got it figured out. Thanks for the interesting conversation! – Kevin Workman Dec 24 '17 at 04:31