目次
学習日
2025年9月18日
名前
細川紗羅
自分で作った図形(コードと画像)
✅ 練習問題 3-3-1
function setup() {
greencol=0;
createCanvas(300, 300);
background(220);
strokeWeight(3);
for (let i = 0; i < 10; i++) {
stroke(250, greencol, 100);
line(0, i * 10, 100, i * 10);
greencol=greencol+25;
}
}📷 実行結果

✅ 練習問題 3-3-3
function setup() {
createCanvas(300, 300);
background(220);
strokeWeight(2);
for (let i = 0; i < 10; i++) {
line(0, i * 10, 100, i * 10);
}
for (let g = 0; g < 10; g++){
line(g * 10, 0, g * 10, 100);
}
}📷 実行結果

✅ 練習問題 3-3-4
function setup() {
createCanvas(300, 300);
background(220);
strokeWeight(2);
for (let i = 2; i < 12; i++) {
line(20, i * 10, 120, i * 10);
}
for (let g = 2; g < 12; g++){
line(g * 10, 20, g * 10, 120);
}
}📷 実行結果

✅ 練習問題 3-3-5
function setup() {
createCanvas(400, 400);
background(255);
// グリッド線の描画
stroke(200);
strokeWeight(1);
for (let i = 0; i < 20; i++) {
line(0, i * 20, 400, i * 20);
}
for (let g = 0; g < 20; g++){
line(g * 20, 0, g * 20, 400);
}
// 座標軸の描画
stroke(0);
strokeWeight(2);
line(0, 200, 400, 200);
line(200, 0, 200, 400);
}
📷 実行結果

工夫したこと
20px動かすときに、最初の時から少しずつ数を変えないといけなく、紙に書いたり頭の中で考えたりして座標についてしっかり考えて書き換えることができた。
ポイント👆
・座標を頭の中に全部入れてコードを書くのは難しいから、紙に座標を書いて「見える化」することが大事!!