雑記

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

Posted on by kageyama / 0件のコメント

学習日

2025年6月17～24日

名前

中谷颯

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

✅ 練習問題 1-6-1

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

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

  rect(10, 50, 100, 20);  // +
  rect(50, 10, 20, 100);

  rect(150, 50, 100, 20);  // ÷
  circle(200, 20, 30);
  circle(200, 100, 30);
}

📷 実行結果

国旗のデザイン

✅ 日本


function setup() {
  createCanvas(270, 170);
  background(220);

  stroke(255, 255, 255);  
  fill(255, 255, 255);    

  rect(30, 20, 200, 130);  

  stroke(255, 0, 0)
  fill(255, 0, 0);
  
  circle(130, 85, 70);
}

📷実行結果

✅ スウェーデン

function setup() {
  createCanvas(270, 170);
  background(220);

  stroke(0, 106, 167);  
  fill(0, 106, 167);    

  rect(30, 20, 200, 130);  

  stroke(254, 204, 0)
  fill(254, 204, 0);
  
  rect(30, 70, 200, 25);
  
  stroke(254, 204, 0)
  fill(254, 204, 0);
  
  rect(90, 20, 25, 130);
}

📷実行結果

✅アイスランド

function setup() {
  createCanvas(270, 170);
  background(220);

  stroke(2, 82, 156);  
  fill(2, 82, 156);    

  rect(30, 20, 200, 130);  

  stroke(255, 255, 255)
  fill(255, 255, 255);
  
  rect(30, 70, 200, 30);
  
  stroke(255, 255, 255)
  fill(255, 255, 255);
  
  rect(95, 20, 30, 130);
  
  stroke(220, 30, 53)
  fill(220, 30, 53);
  
  rect(103, 20, 15, 130);
  
  stroke(220, 30, 53)
  fill(220, 30, 53);
  
  rect(30, 78, 200, 15);
}

📷実行結果

✅ジョージア

function setup() {
  createCanvas(270, 170);
  background(220);

  stroke(255, 255, 255);  
  fill(255, 255, 255);    

  rect(30, 20, 200, 130);  

  stroke(255, 0, 0)
  fill(255, 0, 0);
  
  rect(65, 110, 15, 30);
  
  stroke(255, 0, 0)
  fill(255, 0, 0);
  
  rect(65, 30, 15, 30);
  
  stroke(255, 0, 0)
  fill(255, 0, 0);
  
  rect(110, 20, 30, 130);
  
  stroke(255, 0, 0)
  fill(255, 0, 0);
  
  rect(30, 70, 200, 30);
  
  stroke(255, 0, 0)
  fill(255, 0, 0);
  
  rect(173, 110, 15, 30);
  
  stroke(255, 0, 0)
  fill(255, 0, 0);
  
  rect(173, 30, 15, 30);
  
  stroke(255, 0, 0)
  fill(255, 0, 0);
  
  rect(110, 20, 30, 130);
  
  stroke(255, 0, 0)
  fill(255, 0, 0);
  
  rect(30, 70, 200, 30);
  
  stroke(255, 0, 0)
  fill(255, 0, 0);
  
  rect(165, 117, 30, 15);
  
  stroke(255, 0, 0)
  fill(255, 0, 0);
  
  rect(165, 37, 30, 15);
  
  stroke(255, 0, 0)
  fill(255, 0, 0);
  
  rect(58, 37, 30, 15);
  
  stroke(255, 0, 0)
  fill(255, 0, 0);
  
  rect(58, 117, 30, 15);
}

📷実践結果

✅ニジェール共和国

function setup() {
  createCanvas(270, 170);
  background(220);

  stroke(255, 255, 255);  
  fill(255, 255, 255);    

  rect(10, 10 ,200, 150);
  
  stroke(224, 82, 6);  
  fill(224, 82, 6);    

  rect(10, 10 , 200, 50);
  
  circle(105, 85, 40)
  
  stroke(13, 176, 43);  
  fill(13, 176, 43);    　

  rect(10, 110 , 200, 50); 
}

📷実行結果

まとめ

・国旗一つ一つの色を調べて塗ることができた。

・どの位置が調度いいかを考えて国旗を作ることができた。

・５－１でやったことを生かして作ることができた。

・図形のコードのスペルを前よりも覚えることができた。

感想

・国旗一つ一つの形を考えながらコードを組むのには少し時間がかかってしまったけど、例題に似た国旗を作ることができたので良かった。

・あまり自分の知らない国旗を作るのも楽しかった。

・前やったことを振り返ることができたのでよかった。

コメントする