p5.js 27646：キャッチされない例外TypeError：プロパティを読み取ることができません「0」未定義

Question

のIは、JavaScriptでコーディングp5.jsと、このエラーラインに出くわした：

27646: Uncaught TypeError: Cannot read property '0' of undefined

と私が何本かわかりませんJavaScriptをあまり経験していないからです。私のプロジェクトには27646行がどこにもないので、疑いもあります。ここ

は私のコードです：

var particles = []; 
    const word0 = 'p5.js', 
    word1 = 'is nice'; 
    var active, inactive; 
    var cooldown; 
    var font; 

    function preload() { 
     font = loadFont('data/LucidaSansRegular.ttf'); 
    } 

    function setup() { 
     createCanvas(600, 300); 
     active = font.textToPoints(word0, 50, 200, 200); 
     inactive = font.textToPoints(word1, 50, 200, 200); 

     cooldown = 500; 

     for (var i = 0; i < active.length; i++) { 
     particles.push(new Particle(active[i].x, active[i].y)); 
     } 
    } 

function draw() { 
     background(60); 

     noStroke(); 
     fill(255); 

     for (var i = 0; i < particles.length; i++) { 
     if (particle[i].radius < 0) { 
      particles.splice(i, 1); 
      continue; 
     } 

     if (cooldown < 0) { 
      particles[i].forceToDes(); 
     } else { 
      particles[i].fleeFromDes(); 
     } 

     particles[i].update(); 
     particles[i].show(); 
    } 

    if (cooldown < 500 && cooldown > -500) { 
     cooldown--; 
    } else { 
     cooldown++; 
    } 

    if (cooldown == -499) { 
     changeText(); 
    } 
} 

function changeText() { 
    switchActive(); 

    if (active.length == inactive.length) { 
     for (var i0 = 0; i0 < active.length; i0++) { 
      particles[i0].des = createVector(active[i0].x, active[i0].y) 
     } 
    } else if (active.length > inactive.length) { 
     for (var i1 = 0; i1 < particles.length; i1++) { 
      particles[i1].des = createVector(active[i1].x, active[i1].y); 
    } 

     for (var i2 = 0; i2 < active.length - inactive.length; i2++) { 
      var p = new Particle(active[i2].x, active[i2].y), 
      r = particles.random(); 
      p.pos = r.pos; 
      particles.push(p); 
     } 
    } else { 
     for (var i3 = 0; i3 < inactive.length - active.length; i3++) { 
     var r = floor(random(particles.length)); 
     particles[r].shrink(); 
     } 

     for (var i4 = 0; i4 < particles.length; i4++) { 
     particles[i4].des = createVector(active[i4].x, active[i4].y); 
     } 
    } 
} 

function switchActive() { 
    var temp = active; 
    active = inactive; 
    inactive = temp; 
} 

私はあなたが私を助けることができると思います:) すでにありがとうございます！

Answer 1

MCVEとしてコードを投稿し、コピーして貼り付けて実行してください。コードを実行しようとすると、ロードしようとしているフォントがないため、エラーが発生します。フォントファイルを含めるか、コードを変更してフォントファイルを必要としないようにしてください。

しかし、単にあなたのコードを見て、これは私に突き出：ここ

for (var i = 0; i < particles.length; i++) { 
    if (particle[i].radius < 0) { 

あなたはparticles配列をループするが、その後particleという変数を使用しています。これはおそらく単純なタイプミスです。

また、私はこのラインの不審なよ：

r = particles.random(); 

ここであなたがまだ定義されていない変数を設定しています。

このような複数のエラーがコードに含まれていると、通常、小さなチャンクでテストしていないことを意味します。あなたは本当に孤立して作業する習慣に入るべきです。それが完璧に働くまで、小さな部分をテストするだけです。それはまた、あなたが立ち往生した場合にMCVEを投稿することを容易にします。

Answer 2

あなたの問題は、ワード1文字列にスペースが含まれていることです。

textToPoints（）は、印刷できない文字は処理しません。

文字列をスペースで区切ってみるか、文字列を文字列に分割して後でポイント配列を結合します。