レッスン 16
複雑な図形を描けるようになろう
円や正方形、長方形以外にも基本的な図形を描けるようになろう
チャプター1このレッスンのゴール
このレッスンで完成させるものを確認しよう
チャプター2線を表示しよう
2. 1 はじめに
このレッスンでは、これまで学んだ円や三角形、線の描き方を復習するよ。さらに、変則的な図形の描き方も習得できるようにしているよ。今後の自分の表現の幅を広げるためにも、自由に図形が描けるようになろう！
2. 2 写してみよう
まずは、線を描画するよ。今回は座標の指定も重要になるので、座標のガイドラインもくり返し文を使って描画することにしよう。
//最初に一回だけ呼び出される初期設定
function setup() {
createCanvas(400, 400);
}
//繰り返し呼び出される処理
function draw() {
background(255);
strokeWeight(1)
stroke(0);
//ガイドライン
for (var i = 10; i < 400; i = i + 10) {
stroke(100);
strokeWeight(0.1);
line(i, 0, i, 400);
line(0, i, 400, i);
}
//ガイド数値
for (i = 0; i < 400; i = i + 50) {
textSize(8);
text(i, i, 8);
text(i, 0, i);
}
}
コードが書けたら、実行してみよう。
マス目の目安線と座標の数値が0-50-100〜と50ごとに350まで表示されたら、OKだよ。
2. 3 コードの解説(1−1)
//最初に一回だけ呼び出される初期設定
function setup() {
createCanvas(400, 400);
}
createCanvasでキャンバスの大きさを幅400px/高さ400pxに設定しているよ。
キャンバス要素を作成し、その寸法をピクセル単位で設定します。
値1： キャンバスの幅
値2： キャンバスの高さ
2. 4 コードの解説(1−2)
//繰り返し呼び出される処理
function draw() {
background(255);
strokeWeight(1)
stroke(0);
〜省略〜
}
backgroundで背景を白色、線の太さ、線の外線を設定しているよ
背景に使用する色を設定します。デフォルトの背景は透明
値1:
線、点、および図形の周囲の境界線に使用されるストローク(アウトライン)の幅を設定します。すべての幅はピクセル単位で設定されます。
図形の周りに線と境界線を描くのに使用する色を設定します。
2. 5 コードの解説(1−3)
//ガイドライン
for (var i = 10; i < 400; i = i + 10) {
stroke(100);
strokeWeight(0.1);
line(i, 0, i, 400);
line(0, i, 400, i);
}
//ガイド数値
for (i = 0; i < 400; i = i + 50) {
textSize(8);
text(i, i, 8);
text(i, 0, i);
}
}
なんども同じプログラムを書くことなく、繰り返し処理を記述できます。詳細は後ろのレッスンで習得できるよ。現在は今回の目安線や座標の数値のように繰り返し描画に使えるんだと覚えておこう
画面に線（2点間の直接パス）を描画します。4つのパラメーターを持つline（）のバージョンは、2Dで線を描画します
現在のフォントサイズを設定します。このサイズは、以降のtext（）関数の呼び出しで使用されます。フォントサイズはピクセル単位で設定。
画面にテキストを描画します。
値1 : 表示する文字列
値2 : テキストのx座標
値3 : テキストのy座標
チャプター3線を表示しよう
このチャプターでは、線の描画方法を確認するよ。
3. 1 変更しよう
ガイドラインの上に line(50, 100, 180, 30); を追加しよう
background(255);
strokeWeight(1)
stroke(0);
+
+ //ライン
+ line(50, 100, 180, 30);
//ガイドライン
追加できたら、プレビューを確認しよう。
3. 2 コードの解説
画面にテキストを描画します。
値1 : スタート位置のx座標
値2 : スタート位置のy座標
値3 : エンド位置のx座標
値4 : エンド位置のy座標
[PEND]画像差し替える
line(x1, y1, x2, y2)
チャプター4三角形を描こう
このチャプターでは、三角形の描画方法を確認するよ。
4. 1 変更しよう
ラインの下に triangle(110, 120, 180, 200, 50, 240); を追加しよう
//ライン
line(50, 100, 180, 30);
+
+ //三角形
+ triangle(110, 120, 180, 200, 50, 240);
//ガイドライン
追加できたら、プレビューを確認しよう。
4. 2 コードの解説
triangle(値1, 値2, 値3, 値4, 値5, 値6)
画面にテキストを描画します。
値1 : スタート位置のx座標
値2 : スタート位置のy座標
値3 : 2つめ位置のx座標
値4 : 2つめ位置のy座標
値5 : エンド位置のx座標
値6 : エンド位置のy座標
[PEND]画像差し替える
triangle(x1, y1, x2, y2, x3, y3)
チャプター5四辺形を描こう
このチャプターでは、四辺形の描画方法を確認するよ。
5. 1 変更しよう
三角形の下に quad(90, 260, 180, 280, 150, 360, 50, 350); を追加しよう
//三角形
triangle(110, 120, 180, 200, 50, 240);
+ //四辺形
+ quad(90, 260, 180, 280, 150, 360, 50, 350);
+
//ガイドライン
追加できたら、プレビューを確認しよう。
5. 2 コードの解説
quad(値1, 値2, 値3, 値4, 値5, 値6, 値7, 値8)
画面にテキストを描画します。
値1 : スタート位置のx座標
値2 : スタート位置のy座標
値3 : 2つめ位置のx座標
値4 : 2つめ位置のy座標
値5 : 3つめ位置のx座標
値6 : 3つめ位置のy座標
値7 : エンド位置のx座標
値8 : エンド位置のy座標
[PEND]画像差し替える
quad(x1, y1, x2, y2, x3, y3, x4 ,y4)
チャプター6四角形を描こう
このチャプターでは、四角形を確認するよ。
6. 1 変更しよう
四辺形の下に rect(220, 30, 150, 70); を追加しよう
//四辺形
quad(90, 260, 180, 280, 150, 360, 50, 350);
+ //四角形
+ rect(220, 30, 150, 70);
+
//ガイドライン
追加できたら、プレビューを確認しよう。
6. 2 コードの解説
すべての角度は90度です。デフォルトでは、最初の2つのパラメータは左上隅の位置を設定し、3番目のパラメータは幅を設定し、4番目のパラメータは高さを設定します。これらのパラメータが解釈される方法はrectMode（）関数での設定により変更されます。
値1 : スタート位置のx座標
値2 : スタート位置のy座標
値3 : スタート位置x座標からのx方向の幅
値4 : スタート位置y座標からのy方向の高さ
[PEND]画像差し替える
rect(x1, y1, width, height)
チャプター7楕円形を描こう
このチャプターでは、楕円形を確認するよ。
7. 1 変更しよう
四角形の下に ellipse(300, 180, 120, 120); を追加しよう
//四角形
rect(220, 30, 150, 70);
+ //楕円形
+ ellipse(300, 180, 120, 120);
+
//ガイドライン
追加できたら、プレビューを確認しよう。
7. 2 コードの解説
スクリーンに円（楕円）を描きます。幅と高さが等しい楕円形は正円です。最初の2つのパラメーターで位置を設定し、3番目と4番目のパラメーターで図形の幅と高さを設定します。
値1： 楕円のx座標
値2： 楕円のy座標
値3： 楕円の幅
値4： 楕円の高さ
[PEND]画像差し替える
ellipse(x1, y1, width, height)
チャプター8円弧を描こう
このチャプターでは、円弧を確認するよ。
8. 1 変更しよう
楕円形の下に arc(300, 320, 120, 120, 0, PI + HALF_PI, PIE); を追加しよう
//楕円形
ellipse(300, 180, 120, 120);
+ //円弧
+ arc(300, 320, 120, 120, 0, PI + HALF_PI, PIE);
+
//ガイドライン
追加できたら、プレビューを確認しよう。
8. 2 コードの解説
arc(値1, 値2, 値3, 値4, 値5, 値６, 値7)
画面に円弧を描きます。x、y、w、h、start、stopのみで呼び出された場合、円弧は開いたセグメントとして描画され、塗りつぶされます。
値1： 弧の楕円のx座標
値2： 弧の楕円のy座標
値3： 円弧の幅
値4： 円弧の高さ
値5： ラジアンで指定された円弧を開始する角度
値6： ラジアンで指定された円弧を終了する角度
値7： モード CHORD、PIE、OPEN
[PEND]画像差し替える
arc(x, y, width, height, start, stop, mode)
(参考) [PEND]ラジアン表の画像差し替える＋ラジアンの説明
チャプター9チャレンジしよう
ここまでの見本39
ここまで完成できたら、図形を使って何か自分の思いつく絵を表現してみよう。