レッスン 2
基本図形を組み合わせて絵を描こう
丸や三角、四角を組み合わせて、雪だるまの絵を書いてみよう。
チャプター1このレッスンのゴール
このレッスンで完成させるものを確認しよう
チャプター2雪だるまの胴体を表示しよう
このチャプターでは、円形を描画するよ。
2. 2 写してみよう
//最初に一回だけ呼び出される初期設定
function setup() {
//キャンバスの大きさ
createCanvas(400, 500);
}
//繰り返し呼び出される処理
function draw() {
//背景の描画
background('black');
//塗りの色設定
fill('white');
//円形(胴体)
ellipse(200, 300, 200, 200);
}
コードがかけたら実行してみよう。
白い丸が表示されたらOKだよ。
2. 3 コードの解説(1−1)
//最初に一回だけ呼び出される初期設定
function setup() {
//キャンバスの大きさ
createCanvas(400, 500);
}
createCanvasでキャンバスの大きさを幅400px/高さ500pxに設定しているよ。
キャンバス要素を作成し、その寸法をピクセル単位で設定します。
値1： キャンバスの幅
値2： キャンバスの高さ
2. 4 コードの解説(1−2)
//繰り返し呼び出される処理
function draw() {
//背景の描画
background('black');
//塗りの色設定
fill('white');
//円形(胴体)
ellipse(200, 300, 200, 200);
}
backgroundで背景を黒を設定し、fillで塗りの設定し、ellipseで胴体部分に当たる円形の図形を描画しているよ。
背景に使用する色を設定します。デフォルトの背景は透明
値1: 色
図形を塗りつぶすのに使う色を設定します。
値1: 色
スクリーンに円（楕円）を描きます。幅と高さが等しい楕円形は円です。最初の2つのパラメーターで位置を設定し、3番目と4番目のパラメーターで図形の幅と高さを設定します。
値1： 楕円のx座標
値2： 楕円のy座標
値3： 楕円の幅
値4： 楕円の高さ
チャプター3雪だるまの頭を表示しよう
このチャプターでは、円形を追加で描画するよ。
3. 1 変更しよう
円形(胴体)の下に円形(頭)を追加しよう
+はコードのついかという意味なので、書かなくてOKです。
//円形(胴体)
ellipse(200, 300, 200, 200);
+ //円形(頭)
+ ellipse(200, 150, 150, 150);
}
コードが書けたら実行してみよう。
頭の部分の表示されるとOKだよ
3. 2 コードの解説
ellipse()の追加だね。
チャプター4雪だるまの眼を表示しよう
このチャプターでは、円形を追加で描画するよ。
4. 1 変更しよう
円形(頭)の下に円形(頭)を追加しよう
//円形(頭)
ellipse(200, 150, 150, 150);
+
+ //塗りの色設定と円形(目)
+ fill('black');
+ ellipse(170, 140, 20, 20);
+ ellipse(230, 140, 20, 20);
}
コードが書けたら実行してみよう。
眼の部分の表示されるとOKだよ
4. 2 コードの解説
fillで再設定してellipse()の追加だね。
チャプター5雪だるまのボタンを表示しよう
このチャプターでは、円形を追加で描画するよ。
5. 1 変更しよう
円形(頭)の下に塗りの色設定と円形(ボタン)を追加しよう
//塗りの色設定と円形(目)
fill('black');
ellipse(170, 140, 20, 20);
ellipse(230, 140, 20, 20);
+
+ //塗りの色設定と円形(ボタン)
+ fill('red');
+ ellipse(200, 260, 20, 20);
+ ellipse(200, 300, 20, 20);
+ ellipse(200, 340, 20, 20);
+
}
コードが書けたら実行してみよう。
赤色のボタンの部分の表示されるとOKだよ
5. 2 コードの解説
fillで再設定してellipse()の追加だね。
チャプター6雪だるまの口を表示しよう
このチャプターでは、四角形を追加で描画するよ。
6. 1 変更しよう
塗りの色設定と円形(ボタン)の下に塗りの色設定と四角(口)を追加しよう
//塗りの色設定と円形(ボタン)
fill('red');
ellipse(200, 260, 20, 20);
ellipse(200, 300, 20, 20);
ellipse(200, 340, 20, 20);
+ //塗りの色設定と四角(口)
+ fill('black');
+ rectMode(CENTER);
+ rect(200, 200, 30, 15);
}
コードが書けたら実行してみよう。
口の部分の表示されるとOKだよ
rectMode（CENTER）は、rect（）の最初の2つのパラメータを形状の中心点として解釈し、3番目と4番目のパラメータはその幅と高さです。
すべての角度は90度です。デフォルトでは、最初の2つのパラメータは左上隅の位置を設定し、3番目のパラメータは幅を設定し、4番目のパラメータは高さを設定します。これらのパラメータが解釈される方法はrectMode（）関数での設定により変更されます。
6. 2 コードの解説
fillで再設定してrectMode()で設定を変更して、rectで四角形を表示しているよ。
チャプター7雪だるまの鼻を表示しよう
このチャプターでは、三角形を追加で描画するよ。
7. 1 変更しよう
塗りの色設定と四角(口)の下に塗りの色設定と三角(鼻)を追加しよう
//塗りの色設定と四角(口)
fill('black');
rectMode(CENTER);
rect(200, 200, 30, 15);
+
+ //塗りの色設定と三角(鼻)
+ fill('orange')
+ triangle(190, 150, 210, 150, 200, 180);
}
コードが書けたら実行してみよう。
鼻の部分の表示されるとOKだよ
triangle(値1, 値2, 値3, 値4, 値5, 値6)
三角形は3点を結ぶことによって作成された平面です。最初の2つの引数は最初の点を指定し、中央の2つの引数は2番目の点を指定し、最後の2つの引数は3番目の点を指定します。
値1: 番号：最初の点のx座標
値2: 番号：最初の点のy座標
値3: 番号：2点目のx座標
値4: 番号：2点目のy座標
値5: 番号：3点目のx座標
値6: 番号：3点目のy座標
7. 2 コードの解説
fill()で設定を変更して、triangle()で三角形を表示しているよ。
チャプター8雪だるまの名前を表示しよう
このチャプターでは、雪だるまの下に名前を表示するよ。
「テキスト（文字）」を表示するための方法を学ぼう！
8. 1 変更しよう
塗りの色設定と三角(鼻)の下に塗りの色設定と名前を追加しよう
//塗りの色設定と三角(鼻)
fill('orange')
triangle(190, 150, 210, 150, 200, 180);
+
+ //塗りの色設定と名前
+ fill('green')
+ textAlign(CENTER);
+ textSize(20);
+ text('SNOWMAN', 200, 450);
}
コードが書けたら実行してみよう。
名前の部分の表示されるとOKだよ
値1: 水平方向の配置、LEFT、CENTER、またはRIGHT
値2: 垂直方向の配置、TOP、BOTTOM、CENTER、またはBASELINE
現在のフォントサイズを設定します。このサイズは、以降のtext（）関数の呼び出しで使用されます。フォントサイズはピクセル単位で設定。
画面にテキストを描画します。
値1 : 表示する文字列
値2 : テキストのx座標
値3 : テキストのy座標
8. 2 コードの解説
textAlign()やtextSize()で表示の設定（位置・大きさ）を変更して、text()で文字を表示しているよ。
チャプター9雪だるまの微調整しよう
このチャプターでは、線の設定を変え微調整させよう
9. 1 変更しよう
キャンバスの大きさの下に線の塗りを無効にするを追加しよう
//キャンバスの大きさ
createCanvas(400, 500);
+ //線の塗りを無効にする
+ noStroke();
//繰り返し呼び出される処理
コードが書けたら実行してみよう。
胴体と頭の境目の線画消えて表示されるとOKだよ
9. 2 コードの解説
ストローク（アウトライン）の描画を無効にします。
チャプター10完成
10. 1 チャレンジしよう
SNOWMAN の文字列を自分の名前に変えてみよう。
チャプター11チャレンジしよう
- プログラムを保存して、新しいファイルを用意しましょう。
- まるを25個並べて、パターンレイアウトに挑戦しましょう。
- 色は、原色大辞典などを参考にしてください
- 今後学習するfor文で効率よく書くことができますが、このレッスンでは使わずに挑戦してみましょう。
ヒント
- 2種類のまるの大きさを自分で決めましょう
- 小さい方の場所は、左上のものが(0,0)で、右上のものが(???,0)です。
- ???はキャンバスのサイズを確認しましょう。
- 大きい方の場所はキャンバスのたてやよこの大きさを、いくつに分けたものか考えましょう。