p5js editor tabs?

hudson_m4000

Can tabs be used in the beta p5js editor, to be able create objects etc. Problem is though that if I declare an object at the top of my first tab, script.js, and try to instantiate in setup(), the object is reported as undefined if its in its own tab. If its on the first i.e. script.js tab it's fine.

Also (probably related?), in the html file, the src is set as script.js so I guess that means all code had to be in the first, script.js tab?

So can/how are tabs used in the editor?

GoToLoop

DISCLAIMER: Never used the "official" p5js editor! :-$

I believe you've already used Processing's PDE lotsa times, especially its "Android Mode", right?
Then lemme tell ya a "dirty" secret: PDE got a behind-the-scenes helper called the pre-processor.
And when we hit CTRL+R, it collects every ".pde" file tab and merge them all as 1 big ".java" file.
And that 1 big ".java" file is a subclass (w/ the same name as the 1st tab) of Processing's PApplet class.

But what happens to our own defined sketch's classes & interfaces across all tabs?
They all become what is called nested classes & interfaces.
They belong to that 1 big wrapper top-class now.

What if we decide against having our classes become nested 1s and want them as regular top classes?
In this case, we create a new tab. However we explicit end its name w/ a ".java" extension.
Therefore that tab isn't a ".pde" file tab anymore and PDE's pre-processor won't touch it!

But that has some "dire" consequences too:

1. All Processing's exclusive idiomatic & sugary syntax can't be used outside ".pde" tabs.
2. And ".java" doesn't have direct access to ".pde" tabs and their canvas!
3. In order for ".java" tabs to access sketch's canvas, it's necessary for the big ".pde" to pass its PApplet reference to them.
4. Otherwise, only static Processing's API is available to ".java" tabs. :o3

GoToLoop

Now what has all the PDE subject above got anything to do w/ "p5js Editor"? :-/

The extra p5js Editor's ".js" tabs are analogous to PDE's ".java" tabs!
There's no concept of ".pde" tabs in p5js Editor at all! :-&
They behave as some independent "class" apart from the p5 sketch inside the 1st tab.

The way to fix that and make them "see" the 1st tab's sketch and access its canvas is analogous to what we would do in PDE's "Java Mode":

Pass the sketch's reference to the "class"'s constructor, so it can store it in order to access p5's API. *-:)

You can take a look at 1 example at the link below:
https://forum.Processing.org/two/discussion/comment/40163/#Comment_40163

Class Face constructor demands a p5 reference as 1st parameter and stores it as this.p:

// Face's constructor:
function Face(p, x, y, w, h) {
  this.p = p; // p5 sketch's passed reference.

A statement example of it relying on this.p in order to access sketch's canvas via p5's API ellipse():
this.p.ellipse(this.x, this.y, this.w, this.h);

And inside 1st tab "sketch.js", an example about instantiating Face & passing the p5's reference to it:
faces[0] = new Face(p, w>>2, h>>2, w/3, h/2.5);

p argument is of type p5. Could also be replaced by this too! :>
faces[0] = new Face(this, w>>2, h>>2, w/3, h/2.5);

hudson_m4000

@GoToLoop OK!

2 ace replies .. thanks.

Yes you are right I have used PDE a lot, java and android, and knew about its preprocessor which is why I was a bit confused by the new p5js offering tabs as I couldn't see how that would work the same ... and from what you say, it doesn't. I will test out your guide in your 2nd post to see what happens. Many thanks Mark

GoToLoop

It's sad they chose to re-invent the wheel and make an inferior editor while they could grab 1 of PDE's "Modes" as a base.
AFaIK, all "Modes" like "JavaScript" & "CoffeeScript", etc., have the concept of ".pde" tabs.

GoToLoop

• Another issue is that they don't have a stable Linux version yet.
• And I can't find out some place where we can replace the p5.js library used there.
• Therefore the users of "p5.js Editor" linger on old p5.js versions for a long time!
• If I wanted to update the "processing.js" file in JS & CS Modes w/ some other latest version, it's as easy as to replace the 1 inside subfolder "template/".

Nevertheless, here are 2 web editor sites to host p5.js sketches: :-bd

1. http://p5js.SketchPad.cc/
2. http://p5ide.HerokuApp.com/editor

GoToLoop

CORRECTION: As I've stated in my disclaimer in my 1st post, I don't have the "p5.js Editor" installed here.

I've forgotten an important detail in p5.js, there are 2 modes: "Global" & "Instance".

Everything I've exposed above was about the so-called "Instance" mode.
That is, when we instantiate p5 lib after the model below, passing our sketch function as its argument:
new p5(sketch); // sketch is a function containing our app w/ setup() & draw().

Otherwise, if setup() or draw() are loose inside some ".js" file, we're in "Global" mode:

function preload() {}
function setup() {}
function draw() {}

In this mode all p5's API + its canvas are freely available for all ".js" files! B-)
In other words, if you're using the "Global" mode, your "bug" is caused by another tiny detail. :-\"

For further details go here: https://GitHub.com/processing/p5.js/wiki/Instantiation-Cases

GoToLoop

DISCLAIMER: I'm using http://p5ide.HerokuApp.com/editor in place of "p5.js Editor"!

I've grabbed my "Hoppy Beaver" for p5.js version and pasted it in the online "p5ide".
It's worked as expected as 1 big file in "Global" mode btW! :bz
https://forum.Processing.org/two/discussion/8997/hoppy-beaver

Then I've created an extra tab called "Beaver.js". Then CTRL+X the whole Beaver class from "sketch.js" and CTRL+V that into "Beaver.js".

/** Beaver Class **/
 
Beaver.SIZE = 40, Beaver.GROUND = Beaver.SIZE+10, Beaver.SPD = 5;
Beaver.falling = Beaver.jumping = null;
 
function Beaver(x, y) {
  this.x = x, this.y = y, this.isJumping = false;
}
 
Beaver.prototype.display = function() {
  image(this.isJumping && Beaver.jumping || Beaver.falling, this.x, this.y);
};
 
Beaver.prototype.fall = function() {
  this.y = min(this.y + Beaver.SPD, height - Beaver.GROUND);
  return this.isJumping = false;
};
 
Beaver.prototype.jump = function() {
  this.y = max(this.y - Beaver.SPD, 0);
  return this.isJumping = true;
};
 
Beaver.prototype.gotStick = function(s) {
  return this.x+Beaver.SIZE > s.x & this.x < s.x+Stick.W &
         this.y+Beaver.SIZE > s.y & this.y < s.y+Stick.H;
};

This time it didn't work b/c "p5ide" doesn't automatically updates its "index.html" in order to account for the new "Beaver.js" tab! 3:-O

As a side note, both "JavaScript & CoffeeScript" modes dynamically generate its "index.html" including all tabs we got! <:-P

In order to fix that, I had to manually include an extra <script> tag inside "index.html" tab file:
<script src='Beaver.js'></script>

And that's it! Bet it's the same boat you're in now! Go fix it and tell us how it was! O:-)

hudson_m4000

@GoToLoop ... phew ... loads to look at!

Solved, so thanks for all your advice and help. It was really just a need to add additional script tags to the html. I guess this may become automated in a future version of the editor. Successfully ran my first simple sketch on a site hosted by one.com :)