p5.jsインスタンスモード：未定義のプロパティ '0'を読み取ることができません

Question

完全に機能するグローバルモードのスケッチがあります。3D/WEBGLスケッチの横に並んでいるので、インスタンスモードの別のドキュメントに取り込みます。

Pulse（）の新しいインスタンスをプッシュするたびに、draw（）のfor（）ループから返された "undefinedのプロパティ '0'を読み取れません。私はそれがグローバルモードでは完全に動作すると言っていたので、ここでは構文を間違えていなければなりませんが、p5インスタンスモードでオブジェクトを使用する例は見つかりません。なぜアレイから読み込めないのか、それがなぜプッシュできないのか分かりません。

p5.jsインスタンスモードでオブジェクト配列にプッシュするときの構文は非常にわかりませんでした。私はs.pulses.push（新しいs.Pulse（））とs.pulses.s.push（新しいs.Pulse（））のバリエーションを試しましたが、これらのプッシュエラーが返されました。以下のコードはプッシュしているようですが、配列は読み取れません。

ご協力いただきありがとうございます。ありがとうございます。

var twoDee = function(s) { 
var cnv; 
var cnvWidth, cnvHeight; 
var pulsesAmount; 
var pulses = []; 

s.setup = function() { 
    s.cnvWidth = s.windowWidth; 
    s.cnvHeight = document.getElementById('sketch-wrap-bleed-bottom').offsetHeight; 
    s.cnv = s.createCanvas(s.cnvWidth, s.cnvHeight, s.P2D); 
    s.cnv.parent("sketch-wrap-bleed-bottom"); 
    s.pulsesAmount = 0; 
} 

s.draw = function() { 
    s.background(40); 
    for (var i = 0; i < s.pulsesAmount; i++) { 
     s.pulses[i].move(); // problem here 
     s.pulses[i].display(); 
    } 

    s.noFill(); 
    s.stroke(255); 
    s.ellipse(s.mouseX, s.mouseY, 30, 30); 
} 

s.Pulse = function() { 
    this.size = 20; 
    this.grow = 0.5; 
    this.xPos = s.width/2 + 200; 
    this.yPos = s.height/2; 
    this.opacity = 255; 

    this.move = function() { 
     this.size += this.grow; 
     this.opacity = map(this.size, 0, 60, 255, 0); 
    } 

    this.display = function() { 
     s.noFill(); 
     s.strokeWeight(2); 
     s.stroke(242, 202, 102, this.opacity); 
     s.translate(this.xPos, this.yPos); 
     s.ellipse(0, 0, this.size, this.size); 
     s.translate(-this.xPos, -this.yPos); 
    } 
} 

s.mousePressed = function() { 
    s.pulsesAmount += 1; 
    s.pulses = s.push(new s.Pulse()); 
} 

}

Answer 1

あなただけmouseXまたはsetup()関数のように、P5.jsから来るもののためs変数を使用する必要があります。

pulsesとpulsesAmount変数のように宣言しているものについては、変数sを使用しないでください。だからあなたのforループは次のようになります。

for (var i = 0; i < pulsesAmount; i++) { 
    pulses[i].move(); 
    pulses[i].display(); 
} 

編集：をあなたはその問題を修正した後、あなたはまだ別の問題を抱えています。この行は意味がありません。

pulses = s.push(new Pulse()); 

より良いpush()機能が何をするのか理解するためにthe P5.js referenceを参照してください。それは配列とは関係ありません。

append()の機能を考えているかもしれませんが、あなたの構文はオフです。配列に追加する値とともに関数に配列を渡す必要があります。このように：あなたはまだいくつかの他の問題（のようなmap()機能を取得するs変数を使用していない）を持っていますが、これはあなたが正しい方向に軌道に乗る必要があることを修正した後

s.append(pulses, new Pulse()); 

。