JavaScript mode seems to run two instances of my sketch at once? Any help would be awesome

thegnome54

I've been working on a little game: http://www.openprocessing.org/sketch/203189

Sometimes it seems to work perfectly, other times (most often if I switch tabs for a few seconds or defocus/refocus the sketch) it will seem to start running two instances of the sketch and flicker between them.

I've tried putting in some debug measures, like displaying the variable 'focused' on the 'click here to play' screen. When the sketch flickers between the game and that screen, 'focused' shows as false on that screen even though I'm clicking repeatedly inside the window. I'm at a loss for what's going on here. There seem to be two separate copies of every variable, and one game can even end while the other continues.

Does anyone have any suggestions for how to fix this?

blindfish

That's a lot if code to look through! I'd suggest doing console.log() from the newgame() function: it can be triggered from a mouse press and a key board event. Check that conditions avoid repeat calls!

thegnome54

Thanks for the suggestion! It shouldn't matter if newGame() is called multiple times though, it would just reset over and over. It really seems like there are multiple versions of the script running, as it flickers between screens that report different values for the same boolean.

Strangely, I may have found a fix (http://www.openprocessing.org/sketch/203322) all I did was move a function that was between setup() and draw() to down below draw(), and it doesn't seem to behave strangely anymore. I have no idea why that would be. If anyone would be so kind as to verify that this new version doesn't produce the glitch, or have any ideas as to why this change had an impact, that would be great!

Thanks.

blindfish

It's likely to be some kind of scope issue: processing.js 'compiles' (actually the term is apparently 'transpiles') your 'java' code into JS, so something obviously got borked during this process. It probably wraps the code in anonymous functions (a common JS pattern) which in theory protects scope, but in practice could allow multiple instances of the same sketch to be run... I don't have time now but might have time to look at the rendered code tomorrow to confirm my hypothesis...

blindfish

It turns out it's not so straightforward to look at the transpiled code (I'd need to do some more digging); but what is interesting is the results of running this:

void setup() {
  console.info("setup");
}

void draw() {
  console.info("draw");
}

I'd expect 'setup' to always be output first; and it looks like it is when first loaded. However if you hit refresh something odd happens: you see 'draw' output once or twice before setup runs. If you add noLoop() it always outputs in order.

This suggests a timer-based loop isn't being shut down properly when the page refreshes (which might also happen when you switch tabs). This looks to me like a bug and in fact the most likely cause of your problems; though the fact that moving the newGame() function fixed it suggests there was also some kind of scope issue at play...

thegnome54

Very interesting! Thanks again for looking into this.

I think my newGame() function was a red herring, actually. It seems that the same sketch will compile and work fine from one computer, but produce this bug on another. The one that works is running Processing 2.0.3, while the glitchy one runs the latest 2.2.1. This suggests that your glitch may have been introduced recently. I'm glad I didn't update on that one computer!

You can see the apparently-functional final version of my game here: http://www.openprocessing.org/sketch/203492

Is there somewhere this should be submitted to notify the devs?