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

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

フロントエンド

2019.06.14

プログラムの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(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.

参考記事

もんプロ～問題発見と解決のためのプログラミング〜

【CSS】色の設定は『RGB』より『HSL』の方が使いやすい件〜ランダムに使いたい(3)...

https://coinbaby8.com/colormode-hsl.html

遊ぶようにプログラミングができる『クリエイティブコーディング』はもちろん、ホームページやウェブサービス、洋服やコスメなどでも、『色』によってずいぶんと雰囲気が変わります。モノクロにしてシックにしてみたり、暖色系であったかくしてみたり、ショッキングピンクで攻めてみたり。『色』の表現範囲を表す用語として『色空間(カラースペース)』というものがあり、インターネットで使う『色空間(カラースペース)』は大きく3つあるのかなと思います。　色空間(カラースペース)　・RGB・・Red、Green、Blueの3原色・・ウェブ・テレ...

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

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.

参考記事

もんプロ～問題発見と解決のためのプログラミング〜

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

https://coinbaby8.com/acceleration.html

遊ぶようなプログラミングでおなじみの『クリエイティブコーディング』。スムーズな動きを実現しようと思うとどうしても『物理』や『数学』の知識が必要になってきます。今回のお題は『加速度』。だんだんスピードが速くなったり、だんだんスピードが遅くなったり、はたまた逆方向に加速していったり。そんな動きをできるだけわかりやすく作ってみたいと思います。今回は2D(2次元・平面)の動きを想定しています。加速度の前に『ベクトル』のざっくり解説平面(2次元・2D)の場合、横と縦の2つの情報が必要になります。横がX、縦がYになり...

コードはこちら。

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