フロントエンド

プログラムの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(7)【P5.js】

プログラミングを始めた頃に、
よくわからないと思っていたものの一つに『関数(かんすう)』があります。

『PHP』でも『JavaScript』でも『PHP』でも『Python』でも
ほとんどのプログラミング言語に備わっている機能が『関数』です。

遊ぶようにプログラミングが出来る『クリエイティブコーディング』でももちろん

『関数』を使えるかどうかで表現の幅がぐーーんと変わってくます。

一方、『関数』はどうも苦手・・っという人も多いと思います。

アオキ
僕も最初はなかなか使いこなせませんでした。

そこで今回は『関数』についてまとめてみることにしました。

アオキ
細かいところははしょっていますのでぜひ寛大な心でお読みください。
Sponsored link

プログラミングの関数をわかりやすく自動販売機に例えてみる

みんな大好き自動販売機。

お金を入れて、好きな飲み物をポチっと押すと、

ガシャーンという音とともに、飲み物と、お釣りがでてきます。

これが『関数』です。

アオキ
ざっくりな説明ですんません・・けどこれが『関数』なんですよね・・

『関数』は大きく分けて3つの要素をもっています。

  • 入力(インプット)
  • ゴニョゴニョ(処理)
  • 出力(アウトプット)

自動販売機の場合はこんな流れになります。

  • お金をいれる・飲み物を選ぶ・・入力(インプット)
  • 選ばれた飲み物を運ぶ・お釣りを計算する・・処理(ゴニョゴニョ)
  • 飲み物を出す・お釣りを出す・・出力(アウトプット)

なにかしら入力(インプット)があって、
インプットの内容を処理して、
その結果を出力(アウトプット)すると。

ゴニョゴニョがどんな事をやっているのか知らなくても、

とりあえずお金入れて飲み物選んだらすぐに飲み物が出てきますよね。

アオキ
インプット、ゴニョゴニョ、アウトプット
アオキ
インプット、ゴニョゴニョ、アウトプット・・・

プログラミング用語では、

  • インプットのことを『引数(ひきすう)』
  • アウトプットのことを『戻り値(もどりち)』

と言ったりもします。

アオキ
要は、インプット、ゴニョゴニョ、アウトプットです。

実際に使うときは、

関数名(インプット);

とすれば使えます。

注意点としては、

プログラミングの『関数』の場合、
インプットがなくてもゴニョゴニョできるし、
アウトプットを書かない場合もあります。

Sponsored link

プログラミングの『関数』はすでにたくさん使われている

遊ぶようにプログラミングができる『P5.js(ProcessingのJavaScript版)』で早速試してみます。

お題はこちら。

See the Pen
p5.js hsl-random
by aoki_monpro (@suica)
on CodePen.

参考記事

このプログラミングのコードは下記になります。

function setup() {
  createCanvas(500, 300);
  colorMode(HSL, 360, 100, 100, 100);
  background(0);
}

function draw() {
  noStroke();
  fill(random(180, 200),100 ,50,30);
  circle(random(width), random(height), random(40,80));
  
}

よくよく見ればわかると思いますが、

『P5.js(ProcessingのJavaScript版)』には最初からたくさんの『関数』が用意されていて、

すでにいろんなところで『関数』が使われています。

  • createCanvas() も
  • colorMode()も
  • background()も
  • fill()も
  • circle()も

全部『P5.js(ProcessingのJavaScript版)』で用意されている『関数』です。

アオキ
最初から用意されている関数のことを『組み込み関数』と読んだりします。

インプット、ゴニョゴニョ、アウトプットの3つのうち、
ゴニョゴニョとアウトプットは『組み込み関数』毎に決まっているので(例えばcircleなら円を描くとか)、

インプットを指定するだけで(引数に設定するだけで)使えるようになっています。

『P5.js(ProcessingのJavaScript版)』の元のファイルを見れば、

どんな設定が書かれているかの確認もできますが、

ゴニョゴニョの中身を知らなくても、簡単に使えるようになっています。

アオキ
『P5.js』も『Processing』も作った人すごいよねー(小並感
Sponsored link

プログラミングの『関数』のわかりやすい使い方

『P5.js(ProcessingのJavaScript版)』は最後にjsがついているとおり、『JavaScript』を使っています。

『JavaScript』の場合、『関数』はこう書きます。

 
function 関数名(インプット){
 
  ゴニョゴニョ;
 
  return アウトプット;
}
 

function は英語で関数だったり機能という意味です。

functionの後に関数名を書きます。

関数名のあとに () かっこをつけます。インプットがある場合はこの中に書きます。

実際の処理は {} 波かっこの中に書いていきます。

return の後にアウトプットを書く事で、結果を返します。

実は、インプットやアウトプットがなくても『関数』をつくることはできます。

Sponsored link

プログラミングの『関数』をしっかり使ってみる

今回は『createCircle』という名前で『関数』を作ってみました。

コードはこちら。

function setup() {
  createCanvas(500, 300);
  colorMode(HSL, 360, 100, 100, 100);
  background(0);
}

function draw() {
  noStroke();
  createCircle(); //ここで呼び出している
}

function createCircle(){ //つくった関数
  fill(random(180, 200),100 ,50,30);
  circle(random(width), random(height), random(40,80));
  
}

function createCircle と書いて、その後に() かっこを書いて(インプットなし)

波かっこの中に処理を書いています。(アウトプットもなし)

draw()関数の中で、作った関数名『createCircle()』として呼び出す事で、

function createCircle の中身が呼び出されることになります。

アオキ
なにがいいかって、draw関数の中がスッキリするんですよね。スッキリ大事。
Sponsored link

プログラミングの『関数』をしっかり使ってみる その2 インプットあり

続いて『関数』のインプットありバージョン。

See the Pen
p5.js function-test
by aoki_monpro (@suica)
on CodePen.

参考記事

コードはこちら。

let vecLocation = [];
let vecVelocity = [];
let vecAcceleration = [];
let topSpeed;


function setup() {
  createCanvas(400, 200);
  colorMode(HSL, 360, 100, 100, 100);
  
  for ( let i = 0; i < 10; i++){
  vecLocation[i] = createVector(width / 2, height / 2);
  vecVelocity[i] = createVector(random(2,5), random(-8, -2));
  vecAcceleration[i] = createVector(0, 9.8/60);
  }
}

function draw() {
  background(0);
  for (let i = 0; i < 10; i++){

    addVector(i); //ここで呼び出している
    
    if( vecLocation[i].y + 20 > height || vecLocation[i].y - 20 < 0 ){
      vecVelocity[i].y = vecVelocity[i].y * -1;
    }
    
    if(vecLocation[i].x + 20 > width || vecLocation[i].x - 20 < 0 ){
      vecVelocity[i].x = vecVelocity[i].x * -1;
    }
    
  }
}

function addVector(i){ //新しい関数 インプットは i 
    vecVelocity[i].add(vecAcceleration[i]);
    vecLocation[i].add(vecVelocity[i]);

    fill(160, 100, 50, 100);
    ellipse(vecLocation[i].x, vecLocation[i].y, 20, 20);
    
}

function addVectorとして、『addVector』関数を作っています。

インプットとして、ボールを10個作るために、
for文iを0から9に変えているので、iをインプットに設定しています。

インプットを元に、『関数』の中のゴニョゴニョが実行されるので、

このインプットがなければこの『関数』はうごきません。

draw()関数の中で、addVector(インプット(今回はi)) と書いて、

『addVector(インプットはi) 』関数を呼び出しています。

アオキ
なにがいいかって、draw関数の中がスッキリするんですよね。スッキリ大事。(2回目
Sponsored link

プログラミングの『関数』をわかりやすく まとめ

実際のところ、

プログラミングの『関数』って奥が深くて、

特に『JavaScript』の場合、

無名関数、コールバック関数、クロージャなど
たくさんの『関数』がありはしますが、

基本的なつくりは一緒です。

  • インプット(ない場合もありえる)
  • ゴニョゴニョ
  • アウトプット(ない場合もありえる)
アオキ
インプット、ゴニョゴニョ、アウトプット。
アオキ
インプット、ゴニョゴニョ、アウトプット。

と言いつつ、ちょっとずつ『関数』を使ってみてもらえたらと思います。

2019/9/8追記
『JavaScript』では、
『アロー関数』という新しい書き方ができるようになりまして、
『アロー関数』が主流になりつつあるので、
慣れてきたらぜひ『アロー関数』にも挑戦してもらえたらと思います。

 

『クリエイティブコーディング』関係ではこんな記事も読まれています。

1. 【P5.js】初心者向けの動画をリリースしました(プログラミング×数学物理)【Udemy】

2. 【JavaScript】初心者向けの動画をリリースしました【Udemy】

3. プログラミング実況をやってみた その1【P5.js】

4. 【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっぽ〜(1)

5. 移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

6. 【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムで使いたい(3)【P5.js】

7. 『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

8. プログラムで【加速度】【速度】の使い方をわかりやすく (5)【P5.js】

9. プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】

10. プログラムの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(7)【P5.js】

11. プログラムで色や大きさをランダムにして遊んでみる(8)【P5.js】

12. 【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】

13. プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】

14. 【三角関数】をプログラムで使う方法をまとめてみた(11)【P5.js】

15. プログラムで数学も身につく 一石四鳥なクリエイティブコーディング

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
  2. 生成AI

    Dify講座をリリースしました【非エンジニア向け】
  3. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  4. データベース

    MySQLの講座をリリースしました
  5. 生成AI

    2024/5/14 OpenAI発表 まとめ
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
100% Free SEO Tools - Tool Kits PRO