「Angry birds」の動きを再現！
JavaScriptのライブラリ「p5.js」と「matter.js」を使って、Angry Birdsの動きを再現するといったチュートリアルを紹介します！
こちらの動画は、Dan Shiffman氏が制作している「The Coding Train」というJavaScrictなどのチュートリアルをあげているコンテンツの一部になります。
ソースコードなどがアップされているホームページはこちらです。
The Coding Train is a community welcoming beginner programmers and code-curious individuals to try their hand at expressing themselves with code.
https://thecodingtrain.com/about
The Coding Trainは、初心者プログラマーやコードに興味がある人が、コードで自分を表現することに挑戦することを歓迎するコミュニティとのことです。
Dan Shiffman氏は2012年から動画を上げており、かなりたくさんのチュートリアルがあります。
しかもテーマが面白く、魅力的なものものばかり！
そして、テンションが高い…！それだけでなく、ホワイトボートを用いたりして、コードの仕組みをわかりやすく教えてくれます。
とても楽しい授業を受けている感じですね…！
動画は英語ですが、書くコードは変わらないので、雰囲気でも十分楽しめます。
どういうものが作れるの？
球を投げる、積んだものに衝突する、積んだものが崩れるという動きを再現します。
これは、実際にチュートリアルをみて作成したものです。
デモ（チュートリアルの途中まで）
球をクリックして引っ張ると、パチンコの要領で飛んでいきます。そして、積んでいる長方形に衝突すると崩れていくのがわかると思います。
この動作を使って、工夫次第で何か面白いものが作れるかも…？
本チュートリアルでは、この後、弾性、重さの設定、球と長方形に画像を当てはめるということを行っています。
いろんな設定が行えて、おもしろい！
「p5.js」「Matter.js」とは？
p5.js
クリエイティブなコーディングを簡単に行えることができるJavaScriptライブラリです。
図形、テキストの描画やキー、マウスでの入力などが簡単な記述で行えます。
ホームページはこちら
Matter.js
2DかつWeb用の物理エンジンです。
重力、ばね、振動運動などあらゆる物理運動を再現できます。
ホームページはこちら
Topページで物理演算の例がどんと出ていますが、どれも面白そうですね…！
チュートリアルのひな型
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/matter-js@0.14.2/build/matter.min.js"></script>
</head>
<body>
<script>
//ここにp5.js, matter.jsのコードを記述！
</script>
</body>
</html>基本的には、上の「index.html」をコピペして作成し、<script>の所にコードを書いていけばチュートリアルを進められます。
本チュートリアルでは、
<script src="bird.js"></script>のようにJavaScriptのコードを複数個分けて作成し、index.htmlに挿入しています。
でもチュートリアル通りやれば大丈夫です。
気をつけなければならないのは、p5.jsのバージョンが違うと挙動が変わってくりことです！
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/matter-js@0.14.2/build/matter.min.js"></script>このバージョンを使えば、とりあえず、チュートリアル通りに動きました。
最新版では、ちょくちょくエラーが…。
動くことを確認しながら、楽しく学べるのでぜひ作ってみてください！
では！
コメント