学習日
2026年 ６月２日
名前
中村仁
自分で作った図形（コードと画像）
練習問題3-3-1
先ほど紹介した線をfor文で描くプログラムを改造し、線の色がだんだん変わるようにしなさい。線の色は255, 0, 100から255, 250, 100まで1ループあたり25ずつ増えるようにしなさい。
function setup() {
createCanvas(300, 300);
background(220);
strokeWeight(3);
for (let k = 0; k < 10; k++)
fill(255, 25*k, 0);
for (let i = 0; i < 10; i++) {
line(0, i * 10, 100, i * 10);
}
}function setup() {
createCanvas(300, 300);
background(220);
strokeWeight(3);
for (let i = 0; i < 25; i++) {
for (let i = 0; i < 25; i++) {
stroke(255, i*25, 0);
line(0, i * 10, 100, i * 10);
}
}
}
練習問題3-3-3
次のような横10本、縦10本の格子線を描きなさい。線の太さは2ピクセルとし、線の間隔は10ピクセルとする。
function setup() {
createCanvas(300, 300);
background(220);
strokeWeight(2);
}function setup() {
createCanvas(300, 300);
background(220);
strokeWeight(2);
for (let i = 0; i < 10; i++) {
line(0, i * 20, 100, i * 20);
}
for (let i = 0; i < 10; i++) {
line(i * 10,0,i * 10, 200);
}
}練習問題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 * 20, 100, i * 20);
}
for (let i = 0; i < 10; i++) {
line(i * 10,20,i * 10, 200);
}
}練習問題3-3-5
グラフを描くときに使うグリッド線を描いてみましょう。
- キャンバスサイズ：(400, 400)
- width、heightを使うこと
- 主グリッド線（major gridlines）
- 補助グリッド線（minor gridlines）
function setup() {
createCanvas(400, 400);
background(255);
// グリッド線の描画
stroke(200);
strokeWeight(1);
// 座標軸の描画
stroke(0);
strokeWeight(1);
}function setup() {
createCanvas(400, 400);
background(255);
// 座標軸の描画{minor gridlines
stroke(0);
strokeWeight(1);
for (let i = 0; i < 10; i++) {
line(0, i * 40, 400, i * 40);
}
for (let i = 0; i < 10; i++) {
line(i * 40, 0, i * 40, 400);
}
// グリッド線の描画
stroke(0);
strokeWeight(5);
{
line(0, 200, 400, 200);
}
{
line(200, 0, 200, 400);
}
}
かんそう・まとめ
foｒ文はまずforを起き、次に変数をどれか一つ定め、その変数を設定することで繰り返しコードを実行できることがわかりました。変数の数値を変更することで線の太さや幅を変えることができるということがわかりました。