「HTML5による物理シミュレーション【拡散・波動編】」出版決定（発売日：2013年5月25日）

HTML5による物理シミュレーション【拡散・波動編】
JavaScriptライブラリとCanvas 2D Context/Web Workersを使う

著者　遠藤 理平
出版社　株式会社カットシステム
発売日　2013年5月25日
判型　B5変型判、456頁
税込価格　4,410円（本体4,200円）
ISBN　978-4-87783-312-1

最新のthree.jsで利用するために必要な変更点をまとめました：three.js仕様変更による変更点（PDF）

フジテレビ月９ドラマ【ガリレオ】HTML5による物理シミュレーション＆動画の提供決定！

はじめに

　本書は、HTML5を利用しウェブブラウザのみで完結した物理シミュレーション環境（仮想物理実験室）の構築手法と物理学の基礎を実践を交えながら習得することを目的とした『HTML5による物理シミュレーション』（以下『前編』と表記）の続編です。

　HTML5で作成したアプリケーションは、ウェブブラウザを介して様々な環境で実行することができる上に、当然ながら、HTMLの本領であるウェブ上での公開も容易です。本書では、アプリケーションの共通プラットフォームであるHTML5の一つの応用例として、インタラクティブな新しい科学コミュニケーションツールとしての可能性を提案します。

　物理シミュレーション環境の構築には、【入力】【演算】【描画】の３要素が必要となります。これまで、【入力】は各実行環境に応じたGUI、【演算】はC言語などのプログラミング言語、【描画】は二次元グラフ描写ならgnuplot、３次元グラフィックスならOpenGLというように、それぞれ独立に環境を用意し、技術を習得する必要がありました。

　これに対してHTML5では、これら３要素を統一的に扱うことができ、かつ環境を別途用意する必要もなく、ウェブブラウザのみで実行可能になったことが、本書がHTML5による物理シミュレーションを提案する最大の根拠です。各ブラウザの性能が飛躍的に向上した恩恵により、これまで敷居の高かった物理シミレーションが、簡単かつ高水準で実行可能となったのです。

　さらに今回、嬉しい誤算として、これまでボトルネックと考えられていた【演算】を担うJavaScriptの計算速度が、科学計算などの高速な数値計算に利用されるC言語と比べて、わずか１割程度しか遅くないことを示すことができました（詳細は本書2.3.3項を参照）。一般的にJavaScriptは、様々な形式のオブジェクトを取り扱うツールとして利用する場合、コンパイル言語と比べて処理速度が10倍ほど遅いと言われていますが、こと数値計算に限れば、C言語にも劣らない計算速度を、現ブラウザで実現できるようになったのです。

　このことは、ウェブブラウザが、これまでの単なるウェブページを閲覧するためだけのツールではなく、本格的な数値計算やシミュレーションなどを実行するプラットフォームとしての性能を十分に有していることを意味します。HTML5が新しいインタラクティブな科学コミュニケーションツールとして、世界中で活躍する日も近づいているでしょう。

　また、本書は『前編』とあわせることで、物理現象を理解する上で欠かせない物理量の可視化方法を、HTML5を用いて実装できる能力を習得できるよう構成されています。物理現象の多くは、常微分方程式と偏微分方程式で記述されています。常微分方程式の代表例がニュートン運動方程式、偏微分方程式の代表例が拡散方程式と波動方程式です。これらは、古典力学・電磁気学・量子力学など物理学の様々な基礎理論分野に、頻繁に登場する方程式です。

　『前編』では、古典物理学の基礎である質点の運動の時間発展を二次元グラフならびに仮想３次元空間において可視化することを行いました。そして本書では、拡散現象や波動現象に対する数値計算手法の習得、ならびに物理量の空間分布に対する二次元カラーマップや二次元正方格子を用いた表現手法の習得を行います。以上の計算方法かつ描画方法の習得により、物理学の他分野にも切り込める道具を手にすることができます。

　本書を通じて、HTML5の持つポテンシャルの高さをぜひ体感いただき、また、数学や物理学についての興味を持つきっかけとなれば、筆者としてこれほどの喜びはありません。なお、筆者の勉強不足のために、プログラムや数学、物理学の説明に間違いが有るかもしれません。その際はお手数ですが、ご指摘いただければ幸いです。

最後に、『前編』に引き続き本書の執筆の機会を頂きました株式会社カットシステムの石塚勝敏さん、今回も厳しいスケジュールのなか丁寧な編集を行なって頂きました株式会社チューリングの鈴木光治さん、また、日常的に議論に付き合って頂いている特定非営利活動法人natural scienceの皆さんには、深く感謝申し上げます。

2013年5月 遠藤理平

目次

• 第１章 Canvas 2D Contextによる2次元ビットマップ画像描画入門
  • 1.1 Canvas 2D Contextの基本
    • 1.1.1 Canvas 2D ContextとWebGL
    • 1.1.2 ベクタ形式とラスタ形式
    • 1.1.3 Canvas 2D Contextの準備
  • 1.2 ベクタ形式による描画
    • 1.2.1 直線の描画
    • 1.2.2 三角形の描画
    • 1.2.3 様々な形状の描画
    • 1.2.4 円と円弧の描画
  • 1.3 ラスタ形式による描画
    • 1.3.1 矩形の描画と消去
    • 1.3.2 ビットマップデータの作成と描画
    • 1.3.3 ビットマップ画像の例
    • 1.3.4 ラスタ形式データの取り込みと描画
    • 1.3.5 ラスタ形式データの画像処理
    • 1.3.6 ラスタ形式データの出力
  • 1.4 Canvas 2D Contextによるアニメーション
    • 1.4.1 「requestAnimationFrame()」と無限ループ
    • 1.4.2 アニメーションの実装例１：「ボール跳ね返りアニメーション
    • 1.4.3 アニメーションの実装例２：「ライフゲーム」
  • 1.5 Cancas 2D Context メソッドとプロパティ
    • 1.5.1 コンテキストのメソッド一覧
    • 1.5.2 コンテキストのプロパティ一覧
    • 1.5.3 イメージデータのプロパティ一覧
    • 1.5.4 Imageクラスのプロパティ一覧
• 第２章 Web Workers APIによる並列計算入門
  • 2.1 Web Workersの仕組みと基本形
    • 2.1.1 ホストプログラムとワーカープログラム
    • 2.1.2 Web Workersの基本形
    • 2.1.3 ホスト・ワーカー間のオブジェクトの送受信
  • 2.2 Web Workersによる並列計算
    • 2.2.1 並列計算の基本概念
    • 2.2.2 「2～Nまでの素数の数え上げ」アルゴリズム（ワーカーなし）
    • 2.2.3 「2～Nまでの素数の数え上げ」アルゴリズム（ワーカーあり）
    • 2.2.4 複数のワーカーによる並列計算アルゴリズム
    • 2.2.5 ワーカー数と計算時間との関係性
  • 2.3 並列計算アルゴリズムの最適化
    • 2.3.1 並列計算アルゴリズムの最適化方法
    • 2.3.2 Web Workersの排他制御
    • 2.3.3 「JavaScript」VS「C言語」
• 第３章 物理シミュレーション環境の構築
  • 3.1 Three.js による「波動関数」＆「分布関数」の表現
    • 3.2.1 「replot()」メソッドによるアニメーションの実装
    • 3.2.2 複数canvas要素によるアニメーションの実装
    • 3.2.3 ２次元グラフのPNG出力とPNGアニメーションの実装
  • 3.2 jqPlot による 2次元グラフアニメーションの実装
    • 3.2.1 共通インターフェースのHTMLの構造
    • 3.2.2 外部CSSファイルの構造
  • 3.3 アニメーション制御
    • 3.3.1 ボタンによるアニメーション制御：２次元グラフ
    • 3.3.2 ボタンによるアニメーション制御：２次元正方格子と２次元カラーマップ
    • 3.3.3 jQuery UIによるアニメーションの制御
    • 3.3.4 WebWorkersによる２次元グラフの準備
  • 3.4 アニメーションビューアの開発
    • 3.4.1 ２次元グラフ・アニメーションビューア
    • 3.4.2 ２次元正方格子・アニメーションビューア
• 第４章 フーリエ級数の入門
  • 4.1 べき級数展開（テーラー展開）
    • 4.1.1 べき級数展開の定義
    • 4.1.2 べき級数展開の例
  • 4.2 フーリエ級数展開
    • 4.2.1 フーリエ級数展開の定義
    • 4.2.2 三角関数の直交性
    • 4.2.3 展開係数の導出
    • 4.2.4 フーリエ級数の完全性（中級）
    • 4.2.5 フーリエ級数展開の例
    • 4.2.6 フーリエ級数ビューア（FourierTransformViewer.html）
  • 4.3 数値積分計算アルゴリズムの導出
    • 4.3.1 数値積分の基本的な考え方
    • 4.3.2 １次精度の計算アルゴリズム「矩形公式」
    • 4.3.3 ２次精度の計算アルゴリズム「台形公式」
    • 4.3.4 ４次精度の計算アルゴリズム「シンプソンの公式」
    • 4.3.5 数値積分計算機（NumericalIntegralCalculator.html）
  • 4.4 様々な関数のフーリエ級数展開
    • 4.4.1 展開係数の数値計算方法
    • 4.4.2 展開係数計算機（FourierTransformCoefficientCalculator.html）
    • 4.4.3 初等関数のフーリエ級数展開
    • 4.4.4 ガウス分布によるフーリエ級数展開
• 第５章 拡散現象と拡散方程式
  • 5.1 拡散方程式の導出
    • 5.1.1 「ニュートンの運動方程式」と計算の限界
    • 5.1.2 多粒子系→１粒子系への近似「ランジュバン方程式」
    • 5.1.3 「ランジュバン方程式」から「拡散方程式」へ
  • 5.2 拡散方程式の解析解と時間発展
    • 5.2.1 拡散方程式の一般解
    • 5.2.2 拡散方程式の解析解ビューア
    • 5.2.3 拡散方程式の解析解シミュレーション
  • 5.3 拡散方程式の計算アルゴリズム
    • 5.3.1 拡散方程式の差分化
    • 5.3.2 計算アルゴリズムの導出
    • 5.3.3 初期条件と境界条件の設定
  • 5.4 拡散現象の物理シミュレーション
    • 5.4.1 拡散方程式の数値シミュレータ（１次元）
    • 5.4.2 数値シミュレーション結果１：境界条件の違いの確認
    • 5.4.3 数値シミュレーション結果２：拡散係数の空間依存性の確認
  • 5.5 熱拡散シミュレーション
    • 5.5.1 熱拡散シミュレータの開発
    • 5.5.2 銅板の温度変化のシミュレーション
    • 5.5.3 水中に置かれた銅板の温度変化のシミュレーション
• 第６章 波動現象と波動方程式
  • 6.1 波動方程式の導出
    • 6.1.1 波動現象とは
    • 6.1.2 微小紐片の運動方程式から波動方程式へ（横波）
    • 6.1.3 バネ振動子の運動方程式から波動方程式へ（縦波）
  • 6.2 波動方程式の解析解と時間発展
    • 6.2.1 波動方程式の基本解：平面波
    • 6.2.2 波動方程式の一般解と境界条件
    • 6.2.3 展開係数の計算方法
    • 6.2.4 波動方程式の解析解ビューア
    • 6.2.5 波動方程式の解析解シミュレーション
    • 6.2.6 固定端条件における三角波シミュレーション
  • 6.3 波動方程式の数値シミュレーション
    • 6.3.1 波動方程式の差分化と計算アルゴリズム
    • 6.3.2 波動方程式の数値シミュレータ（１次元）
    • 6.3.3 波動方程式の数値シミュレータ（２次元）
  • 6.4 回折・干渉・ドップラー効果のシミュレーション
    • 6.4.1 波の回折現象
    • 6.4.2 波の干渉現象
    • 6.4.3 ドップラー効果
  • 6.5 透過と反射のシミュレーション
    • 6.5.1 透過係数と反射係数
    • 6.5.2 入射波・反射波・透過波の描画
    • 6.5.3 ガウスパルスの透過と反射【中級】

付属サンプルプログラム一覧

本書で取り扱ったすべての題材にはサンプルプログラムが用意されています。

サンプルプログラム実行例（画面キャプチャ）

第１章

ビットマップによるRGBカラーモデルの描画

ビットマップによるマンデルブロ集合（発散速度によるグラデーション）の描画

第２章

素数の数え上げプログラムに対する計算時間のワーカー数依存性の計算＋可視化（jqPlot）

第３章

２次元正方格子による２次元カラーマップ表示

２次元正方格子・アニメーションビューア

第４章

フーリエ級数ビューア

数値積分計算機

フーリエ級数展開係数計算機

第５章

【仮想物理実験室１】拡散方程式の解析解ビューア

【仮想物理実験室３】熱拡散シミュレータ

第６章

【仮想物理実験室４】波動方程式の解析解ビューアの例（バイオリンの弦の振動）

【仮想物理実験室６】波動方程式の数値シミュレータ（2 次元）

【仮想物理実験室６】波動方程式の数値シミュレータ（2 次元）の例（回折現象シミュレーション）

【仮想物理実験室６】波動方程式の数値シミュレータ（2 次元）の例（点波源による干渉シミュレーション）

【仮想物理実験室６】波動方程式の数値シミュレータ（2 次元）の例（ドップラー効果））

最後に実際に動作するデモを紹介します

WebGLに対応したウェブブラウザでご覧ください　→　波動方程式による時間発展（ノイマン境界条件）