Code organization

p5.js Coding Questions
1

I am about to convert a lengthy Processing sketch to p5.js. Currently the code is defined in several files (a common driver, some objects/classes, etc) and I’d like to keep them separate. This was doable with the Processing IDE. Essentially I’m looking for something like the “c” language’s #include.

Any suggestions?

Thanks.

1 Like
2

you mean like
https://editor.p5js.org/kll/sketches/bNjtWjB_P

1 Like
3

Yes, that editor is much like the Processing IDE. However, I don’t want to use it if possible. I would prefer to use my editor of choice and maintain my files locally. Admittedly I never signed up – I was assuming that the files are maintained on the p5 site, again, not my preference. Also, I will still need the feature I am seeking, something like #include, if I want to execute the javascript outside of the p5 editor.

1 Like
4

1st you have to decide if it’s gonna be global or instance mode approach: :globe_with_meridians:

You can see both approaches in the repo below: :grinning:

2 Likes
5

did you even look at the code? or download it?

you not need to register/login for this, but well you should know how to click on the little arrows to find file/path …

it does not matter what editor or environment you use
i make that example for you to show one way how to do the multi file thing
( comparable with the multi *.pde in processing IDE JAVA mode. )
and commented all entries!

6

Sorry kll, I clicked your link to the editor but I did not see the example you cite. And if, by the little arrows, you are referring to the p5 menu bar items (e.g., File, Edit), I see nothing that would lead me to the example.

7

Thanks for the citation GoToLoop. I’ll go take a look.

8

yes that “>” little arrow is much too small!

ok, i give up,
i print it here:

sketch.js

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
}

function draw() {
  background(200,200,0);
  translate(width/2,height/2);
  my_rectangle();    // see file my_function.js / see index.html
}

my_function.js

/* 
 file: my_function.js
 called in index.html
 used   in sketch.js
*/

function my_rectangle() {
  push();
  fill(0, 200, 0);
  stroke(0, 0, 200);
  strokeWeight(20);
  rect(0, 0, 100, 100);
  pop();
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
    <script src="my_function.js"></script>   <!--- add --->
  </body>
</html>
1 Like
9

Aha, kll, I did find the contents of the Project Folder. True, I didn’t notice that particular arrow.

10

Thanks kll for your perseverance.

11

as you not use the online editor it does not matter,

still i recommend that for communication/questions about p5.js
you register and use it to ask for help here but play together with your MVCE code online.

so now you see the example code / here above / and online /
did you get the idea?
instead #include use index.html script

12

Yes, once I saw the contents of your Project Folder, everything became clear.

Again, thanks.