目次
学習日
2025年9月30日
名前
飯田梨花
自分で作った図形（コードと画像）
✅ 練習問題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のところの位置が違います。サンプル１のほうが良いと思います。理由は、サンプル１では、最初から太さが決まっていますが、サンプル２では、線を書くたびに太さを設定されるようになっていて、線の太さは変わらないからです。（また、strokeWeightが上にあったほうが自分的にわかりやすいからです。）
✅ 練習問題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, 20+i * 10, 120, 20+i * 10);
line(20+i * 10, 20, 20+i*10, 120)
}
}📷 実行結果
✅ 練習問題3-3-5
グラフを描くときに使うグリッド線を描いてみましょう。
function setup() {
createCanvas(400, 400);
background(255);
// グリッド線の描画
stroke(200);
strokeWeight(1);
for( let i = 0 ; i < 19 ;i++){
stroke(200);
if ( i == 9 ){
stroke(0);
}
// else{
// stroke(200);
// }
line(0, 20 + i * 20, 400, 20 + i * 20);
line(20 + i * 20, 0, 20 + i * 20, 400);
}
// 座標軸の描画
// stroke(0);
// strokeWeight(1);
// line(0, 200, 400, 200);
// line(200, 0, 200, 400);
}📷 実行結果
まとめ・感想
・ i が０のときから始まっているので、線を１０本引くなら i は９にしないといけないとわかりました。
・最初に stroke を違う命令で書いてしまい、まよってしまったので、次からは気をつけます。
fill は、塗りつぶしをする。 strokeは、線の色を変える。という意味。
・最後の練習問題3-3-5で、if文を使って１０本目だけを太くしてみると、１１本目からは太くしたところの上に線が重なるので、太い線より上に線が書かれてしまいました。やっぱり最後にグレーの線の上に重ねて黒い線を書くほうが簡単でわかりやすいと思いました。