85872


提示コードのコメント部内部のコードですがなぜグローバル変数をp5ライブラリの関数`color()`で初期化しようとすると下記のエラーが出て`constructor`で初期化するとエラーが出ないのでしょうか？そもそも出来ないのでしょうか？  
参考サイトを参考にサンプルコードを入れて色々実験しましたが上手くいきません。

##### 参考サイト

<https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-
variables-using-p5-functions-and-variables-before-setup>

##### Console

[code]

    Uncaught ReferenceError: color is not defined
        at Game.js:17:19
    (anonymous) @ Game.js:17
    Main.js:9 Uncaught (in promise) ReferenceError: Game is not defined
        at setup (Main.js:9:7)
        at p5._setup (p5.js:62985:27)
        at p5._start (p5.js:62908:25)
        at new p5 (p5.js:63261:22)
        at _globalInit (p5.js:62189:17)
    
[/code]

##### Game.js

[code]

    const STAGE_WIDTH = 10;
    const STAGE_HEIGHT = 23;
    
    const STAGE_OFFSET_WIDTH = 200;
    const STAGE_OFFSET_HEIGHT = 150;
    
    const CELL = 30;
    const DONW_SPEED = 5;
    
    const START_POSITION_X = 3;
    const START_POSITION_Y = 3;
    
    
    
    let t;
    /////////////////////////////////////////////////////////////////
    const ColorCode = [
    //      [0,0,0],          //背景
    color(0,0,0),
          [255,255,255],    //壁
    
          [0,255,255],      //水色
          [255,255,0],      //黄色    
          [0,128,0],        //緑    
          [255,0,0],        //赤
          [0,0,166],        //ネイビー
          [255,166,0],      //オレンジ
          [128,0,128],      //紫      
    ];
    ///////////////////////////////////////////////////////////////
    //ブロック
    const Block = 
    [
                [
                      [1,1,1,1],
                      [0,0,0,0],
                      [0,0,0,0],
                      [0,0,0,0],
                ],
    
                [
                      [1,1,0,0],
                      [1,1,0,0],
                      [0,0,0,0],
                      [0,0,0,0],
                ],
    
                [
                      [0,1,1,0],
                      [1,1,0,0],
                      [0,0,0,0],
                      [0,0,0,0],
                ],
    
                [
                      [1,1,0,0],
                      [0,1,1,0],
                      [0,0,0,0],
                      [0,0,0,0],
                ],
    
                [
                      [1,0,0,0],
                      [1,1,1,1],
                      [0,0,0,0],
                      [0,0,0,0],
                ],
    
                [
                      [0,0,0,1],
                      [1,1,1,1],
                      [0,0,0,0],
                      [0,0,0,0],
                ],
    
                [
                      [0,1,0,0],
                      [1,1,1,0],
                      [0,0,0,0],
                      [0,0,0,0],
                ],
    
    ];
    
    // ################################################################
    // # stage クラス
    // ################################################################
    class Stage
    {
          constructor()
          {
    /////////////////////////////////////////////////////////////
              t = color(0,0,0);  
    //////////////////////////////////////////////////////////////
                //ステージ
                this.stage = 
                [
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,0,0,0,0,0,0,0,0,1],
                      [1,1,1,1,1,1,1,1,1,1]
                ]
          }
    
          // ################################ ラインを削除 ################################ 
          // ################################ Update ################################ 
          Update()
          {
                
          }
    
          // ################################ Renderer ################################ 
          Renderer()
          {
                
          }
    
          
    }
    
    
[/code]

##### Main.js

[code]

    /////////////////
    new p5();
    /////////////////
    let game =  new Game();;   //基底ループ
    
    //初期化
    function setup()
    {
          createCanvas(1000,800); //キャンバスサイズ
          frameRate(60);
    }
    
    //描画
    function draw()
    {
          background(127);        //背景色
    
          game.Update();
          game.Renderer();
    
    
          frameRate(60);
    
    }
    
    
    
    
[/code]

##### index.html

[code]

    <!DOCTYPE html>
    <html lang=ja>
          <head>
                <meta charset="utf-8">
                <title>Tetris</title>
                <body>
                      <link rel="stylesheet" href="style.css">
                      
                      <script src=../p5/p5.js></script>
    
    
                      <!-- ユーティリティ -->
                      <script src=../Utility/Math.js></script>
                      <script src=../Utility/Vector.js></script>
                      <script src=../Utility/Collision.js></script>
                      
    
                      <script src="Script/Game.js" ></script>
    
                      <script src="Script/Main.js" ></script>
                </body>
          </head>
    </html>
    
[/code]


CC BY-SA 4.0
2022-01-15T03:44:13.087
85707
2022-01-23T03:13:20.760
2022-01-20T06:48:35.230
3475
question
javascript
グローバル変数をライブラリ関数を使って初期化する方法が知りたい


`setpu()`を読み出す前にp5の関数が使えない理由は下記に記載されています。

[Why can't I assign variables using p5 functions and variables before
`setup()`?](https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-
i-assign-variables-using-p5-functions-and-variables-before-setup)

上記に記載の通り、p5の関数はp5.jsのスクリプトを読み込んだだけでは有効になりません。次の段階を経る必要があります。

  1. p5.jsのスクリプトを読み込みます。
  2. HTMLページの読み込みが完了します。
  3. p5が開始され、p5の関数がグローバルに使用できるようになります。

`setup()`は3.のp5開始後に読み出されるため、`step()`が読み込まれる時点ではp5の関数が使用できるようになっているという仕組みです。しかし、関数の外側の変数の初期化処理は、そのスクリプトが読み込まれた時点でされます。それは、3.の処理の前であるため、変数の初期化処理にp5の関数を使用できません。

解決策は二つです。

  1. 関数の外側の変数の初期化は`setup()`内で行う。
  2. スクリプトの最初にp5を手動で開始(`new p5();`を最初に追加)する。

最初のリンクにあった記事の最初のコードが1.の方法、次のコードが2.の方法になります。単純に、p5の関数が`setup()`の呼び出しに関わらず、使えるようにしたいという場合は、2.の方法を使うときでしょう。なお、2.の方法を使うと"p5.js
seems to have been imported multiple times. Please remove the duplicate
import"という警告が表示されますが、期待通りに動作するはずです。


CC BY-SA 4.0
2022-01-23T03:13:20.760
85872
2022-01-23T03:13:20.760
7347
85707
answer