Processing Sketch displayed on web browser (using processing.js) causes the browser to hang

anisha26

Processing Sketch displayed on web browser (using processing.js) causes the browser to hang

in Processing with Other Languages • 1 year ago

Hi,

I have been trying to display a sketch built using processing on a web browser (FireFox) with the help of processing.js

However, my browser window hangs (Not responding message in the title bar) for a couple of minutes before the sketch can be successfully loaded. I know this time is being taken as lot of computations(like reading from a huge text file several times) are being carried out by the processing code before it can display the sketch.
However, this gives a bad user experience.

Can someone help me with the resolution of this issue ? Tried alot of things but none seem to work.

Replies(3)

Kobby

Re: Processing Sketch displayed on web browser (using processing.js) causes the browser to hang

1 year ago

What all are you doing that makes it take a couple mins. a huge text file shouldnt take a couple mins to load unless its hundreds of pages long? are you loading lots of images as well? Is there a test for this somewhere or code we can look at? Processing Js is just regular javascript so you can combine javascript with it. Can you break some of that text into a javascript String array to hold instead of loading in the huge text file?

Chrisir

Re: Processing Sketch displayed on web browser (using processing.js) causes the browser to hang

1 year ago

I agree to kobby.

you could also go right into draw and display a message like "please wait..."
and then load your stuff from draw once. After that's done, have a boolean (or pogram state) that tells you loadingIsDone to avoid the loading every time draw is run.

There are some pit falls but maybe like this:

Copy code

int drawRunSoManyTimes=0;
boolean loadingIsDone=false;
void draw () {
if (drawRunSoManyTimes==1 && !loadingIsDone) {
loadMyHugeTextfile();
}
else {
// do nothing
}
if (drawRunSoManyTimes==0 && !loadingIsDone) {
text ("please wait...",200,200);
}
else {
background(0);
runNormalStuff();
}
drawRunSoManyTimes++;
}

not tested................

anisha26

Re: Processing Sketch displayed on web browser (using processing.js) causes the browser to hang

1 year ago

Thanks for your suggestions. Appreciate the help.

Well when I run the processing code "memory_diagram.pde" on windows IDE it takes upto 20-30 secs so that isn't really a big problem.

However when I try to run that code in a web browser using below :-

<head>

</script>

</head>

<body >

</body>

</html>

The sketch successfully loads after a minute or so. However, during that duration the web browser hangs (Not responding message in title bar). How can I avoid this ? I tried playing around with the browser settings to increase the script running time and stuff but no luck.

Top Reply