Tabs, or keeping projects tidy

p5.js
1

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?

1 Like
2

yes there’s a way! :smiley: https://editor.p5js.org/julian2/sketches/rydLQZZFQ

  1. you have to click on the top left arrow icon to expand the files tab & create a new file (I called it ‘test.js’)
  2. you have to make sure to load the resource (javascript file) in your index.html
  3. 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)
4 Likes
3

Hey Julian2

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?

4

Are you editing this on Codepen, or using .js files/an IDE?

5

Codepen was where I started this, but I moved it to Atom/Chrome when it started to get large

6

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.

 <script src="sketch.js"></script>
 <script src="class1.js"></script>
 <script src="class2.js"></script>
2 Likes
7

Here’s some multi-file p5js online sketch: :slight_smile:

But if you’d rather prefer instance mode, here’s another example: :sunglasses:
https://github.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/instance

GoSubRoutine.GitHub.io/Ball-in-the-Chamber/instance/

3 Likes
8

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…