レッスン2: 図形を描こう

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

📐 p5.jsの座標系

p5.jsでは、キャンバスの左上が原点(0, 0)です：

マウスをキャンバス上で動かすと座標が表示されます

🎨 基本的な図形

円 - circle()

circle(x, y, 直径)

中心座標(x, y)に指定した直径の円を描きます

楕円 - ellipse()

ellipse(x, y, 幅, 高さ)

中心座標(x, y)に楕円を描きます

四角形 - rect()

rect(x, y, 幅, 高さ)

左上座標(x, y)から四角形を描きます

正方形 - square()

square(x, y, 一辺の長さ)

左上座標(x, y)から正方形を描きます

三角形 - triangle()

triangle(x1, y1, x2, y2, x3, y3)

3つの頂点を結んだ三角形を描きます

線 - line()

line(x1, y1, x2, y2)

2点間に線を描きます

🖍️ 実際に図形を描いてみよう

🎨 色の設定

// 塗りつぶしの色を設定
fill(赤, 緑, 青);        // RGB値で指定 (0-255)
fill(グレー値);          // グレースケール (0-255)
fill(赤, 緑, 青, 透明度); // 透明度付き (透明度: 0-255)

// 輪郭線の色を設定
stroke(赤, 緑, 青);
stroke(グレー値);

// 輪郭線の太さを設定
strokeWeight(太さ);

// 輪郭線を描かない
noStroke();

// 塗りつぶしをしない
noFill();

🌈 カラフルなアート作品

💡 ヒント:
  • random(最小値, 最大値)で乱数を生成できます
  • 透明度を使うと図形を重ねて美しい効果が作れます
  • noLoop()を使うとdraw()関数を1回だけ実行できます

🚀 練習問題

課題1: 顔を描こう

円、楕円、線などを使って顔を描いてみましょう：

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(200, 220, 255);

    // 顔の輪郭
    fill(255, 220, 180);
    stroke(0);
    strokeWeight(2);
    circle(200, 200, 200);

    // 目を追加してみよう！
    // 左目
    fill(255);
    circle(/* x座標 */, /* y座標 */, /* サイズ */);

    // 右目
    circle(/* x座標 */, /* y座標 */, /* サイズ */);

    // 口を追加してみよう！
    // ヒント: arc()関数を使うと弧が描けます
    // arc(x, y, 幅, 高さ, 開始角度, 終了角度);
}

課題2: オリジナルアートを作ろう

学んだ図形を組み合わせて、自分だけのアート作品を作ってみましょう。例：

チャレンジ課題

  1. for文を使って同じ図形を繰り返し描いてみよう
  2. 色のグラデーションを作ってみよう
  3. 図形を使ってパターン模様を作ってみよう
← 前のレッスン 次のレッスン →