Flickering that occurs in a Processing.js sketch

CMacDady

I recently uploaded one of my sketches to OpenProcessing to see how it runs.

Unlike the Java version the browser version starts suffering from really bad flickering. It is almost like the game continues to run and another alternate game is running on top of it.

http://www.openprocessing.org/sketch/144487

Here is the uploaded sketch. The code is also available at the link.

I was hoping someone might have run into this issue before and knows how to deal with it.

I have since continued updating the code in the regular Processing environment and each time the same problem happens.

DCRaven

Unfortunately ProcessingJS is very glitchy/buddy and 90% of my programs don't work in it :( The only thing I can think of is just recode the mechanic that doesn't work to be slightly different.

CMacDady

This topic:

http://stackoverflow.com/questions/5440814/processingjs-flickering-when-drawing-more-than-one-object

might be similar to what I was experiencing. This person said he fixed it by placing 'FOR' loops around where the circles are drawn.

I did something similar. Placed a 'FOR' loop around each something.draw().

The flickering on those particular images stopped. However the game overscreen still flickers and superimposes itself... :(. I don't know what could be happening or why 'FOR' loops kinda fix things.

CMacDady

I wonder. There was an issue with loading images because Javascript keeps processing code as the image is being loaded. Would anyone know if this issue might be derived from the same concept of JavaScript continuing to run past a point where it should stop and check something?

CMacDady

I reduced the frame rate to 5 to see if having the program run slower does anything. Java mode runs as it should with everything slowed down. In JavaScript Mode there is definitely two instances running on top of each other. Each frame, images jump back and forth, giving a flickering effect. One 'game' seems to run as normal with another 'game' running slightly behind.

I still don't know what is causing this. If anyone can help out it would be greatly appreciated.

EDIT: My thoughts were maybe both the rising and falling edge of mousePressed was causing two instances. Having a difficult time seeing if this is the case. keyPressed seems to be causing similar effects too.

EDIT: This does not seem to be the case, because when I force to game to only draw the game-play, the same buggy effect occurs, regardless of if there was a title screen or not.

EDIT: I added some of those 'FOR' loops to the setup commands for objects in the void setup() function. That fixes much of the flicker for objects. However the game eventually falls into the same issue of two games running.

EDIT: Trying to get help with Processing.js community. They asked me to strip the code down. Here it is: http://www.openprocessing.org/sketch/147128

Even with only the running sprite and one obstacle the "flickering"/"double game" still occurs.

CMacDady

ANSWER: Having multiple processing.js files in multiple folders was causing this. IDK why but after deleting them all and letting Processing auto create its own single file, everything started working as it should.