🧾図形描画の基礎と色の使い方（01-04）

🗓️ 学習日

2025年5月17日

👤 名前

河西香

🎨 自分で作った図形（コードと画像）

✅ 練習問題 1-4-1

前回作成した練習問題 1-3-3 のキャンバス色を、初期値のグレーからパステルベージュ（243, 235, 216）に変更してみましょう。

function setup() {
  createCanvas(400, 400);
  background(243, 235, 216);
}

📷実行結果

✅ 練習問題 1-4-2

練習問題 1-4-1 のスクリプトで描いた図形を次の通りに変更しなさい。

• 塗りつぶしの色：(231, 215, 177)
• 枠線の色：キャンバスと同じ色
• 枠線の太さ：6px

function setup() {
  createCanvas(400, 400);
  background(243, 235, 216); // パステルベージュ

  fill(231, 215, 177); // 塗りつぶし色
  stroke(243, 235, 216); // 枠線の色：背景と同じ
  strokeWeight(6); // 太さ：6px

  ellipse(200, 200, 200, 200); // 中心に円を描く
}

📷実行結果

✅ 練習問題 1-4-3

先の練習問題の色を自分好みの色に変更しなさい。完成したら、キャンバスを右クリックして「画像を名前をつけて保存」し、PG部のSlackで先生に送信しなさい。

function setup() {
  createCanvas(400, 400);
  background(240, 250, 255); // うすい水色っぽい背景

  fill(200, 220, 255); // うすい青
  stroke(240, 250, 255); // 枠線：背景と同じ
  strokeWeight(6);

  ellipse(200, 200, 200, 200);
}

📷実行結果

🛠️ じつはここでつまづいた！

• background を後ろに書いたら、図形が消えた💦
• stroke の色を背景と同じにしたら見えなくなった…
• なんでか丸じゃなくて四角になった😂

🔍 今日の学びポイント

・p5.jsで図形の色を変える方法を学びました。
・RGBの3つの数字で色が決まることがわかりました。
・図形のふち（線）と中（塗り）の色は別に設定できるのが面白かったです！

💡 自分が工夫したこと・気づいたこと

・背景と同じ色で線を描いたら、線が見えなくなって「うまく消せた」感じになって楽しかったです。
・fillとstrokeの順番を変えても、結果は同じなんだなと思いました（でも順番は見やすくしたほうがいいですね）。

テンプレ配布

下記のボタンを押して、雛形コードをコピーしたら投稿の本文にペーストしましょう。見出しの書式が設定された雛形が生成されるので、編集してレポートを書きましょう。