processing.jsでメタボールを作る-プログラミングはYouTube動画で学ぶ-

f:id:yosinex:20170215072337j:plain

メタボールといえば3Dでよく聞く言葉ですよね。2つの球体が近づいていくにつれて徐々に結合していく感じが私は好きです。今回は3Dではなく2Dでメタボールを作りました。メタボールを実現させるためのベースとなるアイデアは同じなので、3D版メタボールを作る際にも参考にしてください。

今回の成果物

重いなと感じたら</>を押して止めてください

メタボールのポイント

メタボールは濃度の閾値を超えたものを可視化することによって滑らかな曲線で球体をつないでいる。濃度は、球体の中心に近づくほど濃くなります。つまり濃度は任意のピクセルと球体の中心との距離に反比例する（距離小 -> 濃度大）といえます。

作ったものの中に次のコードがあります。

float sum = 0;

for(Blob b : blobs){

float d = dist(x, y, b.pos.x, b.pos.y);

sum += 100 * b.r / d;

}

今回の場合、sumが濃度を表しています。あるピクセル(x, y)とある円の中心(b.pos.x, b.pos.y)との距離がdです。bは生成した円を表し、b.rは円の半径を表しています。for文によって生成した全ての円の中心との距離をもとにした濃度が計算されます。これの計算をキャンバス内の全てのピクセルに対して行っており、濃度をもとにピクセルの色を決めています。

今回の教材

チャンネル登録者数20万人をこえるThe Coding Trainのコーディングチャレンジ第28回が教材です。

なぜYouTubeで学ぶのか

私がYouTubeで学ぶ理由は3つ

お金がかからない
動画の方が分かりやすい
熟練のプログラマが動画を出している

YouTubeで学ぶ利点

　プログラミング学習と検索すると必ずWebスクールを紹介する記事が最初にでてきますが、優れたプログラマの中にWebスクールで学んだ人なんていないと思います。優れたプログラマの人達は小さいころからPCが好きで、脳が成熟してしまう前からPCで遊んでいたので自然と知識や扱い方が身についた人たちです。私はそういう人達を自分の講師としたいと思いました。YouTubeには動画投稿で収益を稼ごうと思っている熟練のプログラマ達がいます。また、

本での独学よりも動画の方が分かりやすい
応用的な内容の動画が多い

というのもYouTube学ぶ理由です。

　プログラミング独学用の本だとint型の書き方とかswitch文の書き方とか、基礎的なことばかりが本の半分を占め、読んでいてまったく楽しくありませんでした。YouTuberが動画で収入を得ると考えた時に、つまらない基礎的な内容よりも応用的な内容を扱い、なおかつ楽しく動画が見れるように工夫しようとするのが自然です。ありがたいことに、それによって私たち学習者はモチベーションを保つことができます。

YouTubeで学ぶ欠点

逆にYouTubeで学ぶ欠点としては、

言語の問題
実力にあった動画があるか

いいなと思った人がロシア語で動画を出していたら、大抵の日本人は字幕の英語でしか理解できないし、そもそも英語が分からなければ日本語の字幕がある動画しか教材になりません。そして、学習を進めるうえで今の実力よりちょっとだけ難しい問題を解いていくのが良いとされますが、そういう動画を探すのが難しいです。