なぜ変数はDrawで動作しますが、コードの上部では機能しませんか？

Question

私はプログラミングに慣れていません。現在、p5.jsを学習しており、変数についての質問があります。したがって、上部の変数は機能しませんが、描画関数内に配置されます。なぜこの場合ですか？

注：コードのスクリーンショット。

Answer 1

setup()が呼び出されるまで内部p5.js関数または変数を使用することはできません。詳細はthe P5.js FAQにあります。

これについての説明は少し複雑ですが、それは、ライブラリは、グローバルと インスタンスの両方のモードをサポートするために設定した方法で を行う必要があります。何が起きているのかを理解するために、まずp5を持つページがロードされたとき（グローバルモードで）、 の順番を見てみましょう。

1. スクリプトが読み込まれています。

2. HTMLページが読み込まれています（これが完了すると、onloadイベントが発生し、手順3がトリガーされます）。

3. p5が起動され、すべての機能がグローバル名前空間に追加されます。

だから問題は、P5が が開始される前に、それはまだP5変数を認識しないときのスクリプトは、ロードされ、評価されていることです。 ここに電話しようとすると、エラーが発生します。しかし、 ブラウザでは、スクリプトが最初に読み込まれたときに、 ブラウザが関数を参照しないため、setup（）およびdraw（）内でp5 関数呼び出しを使用すると問題ありません。 がロードされています。これは、setup（）およびdraw（）関数が がユーザコードで呼び出されていないために定義されているため、 の中のものはまだ実行または評価されていません。 P5は、セットアップ（）関数は（P5はあなたのためにそれを呼び出す）、実際に 実行されるように起動され、この時点では、P5関数はグローバル名前空間に を存在するようになるまで

そうではありません。