JavaScript / p5.js / HelloWorld

まずは HelloWorld

home | p5.js 公式にとりあえず従う。

setup

https://p5js.org/download/ ここから本体をダウンロードして配置。CDNもあったが、今にもホスティングを止めそうな雰囲気あったので止めた。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title>ほげほげのページ</title>
        <script src="p5.js"></script>
        <script>
            function setup() {
                createCanvas(400, 400);
            }
 
            function draw() {
                background(220);
            }
        </script>
    </head>
    <body>
 
    </body>
</html>

このように書くと、何にもしてないのに body に勝手に灰色の四角が描画される。自動的にイベントにフックされて canvas 要素が取り付けられるらしい。こういう導入が楽になっているダケの実用性ゼロのデモ機能はあまり好きになれない。

実用で body に何にも無いものを単に1個だけ描画するなんてことは無いからである。

個別コントロール

個別にコントロールするには p5 インスタンスを作ればよいようだ。

こんな感じで書けばよいだろう。これで通常の JS と接合することができる実用的なプログラムが書けそうだ。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title>ほげほげのページ</title>
        <script src="p5.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function(e){
                const myP51 = new p5(
                    function(p){
                        p.setup = function() {
                            p.createCanvas(400, 400);
                        };
                        p.draw = function() {
                            p.background(220);
                        };
                    },
                    document.querySelector("#orediv1")
                );
                const myP52 = new p5(
                    function(p){
                        p.setup = function() {
                            p.createCanvas(200, 200);
                        };
                        p.draw = function() {
                            p.background(110);
                        };
                    },
                    document.querySelector("#orediv2")
                );
            });
        </script>
    </head>
    <body>
        <div id="orediv1"></div>
        <div id="orediv2"></div>
    </body>
</html>

javascript/p5js/helloworld.txt · 最終更新: 2021-07-08 19:53 by ore

文書の先頭へ

JavaScript / p5.js / HelloWorld

menu

書いてる野郎

JavaScript / p5.js / HelloWorld

setup

個別コントロール