Large sketch sketch not running in Javascript Mode - save our souls! (*EDIT: link repaired)

fensterpl..

Large sketch sketch not running in Javascript Mode - save our souls! (*EDIT: link repaired)

in Processing with Other Languages • 3 months ago

*EDIT: i corrected the link to the file. sorry guys! It´s http://martinbarner.de/souluniverse_web.zip

Hi Everybody!

Everything runs perfectly in java mode, but in javascript mode the sketch remains grey. I went through all threads etc. and can´t find the problem please help!!!

I wrote a sketch, that allows you to "customize" a particle system ("soul") in the first step. In the second step, you can send it to the "Universe".

If there are multiple particle systems in the universe, they are attracted to each other according to their visual similarity, and they start building cool constellations.

I tried to keep the code structured, but it´s my first sketch ever, so it could probably be a lot shorter and smarter, but there´s not a lot i can do about that now. Please download the whole sketch from souluniverse_web.zip and try it out (it´s fun!)

I avoided these common mistakes:

-I am not using libraries

-I`m preloading the images and I put them in the same folder

What i suspect to be the problem:

-Something wrong with the ArrayLists

-Something wrong with the images

-Use of functions not supported in javascript

I can´t post the code here because it´s too long. This is how the code is structured:

the "Souluniverse":

Here, Everything is set up. Switches between "creating a soul", and "viewing the universe" mode.

the "Universe" class:

Contains the ArrayList with all created souls. Handles the interactions between the different particle systems: measures their distances, calculates their attraction to each other etc.

the "Button" class:

The button "send to the universe".

the ControlPoint class:

The controlpoints you can pull in the "create soul" mode to change it´s characteristics. It Passes the values on to the nowCreatedSoul object

the nowCreatedSoul class:

The "Soul" you edit in the "create soul" mode. It contains a particle system object.

the ParticleSystem class:

My modified Particle System

the savedSoul class:

Once the nowCreatedSoul is "send to the universe", a new savedSoul object is created and stored in the arrayList in the Universe object.

The mouseControl part:

contains all mouse interactions.

again: Please download the whole sketch from souluniverse_web.zip and try it out, you will enjoy it as well :)

Any hints why it doesn´t run in javascript mode are highly appreciated!!!! Thank you all already.

Best wishes

Martin

Replies(3)

fensterpl..

Javascript console

3 months ago

If I run it from the server (you can run it directly at http://www.martinbarner.de ) the javascript console gives me this error in the processing.js:

Uncaught SyntaxError: Unexpected number

PhiLho

Re: Large sketch sketch not running in Javascript Mode - save our souls! (*EDIT: link repaired)

3 months ago

I first tried it in Firefox, and it bring it to its knees...
In Chrome, I see the same error than you.

I glanced at the code, and saw some odd things:

ArrayList<SavedSoul> savedSouls;
ArrayList<PVector> savedSoulsLocations;
ArrayList<PVector> gravityForces;
ArrayList<Float> savedSoulsMass;

Mmm, why not put everything in the SaveSoul class?
I am not sure if the Float type (the class) is supported in Processing.js. It might fit with the above error.

SavedSoul currentSavedSoul1 = (SavedSoul) savedSouls.get(i);

Since you use a typed array list, you don't need a cast when you get an occurrence.

if (i != j) {

Actually, you should start j at i + 1, it would avoid to do the computation twice (i vs. j, then j vs. i).

if (abs(dist(...))<400) {

dist() is always positive...
dist() does a square root computation, in this kind of comparison, you can compute the squared value of dist (ie. x*x + y*y) and compare to the squared value. That's less computations, so you can get a better speed.

if (!edit) edit=true;

That's the same thing than:

edit = true;

actually...

if (controlPoint[i].isMouseOver == true) {

can be written

if (controlPoint[i].isMouseOver) {

send = new Button("Save to the Universe ä¿å˜åˆ°çµé‚å®‡å®™", width-500, 50, width/2, height-50);

You use width before calling size()! Don't forget size() should be the first instruction of setup() (see the Reference!).

Sorry for these random remarks probably not directly related to your problem (except perhaps Float?), but I hope they help.

mariuswatz

Re: Large sketch sketch not running in Javascript Mode - save our souls! (*EDIT: link repaired)

3 months ago

As usual with all things JS, it could be any number of issues. I noticed some possibly missing semi-colons in the JS file, but not sure if that's the issue.

Personally I'd be wary of using something as Java-specific as generics (ArrayList<Blah> etc). It's possible PJS supports the translation, but I wouldn't take the risk. Why not convert the PDE code to pure JS instead? You still run the risk of mysterious JS bugs, but at least you know it's in your own code.

Top Reply