関数を自分でつくってみよう

チャプター1このレッスンのゴール

このレッスンで完成させるものを確認しよう

チャプター2顔をキャンバスの中心に描いてみよう

2. 1 このレッスンの目標

このレッスンでは基本図形を組み合わせた図形を1つ描き、それらを好きな場所で描けるように関数という概念を理解することを目標とします。

2. 2 写してみよう

キャンバスに、丸と四角を使って顔を描いてみます。rectMode(CENTER)にしておきましょう。キャンバスの大きさは、少し縦長にしています。

function setup() {
  createCanvas(400, 600)
  rectMode(CENTER);
  noFill();
  strokeWeight(3);
}

function draw() {
  background(0);
  stroke(255);
  
  //中心に描く
  //目
  rect(200-20, 200-10, 20, 20);
  rect(200+20, 200-10, 20, 20);
  //口
  rect(200,200 + 20 ,10,10);
  //顔
  ellipse(200,200,100,100);
  
}

コードを実行して、次のようになっていればOKです。

チャプター3好きな場所に描けるようにしよう

次に、顔を自分の好きな場所に描けるようにします。「顔を描く、x座標が150、y座標が400に」という処理を描けるようになることが目標です。

]

3. 1 変更しよう

draw関数の外に、関数facePrintをつくります。

function setup() {
  createCanvas(400, 600)
  rectMode(CENTER);
  noFill();
  strokeWeight(3);
}

function draw() {
  background(0);
  stroke(255);
  
  //中心に描く
  //目
  rect(200-20, 200-10, 20, 20);
  rect(200+20, 200-10, 20, 20);
  //口
  rect(200,200 + 20 ,10,10);
  //顔
  ellipse(200,200,100,100);
  
}

+ function facePrint(x,y){
+ //目
+ rect(x-20, y-10, 20, 20);
+ rect(x+20, y-10, 20, 20);
+ //口
+ rect(x,y + 20 ,10,10);
+ //顔
+ ellipse(x,y,100,100);
+}

コードがかけたら実行してみましょう。facePrintという関数を作っただけなので何も変わりません。顔を描く場所を指定しましょう。

function setup() {
  createCanvas(400, 600)
  rectMode(CENTER);
  noFill();
  strokeWeight(3);
}

function draw() {
  background(0);
  stroke(255);
  
  //中心に描く
  //目
  rect(200-20, 200-10, 20, 20);
  rect(200+20, 200-10, 20, 20);
  //口
  rect(200,200 + 20 ,10,10);
  //顔
  ellipse(200,200,100,100);
  
+  //好きな場所に描く
+  facePrint(150,400)
+  facePrint(250,400)

}

function facePrint(x,y){
  //目
  rect(x-20, y-10, 20, 20);
  rect(x+20, y-10, 20, 20);
  //口
  rect(x,y + 20 ,10,10);
  //顔
  ellipse(x,y,100,100);
}

コードがかけたら実行してみましょう。次のように(150,400)の位置、(250,400)の位置に顔がかけていればOKです。

3. 2 コードの解説

「顔を描く、（x,y）の位置に」という命令を関数としてまとめました。そのため、

facePrint(150,400);
facaPrint(250,400);

と書くだけで、指定した位置に顔を描くことができています。

関数のつくりかた

関数のつくり方は次の通りです。

function 関数名(引数がある場合はカンマ区切りで){
 //まとめたい処理をここに書く
 //引数として指定した変数をここに書く
}

facePrint関数の解説

function facePrint(x,y){
  //目
  rect(x-20, y-10, 20, 20);
  rect(x+20, y-10, 20, 20);
  //口
  rect(x,y + 20 ,10,10);
  //顔
  ellipse(x,y,100,100);
}

引数にx,yを使っているため、facePrint(150,400)は、次のように書くのと同じ意味になります。

  //目
  rect(150-20, 400-10, 20, 20);
  rect(150+20, 400-10, 20, 20);
  //口
  rect(150,400 + 20 ,10,10);
  //顔
  ellipse(150,400,100,100);

関数は図形の組み合わせをまとめるだけではなく、もっと応用することができます。また、あとのレッスンで説明します。

チャプター4チャレンジしよう

これまで学んだことを組み合わせてみよう。

4. 1 完成形

次の完成形を参考に、自分でコードを描いてみよう

4. 2 チャレンジ1:マウスについてくるようにしよう

顔が、マウスについてくるようにしよう

4. 3 チャレンジ2:くり返し描いてみよう

forの二重ループに挑戦しよう。

4. 4 チャレンジ3:ランダムな場所に描いてみよう

空いているスペースにランダムで顔が出現するようにしよう

チャプター5チャレンジしよう2

好きな図形の組み合わせを関数にして、絵を描いてみよう

5. 1 例）チューリップの図形描画