レッスン1: はじめてのp5.js

🎯 このレッスンで学ぶこと

p5.jsとは何か
setup()関数とdraw()関数の役割
キャンバスの作成
背景色の設定

📖 p5.jsの基本構造

p5.jsのプログラムは、主に2つの関数で構成されます：

1. setup()関数

プログラムが始まるときに一度だけ実行される関数です。キャンバスのサイズ設定など、初期設定を行います。

2. draw()関数

setup()の後に繰り返し実行される関数です。デフォルトでは1秒間に60回実行されます。

function setup() {
    // ここに初期設定を書きます
    createCanvas(400, 300);  // 幅400px、高さ300pxのキャンバスを作成
}

function draw() {
    // ここに描画処理を書きます
    background(220);  // 背景を明るいグレーにする
}

🎨 実際に動かしてみよう！

下のコードが実際に動いています：

💡 コードの解説

createCanvas(400, 300): 幅400ピクセル、高さ300ピクセルのキャンバスを作成
background(100, 150, 200): RGB値で背景色を設定（赤100、緑150、青200）
fill(255): 図形の塗りつぶし色を白に設定（255は白、0は黒）
noStroke(): 図形の輪郭線を描かない
circle(x, y, 直径): 指定した位置に円を描く
text('文字', x, y): 指定した位置に文字を表示

💡 ヒント: RGB値は0〜255の範囲で色を指定します。

(255, 0, 0) = 赤
(0, 255, 0) = 緑
(0, 0, 255) = 青
(255, 255, 255) = 白
(0, 0, 0) = 黒

🚀 練習問題

以下のコードをコピーして、新しいHTMLファイルを作って実行してみましょう：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
</head>
<body>
    <script>
        function setup() {
            createCanvas(600, 400);
        }

        function draw() {
            // 背景色を変えてみよう！
            background(50, 100, 150);

            // 好きな場所に円を描いてみよう！
            fill(255, 200, 0);  // オレンジ色
            circle(300, 200, 100);

            // 自分の名前を表示してみよう！
            fill(255);
            textSize(20);
            textAlign(CENTER);
            text('あなたの名前', 300, 350);
        }
    </script>
</body>
</html>

チャレンジ課題

背景色を自分の好きな色に変更してみましょう
円の位置やサイズを変更してみましょう
複数の円を描いてみましょう
テキストの内容を自分の名前に変更してみましょう