2

特別に定義された p5 関数がグローバルに定義された変数を参照する方法を理解できません。このような関数 (定数が p5 関数の引数をローカルに提供する) は問題なく動作します。

function setup() {

}

function draw() {
  ellipse(50, 50, 80, 80);
}

しかし、何らかの理由で、次のような楕円を描くことができません。

  var CANVAS_HEIGHT = 1024;
  var CANVAS_WIDTH = 768;
  var RADIUS = 150;
  var circleColor = 150;
  var bgColor = 50;

  function setup() {
    backgroundColor = color(bgColor);
    createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);          
  }


  function draw() {
    fill(circleColor);
    ellipse(CANVAS_WIDTH/2, CANVAS_HEIGHT/2, RADIUS*2, RADIUS*2);

  }

どうやら setup 関数は、グローバル変数を参照するキャンバスを作成します。ただし、 draw 関数はそれらを参照していないようです。ここで何が欠けていますか？助けてくれてありがとう。

4

1 に答える 1

3

関数内でそのような変数を使用することはできませんsetup()。

値を直接使用する必要があり、setup()関数内で変数を割り当てる必要があります。

  var CANVAS_HEIGHT;
  var CANVAS_WIDTH;
  var RADIUS;
  var circleColor;
  var bgColor;

  function setup() {
    backgroundColor = color(50);
    createCanvas(1024, 768);  

    CANVAS_HEIGHT = 1024;
    CANVAS_WIDTH = 768;
    RADIUS = 150;
    circleColor = 150;
    bgColor = 50;        
  }

p5.j​​s faqから:

setup() の前に p5 関数と変数を使用して変数を割り当てることができないのはなぜですか?

グローバルモードでは、p5 の変数名と関数名は、setup()、draw()、mousePressed() などの外では使用できません (これらのメソッドのいずれかによって呼び出される関数内に配置されている場合を除きます)。つまり、setup() の前に変数を宣言する場合、p5 関数を使用する場合は、setup() 内で変数に値を割り当てる必要があります。例えば：

var n;
function setup() {
  createCanvas(100, 100);
  n = random(100);
}

これの説明は少し複雑ですが、グローバル モードとインスタンス モードの両方をサポートするためのライブラリのセットアップ方法に関係しています。何が起こっているのかを理解するために、最初に p5 を含むページが (グローバル モードで) ロードされたときの順序を見てみましょう。

のスクリプトが読み込まれます。HTML ページの読み込みの数 (これが完了すると、onload イベントが発生し、ステップ 3 がトリガーされます)。p5 が開始され、すべての関数がグローバル名前空間に追加されます。問題は、p5 変数がまだ認識されていないときに、p5 が開始される前にスクリプトがロードされて評価されることです。ここでそれらを呼び出そうとすると、エラーが発生します。ただし、setup() および draw() 内で p5 関数呼び出しを使用する場合、これは問題ありません。これは、スクリプトが最初に読み込まれるときにブラウザーが関数内を検索しないためです。これは、 setup() および draw() 関数がユーザー コードで呼び出されず、定義されているだけであるため、それらの内部のものはまだ実行または評価されていないためです。

setup() 関数が実際に実行されるのは p5 が起動するまでではなく (p5 が呼び出します)、この時点で、p5 関数はグローバル名前空間に存在します。

于 2016-03-15T20:59:44.600 に答える