目次
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;
}
}📷 実行結果

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