学習日
2026年 ２月17日
名前
中村仁
自分で作った図形（コードと画像）
ellipse() を使うと、楕円を描くことができます。
ellipse(x, y, w, h);
x, y→ 楕円の中心の座標w→ 楕円の幅h→ 楕円の高さ
幅と高さを同じにすれば正円を描くこともできる。（circle()の代用）
楕円の描画（ellipse）
function setup() {
createCanvas(400, 400); // キャンバスのサイズを 400×400 に設定
background(220); // 背景色をグレー (0:黒 〜 255:白)
ellipse(50, 100, 150, 200); // 座標(50, 100)に幅150、高さ200の楕円を描く
}
四角形の描画（rect）
ect() を使うと、長方形を描くことができます。
rect(x, y, w, h);
x, y→ 四角形の左上の座標w→ 幅h→ 高さ
function setup() {
createCanvas(400, 400); // キャンバスのサイズを 400x400 に設定
background(220); // 背景色をグレー (0:黒 〜 255:白)
rect(100, 100, 150, 200); // 座標(50, 100)に幅150、高さ200の楕円を描く
}
三角形の描画（triangle）
triangle() を使うと、三角形を描くことができます。
triangle(x1, y1, x2, y2, x3, y3);
x1, y1→ 1つ目の点の座標x2, y2→ 2つ目の点の座標x3, y3→ 3つ目の点の座標
function setup() {
createCanvas(400, 400); // キャンバスのサイズを 400x400 に設定
background(220); // 背景色をグレー (0:黒 〜 255:白)
triangle(100, 300, 200, 100, 300, 300); // 指定した３点を結ぶ三角形を描く
}練習問題1-5-1
次の作品（仙厓 義梵：◯△□）のような図形を描きなさい。
function setup() {
createCanvas(400, 400); // キャンバスのサイズを 400×400 に設定
background(220); // 背景色をグレー (0:黒 〜 255:白)
ellipse(325, 200, 150, 200); // 座標(50, 100)に幅150、高さ200の楕円を描く
rect(5, 100, 150, 200); // 座標(50, 100)から右下に幅150、高さ200の長方形を描く
triangle(100, 300, 200, 100, 300, 300); // 指定した３点を結ぶ三角形を描く
}
テキストの描画（text）
text() を使うと、画面に文字を表示できます。
text(s, x, y);
s→ 描画する文字x, y→ 文字の位置まとめ・感想
まとめ・感想
円や四角や三角を書くにはellipse、rect、triangleというコードを使えば書くことができるのがわかりました。図形や文字を書くときは、書くもの→（）→（）内に座標や線の太さや色という順にコードを作ると、いろいろな図形や文字をかけるようになることがわかりました。