In Processing I got into the habit of using the tabs to split things up and keep it all tidy. I want to do something similar in p5js. If you check the link you can see that in the JS tab I have a huge (and ever expanding) document. I want to take all the ‘classes’ out and give them their own documents so I don’t spend half my life scrolling up and down.
What are ways that I can achieve this?
yes there’s a way! https://editor.p5js.org/julian2/sketches/rydLQZZFQ
- you have to click on the top left arrow icon to expand the files tab & create a new file (I called it ‘test.js’)
- the order that you load them in should be the order they are executed (so I have to load the file that defines
a before i can reference
a in my main script)
Thanks for the reply!
I’m designing in my browser and can’t seem to get this working. How can I put classes rather than just variables in a different .js and have them called from the main sketch?
Are you editing this on Codepen, or using .js files/an IDE?
Codepen was where I started this, but I moved it to Atom/Chrome when it started to get large
In your HTML (Probably called
index.html) document, you should have a line that looks something like
<script src="sketch.js"></script>. You can add more files by linking more. Eg.
Here’s some multi-file p5js online sketch:
But if you’d rather prefer instance mode, here’s another example:
OK! It was me being silly.
I needed to move ALL of the classes out and make sure that they were called in the right order in my index.html
Thanks to everyone for being so patient.
I hope that this thread can help someone else in the future…