学習日
2026年9月12日
名前
リゼンデス新菜
自分で作った図形（コードと画像）
✅ 練習問題 3-3-1
先ほど紹介した線をfor文で描くプログラムを改造し、線の色がだんだん変わるようにしなさい。線の色は255, 0, 100から255, 250, 100まで1ループあたり25ずつ増えるようにしなさい。
function setup() {
createCanvas(300, 300);
background(220);
strokeWeight(3);
linesuu=25
for (let i = 0; i < linesuu; i++) {
stroke(255, i * (250/linesuu), 100)
line(0, i * 10, 300, i * 10);
}
}📷 実行結果
大きくした！
✅ 練習問題 3-3-2
次の二つのプログラムの違いを見つけ、どちらのプログラムの方が良いのか理由を述べよ。理由は、記事下部のコメント機能を使って解答して下さい。
📷 実行結果
✅ 練習問題 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 < 40; i += 2) {
line (0, i * 10, 400, i * 10)
line (i * 10, 0, i * 10, 400)
}
// 座標軸の描画
stroke(0);
strokeWeight(1);
line(0, 200, 400, 200)
line(200, 0, 200, 400)
}📷 実行結果
まとめ・感想
for文を使った方が書く文が非常に短くなる。だからfor文を使う方がいい。
for文はこうやって書く。
for （初期化；条件；更新）{
繰り返す処理
}