目次
学習日
2025年11月26日~1月21日
名前
河西結吾
自分で作った物のコードと画像
✅ 練習問題3-3-1
線をfor文で描くプログラムを改造し、線の色がだんだん変わるようにする。線の色は255, 0, 100から255, 250, 100まで1ループあたり25ずつ増えるようにしましょう。
function setup() {
createCanvas(300, 300);
background(220);
strokeWeight(3);
for (let i = 0; i < 10; i++) {
stroke(255, i * 25, 100);
line(0, i * 10, 100, i * 10);
}
}📷 実行結果
✅ 練習問題3-3-2
strokeWeightがfor文の前にあるプログラム（サンプル1）とfor文のあとにあるプログラム（サンプル2）で違いを見つけて、どちらのプログラムの方が良いのか理由を言おう。
💡自分の考え
・サンプル1とサンプル2の違いはプログラムの「strokeWeight」の位置がfor文の前にあるか（サンプル1）とfor文の下にあるか（サンプル2）の違いがあります。
僕はサンプル1のほうがいいかなと思いました。理由はfor文の後にあると毎回線の太さを決めているけれどfor文の前なら一回決めればよいだけになるからです。
✅ 練習問題3-3-3
横10本、縦10本の格子線を描きましょう。
条件：①線の太さを2ピクセルにする。
②線の間隔を10ピクセルにする。
function setup() {
createCanvas(300, 300);
background(220);
strokeWeight(2);
for (let i = 0; i < 10; i++) {
line(0, i * 10, 100, i * 10);
line(i * 10, 0, i * 10, 100);
}
}📷 実行結果
✅ 練習問題3-3-4
練習問題3-3-3で描いた格子線は左上に寄っており、キャンバスの縁と重なっているため、縦も横も20pxだけ内側にずらす。
function setup() {
createCanvas(300, 300);
background(220);
strokeWeight(2);
for (let i = 0; i < 10; i++) {
line(20, i * 10 + 20, 120, i * 10 + 20);
line(i * 10 + 20, 20, i * 10 + 20, 120);
}
}📷 実行結果
✅ 練習問題3-3-5
グラフを描くときに使うグリッド線を描いてみましょう。
条件：①キャンバスサイズ：(400, 400)
②width、heightを使うこと
function setup() {
createCanvas(400, 400);
background(255);
// グリッド線の描画
stroke(200);
strokeWeight(1);
for (let i = 0; i < 21; i++) {
line(0, i * 20, 400, i * 20);
line(i * 20, 0, i * 20, 400);
}
// 座標軸の描画
stroke(0);
strokeWeight(1);
line(200, 0, 200, 400);
line(0, 200, 400, 200);
}📷 実行結果
まとめ・感想
・線を何回も書くときにfor文を使って短くことで、短くなっていいなと思いました。
・for文のときには、lineの文を書くときなどに、i *をしたりするので気をつけたいです。
・練習問題3-3-4で20pxだけ内側にずらすときに+20をすることが気づけなかったので、これからはしっかりこれを意識して作りたいと思いました。