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

学習日

2025年6月11日

名前

堀内道

自分で作った図形(コードと画像)

✅ 練習問題 1-6-1a


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

  stroke(200, 0, );  // 輪郭の色
  fill(180, 0, 0);    // 塗りつぶす色


  circle(200, 200, 200);
}
  

📷 実行結果

練習問題 1-6-b


function setup() {
  createCanvas(400, 300);
  background(0, 106, 167);

  stroke(254, 204, 0);  // 輪郭の色
  fill(254, 204, 0) ;  // 塗りつぶす色

  rect(0, 120, 400, 40);  // +
  rect(160, 0, 40, 400);

}

📷 実行結果

✅ 練習問題 1-6-1c

function setup() {
  createCanvas(400, 300);
  background(2, 82, 156)

  stroke(255, 255, 255);  // 輪郭の色
  fill(	255, 255, 255) ;  // 塗りつぶす色

  rect(0, 100, 400, 80);  // +
  rect(140, 0, 80, 400);
  
  stroke(220, 30, 53);  // 輪郭の色
  fill(220, 30, 53) ;  // 塗りつぶす色
  
  rect(0, 122, 400, 36);  // +
  rect(160, 0, 40, 300);
  
  

}

📷 実行結果

練習問題 1-6-1d


function setup() {
  createCanvas(400, 300);
  background(255, 255, 255);
  fill(255,0,0) ;  // 塗りつぶす色
  noStroke();
  
  // 大きい十字
   rect(0, 100, 400, 86);  // +
  rect(150, 0, 86, 320);
  //左上の十字
  rect(82, 40, 23, 49);  // +
  rect(72, 52, 46, 25);
  //右上の十字
  rect(282, 40, 23, 49);  // +
  rect(272, 52, 46, 25);
  //右下の十字
  rect(282, 210, 23, 49);  // +
  rect(272, 221, 46, 25);
  //左下の十字rect(272, 52, 46, 25);
  rect(82,210,23,49);//+
  rect(72, 221, 46, 25);
  
  

}

📷 実行結果

✅ 練習問題 1-6-1e


function setup(){
  createCanvas(400, 300);
  background(224, 82, 6	);

  stroke(255, 255, 255	);  // 輪郭の色
  fill(255, 255, 255	) ;  // 塗りつぶす色

  rect(0, 100, 400, 100);  // +
  
  stroke(13, 176, 43	);  // 輪郭の色
  fill(13, 176, 43	) ;  // 塗りつぶす色

  rect(0, 200, 400, 100);  // +
  
  stroke(224, 82, 6);  // 輪郭の色
  fill(224, 82, 6	) ;  // 塗りつぶす色
  
  circle(200,150,80);
}

📷 実行結果

まとめ・感想

たくさんの国旗を初めて一から自分で考えて作ってみてとても難しかったけど

(〇、〇、〇、〇);の位置がわかったら簡単にすらすらとできたので前半はめちゃ遅かったけど後半はすらすらと早く簡単にできた。

大きい丸や十字架は簡単だったけど小さい丸や小さい十字はどうやったら小さくなるのかがわからなくて大変だった。

頑張る!!!

コメントする