04-03 配列を使った図形描画

2026年3月4日

名前

茅野壮甫

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

✅ 練習問題 4-3-1

function setup() {
  createCanvas(500, 500);
  noFill();
  let i=0;
  for (let i=0;i<8;i++) {
    let radii=[5,10,15,23,78,143,288,450];
    stroke(radii[i],150,255);
    circle(width/2,width/2,radii[i]);
  }
}  

📷 実行結果

✅ 練習問題 4-3-2

function setup() {
  createCanvas(500, 500);
  noFill();
  let i=0;
  let radii=[5,10,15,23,78,143,288,450,500];
  for (let i=0;i<radii.length;i++) {
    stroke(radii[i],150,255);
    circle(width/2,width/2,radii[i]);
  }
}  

📷 実行結果

✅ 練習問題 4-3-3

function setup() {
  createCanvas(800,300);
  noFill();
  let sizes=[7,17,18,10,200,167,73,70];
  
   for (let i=0;i<sizes.length;i++) {
     stroke(sizes[i],150,255)
     circle(i*100,150,sizes[i])  
  }
}

📷 実行結果

✅ 練習問題 4-3-4

function setup() {
  createCanvas(800,300);
  noFill();
  let sizes=[7,17,18,10,200,167,73,70];
  let x=0;
  
   for (let i=0;i<sizes.length;i++) {
     x=x+sizes[i]/2
     stroke(sizes[i],150,255)
     fill(sizes[i],150,255,50)
     circle(x,150,sizes[i])
     x=x+sizes[i]/2
  }
}

📷 実行結果

✅ 練習問題 4-3-5

function setup() {
  x=300;
  y=x/8
  z=y/2;
  createCanvas(x,x);
  
  // 色の配列
  let palette = ["#E76F51", "#F4A261", "#E9C46A", "#2A9D8F", "#264653", "#5c374c", "#985277", "#ce6a85"];

  // ここにコードを書いてください
  
  for (let i=0;i<palette.length;i++) {
    stroke(palette[i]);
    fill(palette[i]);
    circle(z,100,y);
    z=z+y
  }
}

📷 実行結果

✅ 練習問題 4-3-6

function setup() {
  createCanvas(600, 400);
  background(245); // 背景色
  noStroke(); // 枠線なし

  // カラーパレット
  let palette = ["#264653", "#2A9D8F", "#E9C46A", "#F4A261", "#E76F51"];

  for (let i = 0; i < 100; i++) {
    fill(palette[i%palette.length]);
    let x=random(600);
    let y=random(400);
    let d=random(50);
    circle(x, y, d);
  }
}

📷 実行結果

✅ 練習問題 4-3-7

function setup() {
  createCanvas(300,300);
  background(255);
  let rainfall=[13.0,9.5,86.0,38.0,137.0,215.5,163.0,78.5,119.5,130.5,25.0,36.0];

✅ 練習問題 4-3-8

function setup() {
  createCanvas(300,300);
  background(255);
  let rainfall=[13.0,9.5,86.0,38.0,137.0,215.5,163.0,78.5,119.5,130.5,25.0,36.0];
  let grid = 20;
  stroke(200);
  strokeWeight(1);
    for(let x=grid; x<=280; x+=grid){
      line(x,-300+x,x,x+300);
    }
    for(let y=grid; y<=280; y+=grid){
      line(-300+y,y,y+300,y)
    }
  stroke(0);
  strokeWeight(1);
  line(20,0,20,280)
  line(20,280,300,280)
}

📷 実行結果

✅ 練習問題 4-3-9

function setup() {
  createCanvas(300,300);
  background(255);
  let s=0;
  let rainfall=[13.0,9.5,86.0,38.0,137.0,215.5,163.0,78.5,119.5,130.5,25.0,36.0];
  let grid = 20;
  stroke(200);
  strokeWeight(1);
    for(let x=grid; x<=280; x+=grid){
      line(x,-300+x,x,x+300);
    }
    for(let y=grid; y<=280; y+=grid){
      line(-300+y,y,y+300,y)
    }
  stroke(0);
  strokeWeight(1);
  line(20,0,20,280)
  line(20,280,300,280)
  
  stroke(0, 150, 200);
  strokeWeight(10);
  for(let i=40; i<=260; i+=grid){
    line(i,280,i,280-rainfall[s]);
    s=s+1;
 }
}

📷 実行結果

まとめ・感想

図形描画で配列を使えばずっと同じことを繰り返さず、別のものに変えることができる。

コメントする