1 /*
2 どうなっているのか？
3
4 App()
5 App.onloadx() htmlのonloadで呼ばれる。画像のプリロードからも呼ばれ、loadをカウントしてる。
6 App.onloadx1() htmlとimageのloadが完了したら呼ばれる。固定的な内容。onloadx2を呼ぶ。
7 App.onresizex() 固定的な内容。通常は変更しないと思う。
8 App.onloadx2() ★ここから書く★
9 App.start() stopをクリックした後再開するとき呼ばれる。
10 App.run() 書いたもの。消しても良い
11 App.draw() 書いたもの。消しても良い
12
13 【説明】
14
15 このファイルを html ファイルの script タグの src 属性で指定するだけで、動作開始するように作ったつもり。
16 目的のソフトウェアを App というクラスにまとめてある。
17 コメントで、「以下　変更しない部分」、「以下　変更する部分」のようにファイルを大きく2分してある。
18 このファイルを再利用するためです。
19
20 html の読み込みが完了した時点で、App クラスの onloadx1() 関数が呼ばれる。
21
22 onloadx1() と onloadx2() は処理的に分ける必要はないが、変更する必要のない部分と、
23 目的のソフトウェアを実装する部分とに分別するために分けた。
24
25 リサイズされたら、目的の部分（canvas 要素）はサイズを自動で合わせるようになっている。
26
27
28 【目的のソフトウェア　部分】
29
30 ページのロードが完了すると、このプログラムは画面に大きく、多数の四角形の 3DCG を描画する。
31 右上の STOP ボタンで停止と再開を行う。
32
33 アニメを行う基本的なプログラムになっている。
34
35 onloadx2() で 3DCG の各モデルの定義を行い、その後すぐに draw() している。
36 つづく start() でアニメが開始される。（ setInterval() による run() の定期実行を行う）
37
38 run() は各アニメの数値の推移を行い、
39 "すい星"（大きな四角形の後に小さな四角形がパラパラと続く様子）
40 の尾の作成、消去など行い、最後に draw() している。
41
42 draw() は 3DCG の描画の基本的なプログラムが書かれている。
43
44 1. 画面に描く各四角形の４頂点の座標計算
45 2. 奥から手前の順になるようにソート（画家のアルゴリズム）
46 3. 描画
47
48 webGL やその他 3DCG などのライブラリは一切使用していません。
49
50
51 */
52
53 //---以下　変更しない部分
54
55 /*
56 <tag1 id="whiteareaID"> → relative, z-index=0; に変更される
57 <div>STOPやSPEEDなどのリンク</div> 自動作成される
58 <canvas></canvas> 自動作成される
59 </tag1>
60 */
61
62 var indexjs = new App();
72
73 //ページ読み込み完了で開始
74
75 //---画像プリロード
76
77 indexjs.images = {
78 "red" : "20180901-indexJS/imgs/red.png",
79 "green" : "20180901-indexJS/imgs/green.png",
80 "blue" : "20180901-indexJS/imgs/blue.png",
81 "mountainLeft" : "20180901-indexJS/imgs/mountainLeft.png",
82 "title" : "20180901-indexJS/imgs/title.png",
83 }
84 indexjs.onloadxCount = 0;
85 indexjs.onloadxCountMax = Object.keys( indexjs.images ).length + 1;
86 for( var name in indexjs.images ) {
87 var src = indexjs.images[ name ];
88 indexjs.images[ name ] = new Image();
89 indexjs.images[ name ].onload = indexjs.onloadx.bind( indexjs );
90 indexjs.images[ name ].src = src;
91 }
92 addEventListener( "load", indexjs.onloadx.bind( indexjs ) );
93
94
98
180
219
220 //---以上　変更しない部分
221
222
223 //---以下　変更する部分　目的のソフトウェア
224
259
273
274 //--- タイマ制御系
275
302