武居寛晶
２０２６年５月３日から５月１４日
練習問題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の位置だと思います。
まだ使い方がわからないからなんとも言い難いのですが、前提と設定みたいなものだと思うので、繰り返しの中にある２番より、繰り返しの前にある１番のほうが、ほんの少しだけ軽いのかなと思いました。
コメントした後に気づきました。これは前からあったプログラムだったんですね
失態です
次のような横10本、縦10本の格子線を描きなさい。線の太さは2ピクセルとし、線の間隔は10ピクセルとする。
練習問題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);
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=2; i < 12; i++){
line(20, i * 10, 120, i * 10);
line(i * 10, 20, i * 10, 120);
}
}
練習問題3-3-5
グラフを描くときに使うグリッド線を描いてみましょう。
function setup() {
createCanvas(400, 400);
background(255);
// グリッド線の描画
stroke(200);
strokeWeight(1);
for(let minorgridlines=0; minorgridlines < 21; minorgridlines++){
line(0,minorgridlines * 20, width, minorgridlines * 20)
line(minorgridlines * 20, 0, minorgridlines * 20, height)
}
// 座標軸の描画
stroke(0);
strokeWeight(1);
line(width / 2, 0, width / 2, height);
line(0, height / 2, width, height / 2)
}