Processingのスケッチをprocessing.jsで実行するとスタックオーバーフローしてしまう。

簡単なゲームを作ってみたのですが、表題の通りスタックオーバーフロー?みたいなエラーが出ます。

RangeError: Maximum call stack size exceeded.

と出ます。
Processingで普通に実行すると標準のフレームレートで動きます。
まだ途中ですが現在のコード量は700行です。
コードを軽くする方法ではなく、現在のコードでも実行できる方法を探しています。
p5.jsならできる、とか何かprocessing.jsを簡単に拡張できる、とかありましたら教えていただきたいです。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

原因はProcessingの実行環境であるJavaと
Processing.js（Javascript）の実行環境であるブラウザと
扱えるスタックの上限が違うためでしょう

例えば私の環境では
下記のような再帰を使用した単純な関数で
sum(10000)としても
Processingでは普通に50005000と表示されますが

Processing.jsでは引数が6500を超えた時点で
ブラウザ（Safari）に
RangeError: Maximum call stack size exceeded.
とエラーが出て結果が表示されなくなりました

Processing
1void setup()
2{
3  println(sum(10000));
4}
5
6void draw()
7{
8  
9}
10
11int sum(int n)
12{
13  if(n<=1){
14    return n;
15  }else{
16    return sum(n-1)+n;
17  }
18}

ですので問題は
「Javascriptで発生するスタックオーバーフローをいかに回避するか」
ということになります

コード自体が分からないため何とも言えませんが
まずはスタックを極端に使う
深い再帰、深いループ、複雑・大きな配列・オブジェクトなどを使用している
関数・メソッドを見直すしかないと思われます

場合によっては読み込ませているデータが
xmlやsvgなどの階層構造を持ったもので
その階層が深すぎるためエラーが発生している
ということもあるかもしれません

私がやるとしたら

まず、他のブラウザで実行してみる
draw()の中身すべてをいったんコメントアウトして実行
同様のエラーが出たら→setup()の中で使用している関数・メソッドの中から問題のあるものを特定する
同様のエラーが出なかったら→draw()の中で使用している関数・メソッドの中から問題のあるものを特定する

という感じでやって行くと思います

追記:
上記のコードをp5.jsで書き直してみたところ
sum(15000)でもスタックオーバーフローは発生しませんでした
Processing（Java）では15000にするとスタックオーバーフローとなるため
むしろp5.jsの方が扱えるスタックの上限は高いのかもしれません

ただp5.jsだと書き換えが発生するため
結構手間がかかるとは思います

pde→p5.jsのトランスレータとかあれば良いんですけどね

以下p5.js版のコードです

JavaScript
1function setup()
2{
3  console.log(sum(15000));
4}
5
6function draw()
7{
8  
9}
10
11function sum(n)
12{
13  if(n<=1){
14    return n;
15  }else{
16    return sum(n-1)+n;
17  }
18}