p5.js - random（）、height、およびwidthは定義されていませんか？

Question

私は、p5.jsを使ってキャンバスの周りにボールを跳ね返そうとしていますが、width,height、およびrandom()は定義されていないようです。 はここにすべての私のコードです：

function setup() { 
    createCanvas(640,480); 
    background(240); 
} 

var dot = { 
    x: random(width), 
    y: random(height), 
    size: 50, 
    r: 255, 
    g: 0, 
    b: 0, 
    speedX: 5, 
    speedY: 5 
}; 

function draw() { 
    background(240); 
    fill(dot.r, dot.g, dot.b); 
    ellipse(dot.x, dot.y, dot.size, dot.size); 
    if (dot.x >= 615 || dot.x <= 25) { //if the ball is out of screen horizontally 
    dot.speedX = dot.speedX * -1; 
    } 

    if (dot.y >= 465 || dot.y <= 25) { //if the ball is out of screen vertically 
    dot.speedY = dot.speedY * -1; 
    } 

    dot.x = dot.x + dot.speedX; 
    dot.y = dot.y + dot.speedY; 
} 

私にはJavaScriptのMath.randomを使用している場合は、それが正常に動作します。さらに、手動で幅と高さを数値（640と480）として入力するとうまく動作します。 p5.j​​sは自動的にheight,width,randomなどを割り当てるべきではありませんか？ 何が起こっているのですか？

Answer 1

あなたが呼ばれsetup()後まで（width、height、そしてrandom()含む）P5.jsの関数や変数を使用することはできません。これは、P5.jsがまだロードされていないために定義されていないためです。 setup()が呼び出された後、P5.jsの関数または変数への呼び出しが確実に行われていることを確認する必要があります。

dotをトップレベルに直接定義しています。これは、最初に発生し、setup()が呼び出される前に発生します。これをテストするには、の定義の隣にのコールを入れ、setup()の機能の中にコールします。基本的には

、ちょうどsetup()関数内であることをdotの初期化を移動し、この問題を解決するには：

var dot; 

function setup() { 
    createCanvas(640,480); 

    dot = { 
     x: random(width), 
     y: random(height), 
     size: 50, 
     r: 255, 
     g: 0, 
     b: 0, 
     speedX: 5, 
     speedY: 5 
    } 

    background(240); 
} 

function draw() { 
    ... 

あなたはthe P5.js FAQにこれについての詳細を読むことができます。