85609


提示コードの`///`コメント部内部のコードですがこのコードで以下のエラーが発生します。これはなぜでしょうか？`createContext()`関数の後に`let
game = Game();`というように定義しているのですが原因がわかりません。

参考サイト: [circle() is not definded on web editor · Issue #3512 ·
processing/p5.js · GitHub](https://github.com/processing/p5.js/issues/3512)  
p5ライブラリ: <https://p5js.org/>

##### エラーコード

[code]

    Game.js:94 Uncaught ReferenceError: circle is not defined
        at Puyo.Renderer (Game.js:94:9)
        at Game.Renderer (Game.js:121:19)
        at draw (Main.js:20:10)
        at p5.redraw (p5.js:14100:7)
        at p5.<anonymous> (p5.js:9144:12)
        at p5.<anonymous> (p5.js:9040:12)
        at new p5 (p5.js:9320:12)
        at _globalInit (p5.js:5602:7)
    
[/code]

##### Game.js

[code]

    "use strict"
    
    const CELL_SIZE = 25;   //ぷよサイズ
    
    
    // ################################################################
    // # 操作 クラス
    // ################################################################
    class Control
    {
    
        constructor()
        {
            this.position = new Vector(0,0);
        }
    
        Update()
        {
    
            if(keyIsDown(UP_ARROW))
            {
                
            }
            else if(keyIsDown(LEFT_ARROW))
            {
                this.position.x += -CELL_SIZE;
            }
            else if(keyIsDown(RIGHT_ARROW))
            {
                this.position.x += CELL_SIZE;
            }
        }
    
    
        getPosition()
        {
            return this.position;
        }
    
    }
    
    // ################################################################
    // # ぷよ クラス
    // ################################################################
    class Puyo
    {
        
        getColor(rand)
        {
    
    
        }
    
        constructor()
        {        
            this.rand = random(5);
            
            this.position = new Vector(0,0);        //座標
        }
    
        setPosition(pos)
        {
            this.position = pos;
        }
    
    
    
        Renderer() 
        {
            
            if(this.rand == 0)
            {
                fill(255,0,0);
            }
            else if(this.rand == 1)
            {
                fill(0,255,0);
            }
            else if(this.rand == 2)
            {
                fill(0,0,255);
            }
            else if(this.rand == 3)
            {
                fill(255,255,0);
            }
            else if(this.rand == 4)
            {
                fill(128,0,128);
            }
    
    /////////////////////////////////////////////////////////////////////////
            noStroke();
            circle(this.position.x,this.position.y,CELL_SIZE);
    /////////////////////////////////////////////////////////////////////////
        }
    }
    
    
    
    // ################################################################
    // # ループ クラス
    // ################################################################
    class Game
    {
        
    
        constructor()
        { 
            this.puyo = new Puyo();
            this.control = new Control();
        }
    
        Update()
        {
            this.puyo.setPosition(this.control.getPosition());
        }
    
        Renderer()
        {
            this.puyo.Renderer();
            //this.puyo.Renderer();
            //fill(color(0,255,0,255));
            //noStroke();
            //circle(this.position.x,this.position.y,CELL_SIZE);
        }
        
    
    }
    
[/code]

##### index.html

[code]

    <!DOCTYPE html>
    <html lang=ja>
        <head>
            <meta charset="utf-8">
            <title>puyopuyo</title>
            <body>   
                <link rel="stylesheet" href="style.css">
    
                <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.js"></script>
                
                <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]

##### Main.js

[code]

    let game;
    
    // 初期化
    function setup()
    {
        createCanvas(640,480);
        
        game = new Game();
    }
    
    
    
    // 描画
    function draw()
    {
        background(127);        //背景色
    
        game.Update();
        game.Renderer();
    }
    
[/code]


CC BY-SA 4.0
2022-01-10T12:54:47.763
85607
2022-01-11T00:48:47.890
2022-01-11T00:44:22.833
3060
question
javascript
p5ライブラリの関数が未定義になる原因が知りたい。


参照している Issue での説明を見る限り、`circle()` をサポートするのは **v0.7.3** 以降のようですが、あなたのコードでは
v0.5.6 が指定されています。まずはこの部分を確認してみてください。


CC BY-SA 4.0
2022-01-11T00:48:47.890
85609
2022-01-11T00:48:47.890
3060
85607
answer