p5.js 'createGraphics()' won't let your memory go .

I've never known the p5.js 'createGraphics()' won't let go of the memory. This article describes the way to take back your memory from them.

👉 この記事は日本語でも読めます。

createGraphics() makes the browser down?

I heard this problem from the tweet of Tetsunori NAKAYAMA (@tetunori_lego).

#p5js のcreateGraphics常用する中で、すぐメモリ枯渇したりGC?走っているのか黒画になって描画失敗するの解析していたんだけど、原因は使い終わったgfxをremoveしてない件だったよう。例えば、添付のコードで盛大にリークしているみたい。PC落ちたりもしたので再現実験は注意。 pic.twitter.com/xcSc4VKVaM

— Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) December 4, 2021

It seems the same problem with one of the GitHub Issues of p5.js.

createGraphics() stays in memory, 1GB+ RAM after a while #1785

The point to fix this problem is 'remove() the p5.Graphics that are created with createGraphics() when it becomes unneeded'.

const pg = createGraphics(w, h);
pg.colorMode(RGB, 255);
pg.clear();
 .
 .
 .
image(pg, 0, 0);
pg.remove();

reference | remove() - P5.js

I fixed this problem on the JavaScript module 'Garg' that uses many 'createGraphics()'. I hope it will be nice concrete example how to solve the problem.

* Garg is the JavaScript module that generates a resembling Generativemasks.

Fix the problem on the 'Garg'

Mr. Nakayama found the same problem in the 'Garg' and kindly send me a patch to fix it. Thank you Nakayama san!

My browser was killed instantly actually when I created a large-size mask repeatedly with the 'Garg' .

function setup() {
    createCanvas(5000, 5000);
}

function draw() {
    clear();
    gg = new Garg(false, true, false);
    image(gg.createMask(0, 5000), 0, 0);
}

I applied the patch from Mr. Nakayama, then my browser lived long and well.

It's not the problem only in the 'Garg'

To begin with, the 'Garg' returns the p5.Graphics that is created with 'createGraphics()'. So fixing the code inside of the 'Garg' can't solve the whole problem.

If you write a code like this, the code will not let your memory go.

image(gg.createMask(id, size), 0, 0);

To fix the problem, you can 'remove()' the p5.Graphics like this.

let mask = gg.createMask(id, size);
image(mask, 0, 0);
mask.remove();

That is, you should use upgraded 'Garg' and write a code correctly to 'remove()' the p5.Graphics that are returned from the 'Garg'.

Upgraded Garg 0.1a

I upgraded the 'Garg' from version 0.1 to 0.1a. 'a' stands the Mr. nAkAyAmA's 'a'!

Upgraded Garg 0.1a is here. There is also 'diff' for the people who made a derivative of the 'Garg'.

Create a JavaScript module that generates a resembling Generativemasks.

Browser issue?

I found the problem still remains with the Firefox 94.0 64bit of mine. That is, the Firefox will down even with the fixed version of the 'Garg'. I've not been able to fix it yet.

The same code let the memory go with Google Chrome 96.0.4664.93 64bit. There is no problem.

Demonstration of the death

I made a demonstration program on OpenProcessing to compare the fixed and not fixed versions of the 'Garg'. If you want your browser down, try it with your own risk.
* Firefox will down even with the fixed version.

Garg the Big Eater.

It will be fun to try it with the memory usage measuring tool (ex. Task manager on Windows).

Let remove() the createGraphics() politely

The memory leak is the application killer. Let remove() the large-size p5.Graphics created with 'createGraphics()' politely.