01-04 図形描画の基礎

学習日

2026年　２月10日

名前

中村仁

自分で作った図形（コードと画像）

練習問題1-4-1

前回作成した練習問題1-3-3 のキャンバス色を、初期値のグレーからパステルベージュ（243, 235, 216）に変更してみましょう。

 

function setup() {
createCanvas(400, 400); // キャンバスのサイズを 400×400 に設定
background(243, 235, 216); // 背景色をグレー (0:黒 〜 255:白)
circle(150, 200, 200); // 座標(200, 200)に直径200の円を描く

circle(250, 200, 200); // 座標(200, 200)に直径200の円を描く
}

練習問題1-4-2

練習問題1-4-1 のスクリプトで描いた図形を次の通りに変更しなさい。

• 塗りつぶしの色：(231, 215, 177)
• 枠線の色：キャンバスと同じ色
• 枠線の太さ：6px
  • • function setup() {
    • createCanvas(400, 400); // キャンバスのサイズを 400×400 に設定
    • background(243, 235, 216); // 背景色をグレー (0:黒 〜 255:白)
    • fill(231, 215, 177); // 塗りつぶしの色：赤
    • stroke(243, 235, 216); // 枠線の色：黄
    • strokeWeight(6); // 枠線の太さ：10px
    • circle(150, 200, 200); // 座標(200, 200)に直径200の円を描く
    • circle(250, 200, 200); // 座標(200, 200)に直径200の円を描く

練習問題1-4-3

先の練習問題の色を自分好みの色に変更しなさい。完成したら、キャンバスを右クリックして「画像を名前をつけて保存」し、PG部のSlackで先生に送信しなさい。

function setup() {
createCanvas(400, 400); // キャンバスのサイズを 400×400 に設定
background(0, 100, 255); // 背景色をグレー (0:黒 〜 255:白)
fill(0, 200, 255); // 塗りつぶしの色：赤
stroke(243, 235, 216); // 枠線の色：黄
strokeWeight(6); // 枠線の太さ：10px
circle(150, 200, 200); // 座標(200, 200)に直径200の円を描く

circle(250, 200, 200); // 座標(200, 200)に直径200の円を描く
}

まとめ・感想

（　　　）の中の一番左が赤、中央が黄色、一番右が青色に対応しているということがわかりました。fiilというやつが塗りつぶしを行うやつで、strokeweightが線の太さを変えるやつだということもわかりました。英語単語の意味を覚えることが、うまくプログラムを行えるようになるコツかもとも思いました。