p5.js

01-06 いろいろな図形を描こう

Posted on by rittan-apple / 0件のコメント

学習日

2025年5月20日~6月3日

名前

飯田　梨花

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

✅ 練習問題1-6-1a

各国の国旗をデザインしなさい。（日本）

function setup() {
  createCanvas(600,400);
  background(255,255,255);
  
  stroke(188,0,45);
  fill(188,0,45);
  
  circle(300,200,240);  
}

📷 実行結果

✅ 練習問題1-6-1b

function setup() {
  createCanvas(640, 400);
  background(0,106,167);
  
  stroke(254,204,0)
  fill(254,204,0)
  
  rect(0, 160, 640, 80);
  rect(200,0,80,400)
}

📷 実行結果

✅ 練習問題1-6-1c

function setup() {
  createCanvas(500, 360);
  background(2,82,156);
  
  stroke(255,255,255)
  fill(255,255,255)
  
  rect(0, 145, 640, 70);
  rect(145, 0, 70, 400);
  
  stroke(220,30,53)
  fill(220,30,53)
  
  rect(0, 160, 640, 40);
  rect(160, 0, 40, 400);
}

📷 実行結果

✅ 練習問題1-6-1d

function setup() {
  createCanvas(600,  400);
  background(255, 255, 255);
  
  stroke(255, 0, 0);
  fill(255, 0, 0);
  
  rect(0, 160, 600, 80); //横の赤い線
  rect(260, 0, 80, 400); //縦の赤い線
  
  rect(80, 60, 100, 40); //左上　横
  rect(110, 30, 40,100); //左上　縦
  
  rect(420, 60, 100, 40); //右上　横
  rect(450, 30, 40, 100); //右上　縦
  
  rect(80, 300, 100, 40); //左下　横
  rect(110, 270, 40, 100); //左下　縦
  
  rect(420, 300, 100, 40); //左下　横
  rect(450, 270, 40, 100); //左下　縦
}

📷 実行結果

✅ 練習問題1-6-1e

function setup() {
  createCanvas(600, 400);
  background(255, 255, 255);
  
  stroke(224, 82, 6);
  fill(224, 82, 6);
  
  rect(0, 0, 600, 130); 
  circle(300, 200, 120);
  
  stroke(13, 176, 43);
  fill(13, 176, 43);
  
  rect(0, 270, 600, 130);
  
}

📷 実行結果

まとめ・感想

・各国旗のRGBを調べたり、比率を調べたりしてすこしこだわってやりました。同じ色にもたくさんの色があって、おもしろかったです。

・図形のふちの色を図形の中の色と同じにしないと、ふちがついてしまうため気を付けてやるといいと思いました。

コメントする