1 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻第 1 回ハローワールドななこれって朝日新聞のののちゃんの DO 科学のパクリ? 先生パロディって言ってちょうだい家政婦のミタ ( 家政婦は見たのパロディ ) クレヨンしんちゃんのダズニーランド ( ディズニーランド

Size: px

Start display at page:

Download "1 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻第 1 回ハローワールドななこれって朝日新聞のののちゃんの DO 科学のパクリ? 先生パロディって言ってちょうだい家政婦のミタ ( 家政婦は見たのパロディ ) クレヨンしんちゃんのダズニーランド ( ディズニーランド"

つねときごみぶち
5 years ago
Views:

1 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻 by プログラミングをまったく知らなかったななちゃんがアニメーションプログラムを作れるようになるまでのお話第 1.2 版 2017 年 5 月 7 日もくじ第 1 回ハローワールド第 2 回アニメーション用の画面 ( キャンバス ) 第 3 回くりかえし第 4 回ボールのアニメ第 5 回折り返し第 6 回ボールを複数に第 7 回勝手にシンドバッド ( 古い!) ボイド (Boids) 第 8 回ボイドにルールを埋め込むボイドルール1( 整列 ) 第 9 回ボイドにルールを埋め込むボイドルール2( 結合 ) 第 10 回ボイドにルールを埋め込むボイドルール3( 引き離し ) 研究課題

どんなプログラムを作ってみたい? ななウェブページで見かけるアニメーションを作ってみたいなどうやって作れば良いの? 鳥さん動いてねと書くの? 先生人間がしゃべることばは不正確になりやすいしコンピュータが理解するのは難しいのでプログラミング言語を使って表現するのその代表選手が JavaScript という言語なのななふうんどうやってコンピュータに伝えるの?

2 1 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻第 1 回ハローワールドななこれって朝日新聞のののちゃんの DO 科学のパクリ? 先生パロディって言ってちょうだい家政婦のミタ ( 家政婦は見たのパロディ ) クレヨンしんちゃんのダズニーランド ( ディズニーランドのパロディ ) みたいなものよなな文部科学省が 2020 年からの小学校でのプログラミング教育の必修化を検討中と聞いたけどプログラミングをまったく知らなくてとても不安なの先生小学生に教えるくらいだからとっても簡単よななちゃんだったらどんなプログラムを作ってみたい? ななウェブページで見かけるアニメーションを作ってみたいなどうやって作れば良いの? 鳥さん動いてねと書くの? 先生人間がしゃべることばは不正確になりやすいしコンピュータが理解するのは難しいのでプログラミング言語を使って表現するのその代表選手が JavaScript という言語なのななふうんどうやってコンピュータに伝えるの? フリー素材 http//freeillustration.net 先生エディタ (Windows メモ帳 Macintosh テキストエディット emacs mi Atom など ) を使い右の内容のファイルを作ってみてねファイルの名前は sample1.html にしてね <script> alert("hello, world."); </script> ななはいできました先生それでは作ったファイルのアイコンをダブルクリックしてみてねフリー素材 http//freeillustration.net ななこんな画面になったわ! 先生こういう画面をアラート画面というの OK をクリックして画面を閉じてねこれで簡単だけど JavaScript のプログラムを実行したことになるのよ今後日本語の文字を表示したりいろいろなブラウザで確実に表示させたり普通のウェブページと組み合わせるには次のような内容にしたほうが良いのよ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <script> alert("hello, world."); </script> </body> </html> ななずいぶん長くなってしまうのね毎回こんなにたくさん入力するのは面倒ね先生こういう内容のファイルを作っておいて新しいプログラムを作るときにはこのファイルをコピーして <script> と </script> の間だけ書き換えるようにするといいのよどこか 1 文字だけ書き間違えても正しく動作しなくなる可能性があるからねななコピーか! はいわかりましたところで Hello, world. って何? 世界よこんにちは? 先生ひみつ気になったらインターネット検索で調べてみてね --- JavaScript プログラムのファイルは UTF-8 という文字コードで保存してください

3 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻 2 第 2 回アニメーション用の画面 ( キャンバス ) 先生前回はアラート画面に表示したけどアニメーションを表示するには不便なので今回はウェブ画面に直接表示を行う方法を説明しましょう右のような内容の sample2.html という名前のファイルを作ってアイコンをクリックしてみてね <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <h1>sample</h1> <script> var canvas = document.createelement('canvas'); document.body.appendchild(canvas); canvas.width = 400; canvas.height = 400; canvas.style.border = "solid 2px"; var ctx = canvas.getcontext('2d'); ctx.font = "24px sans-serif"; ctx.filltext("hello, world.",100,100); </script> </body> </html> なな右のような画面になったわでもとても長いプログラムねめげてしまいそう先生 ctx.filltext("hello, world.",100,100); 以外の行はこれから毎回同じ形で変化しないおまじないのようなものだから気にしないで毎回コピーしてくださいアニメ表示枠が縦横 400 ドットで文字の大きさは縦横 24 ドットというような意味なの大切なのは ctx.filltext("hello, world.",100,100); だけで上から 100 ドット左から 100 ドットの位置に Hello, world. と表示してねという意味なのそれじゃ上から 130 ドット 160 ドットの位置にも Hello, world. って表示してみてねななこんな感じ? 先生正解! ctx.filltext("hello, world.",100,100); ctx.filltext("hello, world.",100,130); ctx.filltext("hello, world.",100,160);

4 3 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻第 3 回くりかえし先生前回の Hello, world を 10 行とか 20 行とか並べるにはどうすれば良いかしら? なな同じような行を 10 行とか 20 行とか並べれば良いのでは? 先生それじゃあプログラムが長くなって大変よねそれでは下のようなプログラムを実行してみてねななすごい! たった 3 行のプログラムで 10 行も Hello, world. 先生 y を 100 からはじめて 30 ずつ増やすことを 370 を越えない間繰り返してねという意味なのこういうのを繰り返し文とか for 文とかいうのよ for (var y=100; y<=370; y=y+30) { ctx.filltext("hello, world.",100,y);

5 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻 4 第 4 回ボールのアニメ先生今回からいよいよアニメに挑戦! Hello, world. をに変えればボールみたいに見えるわねこれをアニメーション的に動かしましょうひとつの絵を描くプログラムをひとまとめにしてそれを等間隔たとえば 1/100 秒ごに呼び出すのななひとまとめ? 先生 function 名前 ( ) { のような形でまとめるのよなな名前をつけるの? 先生かたまりがいくつもあったら使うときに名前が必要でしょうそこの君あっちのあなたじゃ不便でしょなな setinterval(step,10); は? 先生 step というプログラムのかたまりを 10 ミリ秒ごとに呼び出してねという意味なな function step には ( ) がついているけどここの step には ( ) がつかないの? 先生するどいわねでも今はひみつなな x = x + vx; は? 先生 x + vx の足し算をしてその結果で x を書き換えるということ呼び出されるたびに x はと増えていくということなのななだからボールの位置が変わってゆくのね! var x = 30; var y = 50; var vx = 1; var vy = 1; setinterval(step,10); function step( ) { ctx.filltext(" ", x, y); x = x + vx; y = y + vy; ななあれ? ボールが移動するんじゃなくてびよーんと線が出てくる! 先生毎回画面をクリアしてからボールを描く必要があるのそれが ctx.clearrect(0,0,400,400); var x = 30; var y = 50; var vx = 1; var vy = 1; setinterval(step,10); ctx.clearrect(0,0,400,400); ctx.filltext(" ",x-12,y); x = x + vx; y = y + vy; なな動いた! あれ? でもボールが画面の右下に行ったら消えてしまったわ! setinterval は小文字の set 大文字の I( アイ ) 小文字の nterval

6 5 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻第 5 回折り返しなな前回のプログラムだとボイドが動いたのは良いけど画面の右下を飛び出して消えてしまったわ壁にぶつかったらはねかえるようにできないかしら? 先生壁にぶつかるというのは x や y がいくつになっているかを調べれば分かるわねはねかえるというのは vx や vy の速度をマイナスにすれば実現できるわ下のようなプログラムになるわなな 400 や 0 はなんとなくわかるけど 388 や 12 は? 先生文字ここではだけどそのサイズが縦横 12 ドットなのでその大きさを考慮しているの var x = 30; var y = 50; var vx = 1; var vy = 1; setinterval(step,10); 右の壁にぶつかったら横方向の速度を反転 ctx.clearrect(0,0,400,400); ctx.filltext(" ",x,y); if ((x > 388) && (vx > 0)) vx = -vx; 左 if ((x < 0) && (vx < 0)) vx = -vx; 下 if ((y > 400) && (vy > 0)) vy = -vy; if ((y < 12) && (vy < 0)) vy = -vy; x = x + vx; 上 y = y + vy; --- ctx.font = "24px sans-serif"; (24 ドットのサイズでひげ飾り無しフォント ) を指定しているのに縦横 12 ドット? 現実問題としてそうなります canvas.width = 100; canvas.height = 100; ctx.font = "100px sans-serif"; ctx.filltext(" ",0,50); 100px なのに縦横 50 ドット弱隣の文字とくっつかないようにさらに左と下に隙間がある

7 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻 6 第 6 回ボールを複数に先生ボイドを 2 羽に増やしてみましょうねなな var x1=30; var y1=50; var vx1=1; var vy=1; var x2=30; var y2=70; var vx2=1; var vy2=1; みたくするの? 先生それでもできるけどボイドが 20 羽とかになったらやってらんないわねそういう時には配列やオブジェクトというデータのあつまりを使うと便利なの var boids = [ {x30,y50,vx1,vy1, {x30,y70,vx1,vy1 ]; という形でデータのあつまりを作ると boids[0].x でボイド 0 号の x boids[1].vy でボイド 1 号の vx を使うことができるのななちょっと難しいけどプログラムがとってもコンパクトになるのね前回のプログラムは 17 行だったけど今回のプログラムも 17 行このテクニックを使わないと倍近くの行数になってしまうのにねボイド 0 号のデータボイド 1 号のデータ var boids = [ {x30,y50,vx1,vy1, {x30,y70,vx1,vy1 ]; setinterval(step,10); for (var i=0; i<boids.length; i++) { ctx.clearrect(0,0,400,400); の省略記法! var boid = boids[i]; ctx.filltext(" ",boid.x,boid.y); if ((boid.x > 388) && (boid.vx > 0)) boid.vx = -boid.vx; if ((boid.x < 0) && (boid.vx < 0)) boid.vx = -boid.vx; if ((boid.y > 400) && (boid.vy > 0)) boid.vy = -boid.vy; if ((boid.y < 12) && (boid.vy < 0)) boid.vy = -boid.vy; boid.x = boid.x + boid.vx; boid.y = boid.y + boid.vy;

8 7 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻第 7 回勝手にシンドバッド ( 古い!) 先生ボイドをたくさん ( たとえば 20 個 ) 用意する場合ひとつひとつに位置と速度を設定するのは手間がかかるわねそういう場合コンピュータに適当に設定させると楽になるわなな適当にやれなんていう命令があるの? 先生 Math.random() という命令は 0 から 1 の間の数 0.3 とかとかの数を作ってくれるのさいころをふるような感じでこういうのをランダムな数というの厳密には 1 のちょっと手前の数までなな 0 から 1 だけだと不便ね 0 からキャンバスのサイズの 400 までを作りたいのに先生そういう場合は Math.random()*400 と書けば良いのよなななーるほど! 空っぽの配列を用意ボイド 0 号から 19 号までを作る var boids = [ ]; for (var i=0; i<20; i++) { boids[i] = { xmath.random()*400, ymath.random()*400, vxmath.random()*4-2, vymath.random()*4-2; x と y は 0 からの間の乱数に setinterval(step,10); x と y は -2 からの間の乱数に ctx.clearrect(0,0,400,400); var boid = boids[i]; ctx.filltext(" ",boid.x,boid.y); if ((boid.x >= 388) && (boid.vx > 0)) boid.vx = -boid.vx; if ((boid.x < 0) && (boid.vx < 0)) boid.vx = -boid.vx; if ((boid.y >= 400) && (boid.vy > 0)) boid.vy = -boid.vy; if ((boid.y < 12) && (boid.vy < 0)) boid.vy = -boid.vy; boid.x = boid.x + boid.vx; boid.y = boid.y + boid.vy;

9 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻 8 ボイド (Boids) たくさんの鳥たちが群れをなして飛んでいるのを見たことがあるかも知れないかつて生態学者たちはこのような群れにはリーダーがいてそれに他の鳥たちが追従しているのではないかと考えていたしかし動画撮影して細かく解析してみると先頭にいる鳥が時々刻々と変化していることが分かってきたそんな中 1987 年にアメリカのアニメーションプログラマクレイグレイノルズ (Craig Raynolds) は生態学とはまったく別の興味で CG でリアルな鳥軍団を再現しようとアルゴリズムを考案したたった 3 つのルールを規定するだけで鳥の群れをシミュレーションできるというもの Boid という名の由来は鳥もどきという意味の言葉 birdoid (bird-oid 鳥 (bird) に似たもの (-oid) バードイド ) が短くなったもの実際にバットマンリターンズのペンギンの集団のシーンライオンキングのバッファローの集団が移動するシーンなどはこのような方法で作られたとのこと今では実際に鳥軍団にはリーダは存在せず簡単なルールで成り立っていると考えられている多細胞生物でも各細胞が似たようなルールで同調しているのではないかと考える人もいる Boids の 3 つのルール (1) Alingment( 整列 ) 整列 (Velocity Matching) 近くの鳥たちと飛ぶスピードや方向を合わせようとするルール同じ方向にあまり距離を空けないように飛ぶようにするある一定の距離より遠ざかりすぎてしまったら前を飛んでいるボイドはスピードを遅くし後ろを飛んでいるボイドはスピードを速くするようにすることで実現できる (2) Cohesion( 結合 ) 接近 (Flock Centering) 鳥たちが多くいる方へ向かって飛ぶルール鳥が多くいる方向というのは群れの中心 ( 重心 ) 方向ということボイドに群れの中心の方向へ飛んでいくことを指示群れの中心は全ボイドの位置 ( 座標 ) の平均として求める (3) Separation( 引き離し ) 衝突回避 (Collision Avoidance) 近くの鳥に近づきすぎたらぶつからないように離れるルールもしボイド同士が近づきすぎてしまったら前を飛んでいるボイドはスピードを速くし後ろを飛んでいるボイドはスピードを遅くするようにする参考資料 http//coderecipe.jp/recipe/grrj53opqf/ http//members.jcom.home.ne.jp/ibot/boid.html

10 9 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻第 8 回ボイドにルールを埋め込むボイドルール 1( 整列 ) var boids = []; for (var i=0; i<20; i++) { boids[i] = { xmath.random()*400, ymath.random()*400, vxmath.random()*4-2, vymath.random()*4-2; setinterval(step,50); ctx.clearrect(0,0,400,400); var boid = boids[i]; rule1(i); ctx.filltext(" ",boid.x,boid.y); if ((boid.x >= 388) && (boid.vx > 0)) boid.vx = -boid.vx; if ((boid.x < 0) && (boid.vx < 0)) boid.vx = -boid.vx; if ((boid.y >= 400) && (boid.vy > 0)) boid.vy = -boid.vy; if ((boid.y < 12) && (boid.vy < 0)) boid.vy = -boid.vy; boid.x = boid.x + boid.vx; boid.y = boid.y + boid.vy; // ルール 1 ボイドは近くのボイドの平均速度に合わせようとする function rule1(index) { var px = 0, py = 0; if (i!= index) { px = px + boids[i].vx; py = py + boids[i].vy; px = px / (boids.length - 1); py = py / (boids.length - 1); 自分以外の全ボイドの速度の平均値を求めるその平均速度に近づくように速度調節 boids[index].vx = boids[index].vx + (px-boids[index].vx) / 8; boids[index].vy = boids[index].vy + (py-boids[index].vy) / 8; このルールだとランダムの平均はゼロなので停滞してしまうこの段階ではこれで良い

11 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻 10 第 9 回ボイドにルールを埋め込むボイドルール 2( 結合 ) ctx.clearrect(0,0,400,400); var boid = boids[i]; rule1(i); rule2(i); ctx.filltext(" ",boid.x-12,boid.y); if ((boid.x >= 388) && (boid.vx > 0)) boid.vx = -boid.vx; if ((boid.x < 0) && (boid.vx < 0)) boid.vx = -boid.vx; if ((boid.y >= 400) && (boid.vy > 0)) boid.vy = -boid.vy; if ((boid.y < 12) && (boid.vy < 0)) boid.vy = -boid.vy; boid.x = boid.x + boid.vx; boid.y = boid.y + boid.vy; // ルール 1 ボイドは近くのボイドの平均速度に合わせようとする // ルール 2 ボイドは近くに存在する群れの中心に向かおうとする function rule2(index) { var cx = 0, cy = 0; if (i!= index) { cx = cx + boids[i].x; cy = cy + boids[i].y; cx = cx / (boids.length - 1); cy = cy / (boids.length - 1); 自分以外全員の中心位置を計算その中心に向かうように速度調節 boids[index].vx = boids[index].vx + (cx-boids[index].x) / 100; boids[index].vy = boids[index].vy + (cy-boids[index].y) / 100; ひとつにまとまろうとするがくっついてしまうこの段階ではこれで良い

12 11 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻第 10 回ボイドにルールを埋め込むボイドルール 3( 引き離し ) var boids = []; for (var i=0; i<20; i++) { boids[i] = { xmath.random()*400, ymath.random()*400, vxmath.random()*4-2, vymath.random()*4-2; setinterval(step,50); ctx.clearrect(0,0,400,400); var boid = boids[i]; rule1(i); rule2(i); rule3(i); ctx.filltext(" ",boid.x-12,boid.y); if ((boid.x >= 388) && (boid.vx > 0)) boid.vx = -boid.vx; if ((boid.x < 0) && (boid.vx < 0)) boid.vx = -boid.vx; if ((boid.y >= 400) && (boid.vy > 0)) boid.vy = -boid.vy; if ((boid.y < 12) && (boid.vy < 0)) boid.vy = -boid.vy; boid.x = boid.x + boid.vx; boid.y = boid.y + boid.vy; // ルール 1 ボイドは近くのボイドの平均速度に合わせようとする // ルール 2 ボイドは近くに存在する群れの中心に向かおうとする // ルール 3 ボイドは隣のボイドと少しだけ距離をとろうとする function rule3(index) { if (i!= index) { var d = dist(boids[i], boids[index]); if (d < 7) { 距離が近ければ離れる方向に速度調節 boids[index].vx = boids[index].vx - (boids[i].x - boids[index].x); boids[index].vy = boids[index].vy - (boids[i].y - boids[index].y); function dist(b1, b2) { return Math.sqrt(Math.pow((b1.x-b2.x),2) + Math.pow((b1.y-b2.y),2)); 距離計算集まろうとするが衝突は避ける完成!!!!!

13 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻 12 まとめ以上のプログラムをまとめ少しコンパクトに書き改めると下記のようになります <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> <style> canvas { bordersolid 2px; </style> </head> <body> <h1>boids</h1> <script> var canvas = document.createelement('canvas'); document.body.appendchild(canvas); canvas.width = canvas.height = 400; var ctx = canvas.getcontext('2d'); ctx.font = "24px sans-serif"; var boids = []; for (var i=0; i<20; i++) boids[i] = { xmath.random()*400, ymath.random()*400, vxmath.random()*4-2, vymath.random()*4-2 ; setinterval(step,50); i ではなく boid を送っています ctx.clearrect(0,0,400,400); var boid = boids[i]; rule1(boid); rule2(boid); rule3(boid); ctx.filltext(" ",boid.x-12,boid.y); if ((boid.x >= 388) && (boid.vx > 0)) boid.vx = -boid.vx; if ((boid.x < 0) && (boid.vx < 0)) boid.vx = -boid.vx; if ((boid.y >= 400) && (boid.vy > 0)) boid.vy = -boid.vy; if ((boid.y < 12) boid.x = boid.x + boid.vx; boid.y = boid.y + boid.vy; && (boid.vy < 0)) boid.vy = -boid.vy; function rule1(b) { // ルール 1 ボイドは近くのボイドの平均速度に合わせようとする var px = 0, py = 0, bi; for (var i in boids) if ((bi = boids[i])!= b) { px += bi.vx; py += bi.vy; px /= (boids.length - 1); py /= (boids.length - 1); b.vx += (px-b.vx) / 8; b.vy += (py-b.vy) / 8; いろいろなプロフェッショナルテクニックを使っています研究してみましょう for 文や if 文の中身が 1 行 (1 実行文 ) の場合は { を省略できます bi = boids[i]; if (bi!= b) { の短縮系 (bi = boids[i]) は bi に boids[i] の値を代入するとともに bi の値をもちます function rule2(b) { // ルール 2 ボイドは近くに存在する群れの中心に向かおうとする var cx = 0, cy = 0, bi; for (var i in boids) if ((bi = boids[i])!= b) { cx += bi.x; cy += bi.y; cx /= (boids.length - 1); cy /= (boids.length - 1); b.vx += (cx-b.x) / 100; b.vy += (cy-b.y) / 100; function rule3(b) { // ルール 3 ボイドは隣のボイドと少しだけ距離をとろうとする var bi; if ((bi = boids[i])!= b) if (dist(bi, b) < 7) { b.vx -= (bi.x - b.x); b.vy -= (bi.y - b.y); function dist(b1, b2) { return Math.sqrt(Math.pow((b1.x-b2.x),2) + Math.pow((b1.y-b2.y),2)); </script> </body> </html>

14 13 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻研究課題ボイドのルールを追加改良してみよう近いボイドだけでサブグループ逃げるボイドとそれを追跡するボイド群鳥ではなくて魚にヒント vx vy から Math.atan2 で角度を求める

15 ななちゃんの IT 教室アニメーションプログラムを作ろうの巻 14 移動しない植物それを食べる草食動物それを捕食する肉食動物

ななちゃんの IT 教室マルチタートルでオブジェクトを理解しようの巻 by 複数のタートルを操作する環境でななちゃんがオブジェクト指向とは何かを勉強します第 0.7 版 2017 年 5 月 7 日フリー素材

ななちゃんの IT 教室マルチタートルでオブジェクトを理解しようの巻 by 複数のタートルを操作する環境でななちゃんがオブジェクト指向とは何かを勉強します第 0.7 版 2017 年 5 月 7 日フリー素材ななちゃんの IT 教室マルチタートルでオブジェクトを理解しようの巻 by nara.yasuhiro@gmail.com 複数のタートルを操作する環境でななちゃんがオブジェクト指向とは何かを勉強します第 0.7 版 2017 年 5 月 7 日フリー素材 http://freeillustration.net もくじ第 1 回復習! 第 2 回マルチタートル! 第 3 回書き方の工夫第 4