Google Chrome ran out of memory

[justfun23]

So I was showing p5.js to one of my teachers and I wrote your code with some slight variations in speed, opacity and some colors and what happened is that Google Chrome showed me this :

I am not that proficient to figure out why does that happen but from what I know, it seems to me that the items in the array don't get dropped every time they finish looping, rather are just being stored until it runs out of memory.

If in any way my assumption is wrong please do correct me and explain why this occurs and what are some possible solutions for this. Thanks !

[RedHenDev]

Does this happen every time?

It shouldn't be a memory problem, since the stream arrays are only created once -- then simply moved back to top (so requiring no new memory).

If you can, check for any funny business in the console while you're running it in the Chrome Browser (Control + Shift + J , I think, is the short-cut way to bring up the console).

Good luck!

[justfun23]

I've always run any p5 sketch with the console open, just to make my life easier. To answer to your question, it seems to be reproduceable ~70% of the time, but the time varies. The first time it took like 10 minutes, I just left it running in the background, then when I got home I ran it for another 9 times, with nothing more opened than brackets and that was pretty much it. 8GB of RAM so that's not an issue either, console didn't seem to show me any funny business. I haven't modified the code too much either. Added some vars for a random coloured background every frame and did the same for the fonts. It's really dangerous for people with epilepsy and really trippy if you look at it for more than 10 seconds. I'll add my modifications here :

    var rb = random(100, 255);
    var gb = random(100, 255);
    var bb = random(100, 255);
    background(rb, gb, bb, 100);

This is for the BG(Obvisously);

var r = random(255);
            var g = random(255);
            var b = random(255);
            if (symbol.first) {
                fill(140, 255, 170, symbol.opacity);
            }
            else {
                fill(r, g, b, symbol.opacity);
            }

This is for every letter.
I don't think I've messed something up as I haven't modified anything else in the code.

[RedHenDev]

Thanks for the details.

Hmmmmmm....all looks fine. Nice code.

It would be really nice to track down the memory leak! (I've not tried running my own version of the sketch for as long as 10mins -- I'll try it myself in Chrome, and see if it happens too.

Do you have a link to the whole of your code? (Or you could Gist it to me?) -- no probs if not!

[justfun23]

https://gist.github.com/justfun23/a8f3982cd53d08b777ea7521ebab51c9 There you go, as I've previously said, nothing much changed so yeah ^_^.

[RedHenDev]

Thanks :)

(You weren't lying about the epilepsy thing!)

Added a semi-colon to line 13. Does that fix issue?

Can't see anything else at all. Only possibly line 41, changing second parameter of random to 95 instead of 96 (referring to number of katakana) to play it safe?

https://gist.github.com/RedHenDev/a70899acccc9ba91b538d76655bf291d

[justfun23]

Okay, so I've made x a global variable, renamed it and replaced it where needed and put a console.log(magic); just to see if it had any effects without the ;. As far as I know, putting a semicolon at the end of a for() loop doesn't affect much. The value of x is always 920 and it will return it in the console 2 times, as in it will show in the console once, then it will loop every single frame. I would be interesting to see how can I make the this.value() argument a global one, set it's function to a random(0, 96); and console.log it to see if it actually does something that may cause a memory leak.

Later edit # 1 : I don't know if Brackets can be used with node.js, since it has a built-in function more local server, but I found this thing for logging memory leaks called 'memwatch' which could actually be of use.

Later Edit # 2: I've played with Chrome's dev tools and I am trying to add some heap data to see if it works.

Late Edit # 3 : I've just noticed this :

Late Edit # 4 : I've added a bunch of console.log(this.symbols.size); at various points, as you will see in this screenshot :

The size of the array in the render function will increase at a rate of ~1000/s.

[emilyxxie]

This is super interesting.

It's not immediately clear to me what's causing this issue, but I just wanted to chime in and say you guys are amazing for digging so deeply into this! I'll see if I have some time in the coming weeks to try to investigate a bit on my end too.