Cannot Create Classes

p5.js Beginners
1

Good morning, people! Recently, I’ve been wresting with one small issue and honestly, it’s really starting to frustrate me. Perhaps it’s a small issue and I’m just going to look stupid, but at this rate, I might as well take the humiliation because I cannot for the life of me figure out why this error keeps popping up.

Basically, I’m trying to just create a class.

Look at the code below:

let bubble; 

function setup() {
  bubble = new Bubble();
}

function draw() { 
}

class Bubble { //On this line, a Syntax error appears: "Expected an operand, but found class"
  constructor(){
    this.x = random(width);
      } 
}

I keep getting “Expected an operand, but found class” as an error and I have no idea why…

2

should be

class Bubble { //On this line, a Syntax error appears: “Expected an operand, but found class”
  Bubble(){
    this.x = random(width);
  }
}

A constructor is a special mmethod with the same name as the class and no return type

To make your code look like code hichlight it and click on </> button. Go back and edit your post to try it :grin:

1 Like
3

Oh. Thanks! I was REALLY wondering about that code format thing. Also, thanks for the catch on the constructor naming.

However, I’m still getting the Syntax Error about the program expecting an Operand. At this point, I think I might need to find a way to code without using classes, because this problem is just stumping me hard.

4

Are you using Python? The very first line is confusing me, what does it mean.

5

It’s one of the many ways I’m trying to define a new class after the usual method returned the same error now. I’m getting desperate here and using things I don’t fully know about such as that first line. XD

Apparently, it should also allow me to declare a new class, but at this point, I don’t fully know.

6

Change the first line to

Bubble bubble;
and see what happens.

Do you know what mode you are in pjs, Java, Python???

7

Right now I’m in the p5.js mode.
I tried out your suggestion. It gives me an earlier Syntax Error: “Expected ; but found bubble”

8

I think you need to ask someone more familiar with Javascript because I have just tried p5js mode (for the first time) and I am not getting any syntax errors with your original code of with my amended code.

1 Like
9

@quark your code works here too so it might be something on martins end.

@Martin you don’t have to use classes you could just do something like this

1 Like
10

@hotfooted
@quark
Yeah. Thanks for the help, guys. At this point I have no other choice. It’s probably something up with my computer drives or something messing it up…

11

What are you using to do the coding? Processing in p5js mode, p5js web editor, or a local sketch.js and index.html?

What browser are you using to view the sktech? And what version number of that browser?

It’s not ideal to have to use old prototypes in place of classes.

12

I’m using the p5.js mode of the processing program and whenever I do get to run it, it is using Chrome.

13

What version of chrome? As long as you’re using a version newer than chrome 49, then classes should work (that’s from early 2016, so it’s probably safe to assume your chrome has been updated since then but you should check just in case).

Could you try using a text editor with local sketch.js and index.html files and following this?:

Edit: Sorry that was an older video, I’ve replaced it with the updated one now^^

14
1 Like
15

It’s not the browsers that messing up the code. Rather I open it through the HTML index or run it in the Pde, the program will still give me that error. At this point, I think it may be the way my JDK or JRE is set up.

What version of the p5.js, JRE, and JDK is everyone else using currently to run p5 programs?

16

JRE and JDK are irrelevant to p5. You only need them for processing. If they are causing issues, then the best solution is to move out of processing to work with p5 by using a local webserver as described in the video I linked previously. You can also use the method @GoToLoop posted, but that doesn’t use a webserver and may also cause some issues depending on what your code is doing (which is mentioned in the video).

17

AFAIK, Firefox-based browsers treat the file:// URL scheme the same way as the http:// URL scheme. :fox_face:

Thus far I haven’t found any issues at all when running Processing sketches on Firefox under its file:// URL scheme. :partying_face:

Firefox-based browsers use the Gecko Spidermonkey JS engine. :spider:

But if we prefer/need to test JS on the Chrome’s Blink V8 engine instead, we can use the Vivaldi browser: :musical_score:

Similarly to Firefox, Vivaldi doesn’t restrict the file:// URL scheme either. :ok_hand:

However, anything that relies on the Fetch API fails on the V8 JS engine, b/c they’ve deliberately disallowed the file:// URL scheme on this particular API: :face_with_symbols_over_mouth:

Bugs.Chromium.org/p/chromium/issues/detail?id=810400

18

As I have exactly the same problem I tried the mod of the code but get same error.
Strange enough, when I use the same code (with “Constructor” keyword) in the web editor everything works fine ! In the “local” mode I have to use the keywords “Function” and declare accordingly.
Anny sugestion ?

1 Like