はてなブックマーク

文責：遠藤理平 公開日：2016年05月21日 最終更新日：2016年12月30日 本コンテンツについて 「HTML5による仮想物理実験室（物理シミュレーション）」は、HTML5の強みを活かして物理現象を可視化することを目的として作成しています。 興味のある方は下記からダウンロード後、ご利用ください。 なぜHTML5？ 物理シミュレーション環境の構築に必要な要素として、【入力】【演算】【描画】の３つが挙げられます。これまで【入力】は各実行環境に応じたGUI、【演算】はC言語などのプログラミング言語、【描画】は二次元グラフ描写ならgnuplot、３次元グラフィックスならOpenGLというように、独立したアプリケーションをそれぞれ習得する必要がありました。 しかしながら、HTML5の登場により、状況は劇的に変化しつつあります。【入力】はHTMLが本来得意とするインタラクティブ・インターフェース

特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ HTMLはユーザーとのインタラクティブのためのインターフェースが充実しています。 select要素を用いるとプルダウンメニューを作成することができ、JavaScriptを用いるとユーザーが選択した選択肢を即座に取得することができます。 select要素によるプルダウンメニューの作成方法 プルダウンメニューの選択肢はselect要素の子要素に、選択肢の数だけoption要素を用意することで作成することができます。 <select id="word"> <option value="none">選択してください</optio

特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ 「physics.js」の概要 「physics.js」は、ウェブブラウザ内に仮想物理実験室を構築し、物理シミュレーション（数値計算＋３次元グラフィックス＋２次元グラフ）を実行するためのHTML5フレームワークです。 と言ってもまだ剛体物理学の極々一部分のみを対象としているに過ぎませんが、今後様々な物理現象の物理シミュレーションをウェブブラウザで実行できることを目的に開発を進めて行きます。 本ウェブページでは「physics.js」の使い方や物理現象の解説を行い、計算アルゴリズムや物理エンジンの開発方法については、以下の

特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ 数値計算を行った際の結果をグラフで確認したい時、最もよく利用されるのはフリーで高機能な「gnuplot」だと思います。gif, jpg, epsファイルの出力からアニメーションまでかなりことができます。 しかしながら、ただちょっとぱっと見たいときにも、次の動作が最低必要となります。 １．gnuplot の起動 ２．データファイルを gnuplot 作業フォルダまで移動 ３．コマンド「plot "sample.data" u 1:2 w l, "sample.data" u 1:3 w l, "sample.data" u

特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ 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による物理シミュレー

特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ HTML5による物理シミュレーション JavaScriptでThree.js/jqPlot/jQuery UIを使う 著者　遠藤 理平 出版社　株式会社カットシステム 発売日　2013年2月22日 判型　B5変型判、392頁 税込価格　3,990円（本体 3,800円） ISBN　978-4-87783-303-9 最新のthree.jsで利用するために必要な変更点をまとめました：three.js仕様変更による変更点（PDF） 本書の続編となる「HTML5による物理シミュレーション【拡散・波動編】」が2013年5月25日

フォトトランジスタは光を受けると、電流を流す電子部品である。 普通のトランジスタはベース電流を流すとコレクタ電流を引き込むが、 フォトトランジスタでは光を受けるとベース電流が流れコレクタ電流を引き込む。 フォトトランジスタが応答する光は、波長域が仕様で決められており、 可視光に応答するものや、赤外線に応答するものがある。 フォトトランジスタと赤外線LEDを使うことによって、 デジタル信号を赤外線にして、空間に放ち、フォトトランジスタで受信することができる。 また、赤外線LEDとフォトトランジスタを向き合わせて固定し、 その間を、ものが遮ったときにフォトトランジスタがオフになることを利用し、 ものがあるかないかをデジタル信号に変えるセンサとすることができる。 赤外線LEDとフォトトランジスタを使う回路を製作したので、回路図と、 実際の様子を示す。 回路図

特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ コンピュータ・シミュレーション講座 ODE (Open Dynamic Engine) 入門 natural science では、VisualC++ と OpenGL を用いて「コンピュータ・シミュレーション講座」を開講しておりますが、 物理シミュレーションの前に、C言語、OpenGL、計算アルゴリズム、数学、物理学など、勉強しなければいけないことがたくさんあります（ボトムアップ型とでも読んでおきます）。 小中高校生がこれらを同時に勉強することは非常に困難であるために、シミュレーション自体の面白さを味わうまでには相当の

ウェブページで数式を利用する(TEX表記) ウェブページで数式を用いた情報発信を行おうとするとき、いつも問題になるのが式の取り扱いについてです。 HTMLでは複雑な数式を表現することができないため、gifなど図としてHTMLに埋め込むことが一般的に行われます。 その際に問題となるのが「どのようにして図を作るのか」ということです。 自分はこれまで「Equation Magic」というソフトを利用しています。 このソフトの利点は、「TEX表記」で式を出力でき、かつコピーアンドペーストでベクトルデータとして扱える点です。 Illustratorなどのベクトルデータを扱えるソフトと組み合わせることで、数式のあるプレゼン資料などを簡単に作成することができます。 WEBページで利用する場合も、Equation Magicでgifに出力できるので問題は無いのですが、手間がかかることが唯一の欠点でした。

特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ 今までは、マイコンからの出力をプログラミングしてきました。AVR マイコンからの配線図を図16.1 に示します。電圧の出力はPORTB から行われ、[5V] あるいは1[0V] が出力されます。LED 発光時の消費電流は表示灯用途では数mA～50mA 程度なので、抵抗を使うことによって電流を小さくしています。 Figure：AVR マイコンからLED への出力 スイッチからの入力とLEDの点灯 今回は、入出力システムを構築します。PORTC を入力用の端子として使用します。スイッチのオン・オフの状態をPORTC からの入

特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ ３次元空間中の物体を任意の軸に対して、任意の角度回転させることを考えます。 これは、コンピュータグラフィックなどの世界で、マウス操作などの入力装置を利用して３次元の物体の向きを変更させたいときに必須となります。 一般的に「回転」といえば「オイラー角」を思い浮かべるわけですが、任意の軸に対する回転は不得意であることが知られています。 それは、任意の軸に対する回転に対応する３つのオイラー角が直感的には定式化できないためです。 また、場合によってはジンバルロックと呼ばれるオイラー角を利用時に特定の条件で発生する特有の問題もあり

特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ 昨今の HTML5 ブームは、グラフ描画ソフトの雄である「gnuplot」にも飛び火しています。 HTML5 とはウェブページ作成用の言語である HTML の最新規格のことですが、単に「ウェブページ」の世界に留まらない魅力にあふれる規格として注目を集めています。 これまでPCの世界では、OS（オペレーションシステム）の選択から始まり、その OS 上で動作するアプリケーションを導入するというスキームでした。 しかしながら、スマートフォンやタブレット型PCなどの様々な情報端末が普及するにつれ、各々の環境で動作するアプリケーシ

特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ gnuplot はフリーのグラフ描画ツールですが、アニメーションも作ることができます。 gnuplot でアニメーション サイクロイド曲線では、 ファイル名が連番な jpg ファイルを書き出し、 「TMPGEnc」や「Giam」を用いて結合することでアニメーションを実現しましたが、gnuplot では直接 gif アニメーションを作成することができます。 gnuplot テンプレート 前回のサイクロイド曲線のテンプレートを改造して、gif アニメーションを作成するテンプレートを作成します。 出力ファイル名などを指定するた

特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ WebWorker とは、HTML5 API の１つで、Javascript を並列計算するために標準で用意されている規格です。 通常 Javascript は CPU の１つのスレッドで演算を行うため、もし時間のかかる演算の場合にはその演算が終わるまで次の命令を受け付けません。 一方、WebWorker を利用すると、予め処理を定義しておいた「Worker」を任意のタイミングで呼び出すことで、重い演算のマルチスレッド処理が可能となります。 つまり、昨今のマルチコア搭載マシンで、 Javascript を利用した演算を効

HTML5による物理シミュレーション〜２重振子シミュレータ〜 本シミュレータは、HTML5(canvas要素)＋WebGL(Three.jsライブラリ)を用いて、プラグインなし実行することができます。 ただし、クライアントサイドのブラウザとグラフィックカードが、HTML5とWebGLに対応している必要があります。 本シミュレータの特徴 （１）直交座標系で記述した２重振子を４次のルンゲクッタを用いてJavascriptで計算しています （２）計算結果をリアルタイムにcanvas要素にWebGLを用いて描画しています （canvas要素はjavascriptで動的に生成されています） （３）グラフ描画ライブラリ flotr2 を利用して、おもりの位置（z座標）とひもの張力をリアルタイムにグラフ描画します （４）マウスドラックとマウスホイールで視点を移動することができます （５）各物理量がリアル

特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ 本稿は コンピュータ内に仮想物理実験室を構築する上で必要不可欠なコンピュータ・グラフィックの定番である OpenGL（GUUT, GLSL）を学習することが目的です。とはいえ、OpenGL（GUUT, GLSL）に関してはこれまでに多くの有用な情報が存在するため（下記の参考リストを参照）、ここでは OpenGL そのものについての解説は行わず、 物理シミュレーション結果の可視化に焦点を当てた構成にできればと考えています。 また最新の技術である HTML5 の canvas 要素を使用した OpenGL のウェブ版である

本稿では新しいWEBページ用の言語であるHTML5＋WebGLを利用して、 ウェブブラウザ上で、物理シミュレーションの計算と描画をリアルタイムに実行する「物理シミュレータ」の作成までの手順を記述します。 本稿では、物理シミュレータの例として、任意の初期条件に対する２重振り子の時間発展を４次のルンゲクッタ法を計算する「２重振子シミュレータ」を構築します。また、本稿では WebGL を簡単に利用することができるWebGLライブラリとして著名な Three.js を用いています。 物理や工学とは無関係に、初めて Three.js を利用する人がチュートリアルとしても利用できることも意図しております。 パート１では、主に Three.js の使い方について触れました。 パート２では、拘束力のある運動の代表例である単振子を取り上げ、物理演算結果のリアルタイム描画＋物理量の時間発展の様子をグラフ化しま

特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ Three.js とは、HTML5で新しく登場する canvas 要素に Javascript を利用して描画する際に、便利なライブラリとして知られています。 これまで本サイトでは、canvas 要素に描画するデータを GPU 上から直接利用する WebGL と呼ばれるAPIのライブラリとして、Three.jsを利用しています。 本稿では、JAXAが公開している小惑星イトカワの形状データを利用して、ウェブ上でイトカワの３次元的に描画すること行います。 ある程度リアルな形状を実現しようとすると頂点データが膨大となり、マウス

特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。　|　More ≫ コンピュータ・シミュレーション講座 仮想物理実験室 「ルンゲ・クッタで行こう！～物理シミュレーションを基礎から学ぶ～」出版決定（発売日：2018年4月3日） ルンゲ・クッタで行こう！～物理シミュレーションを基礎から学ぶ～ 著者　遠藤 理平 出版社　株式会社カットシステム 判型　B5変型、400頁 本体価格 4,600円（税込 4,968円） ISBN　978-4-87783-435-7 本書は、物理シミュレーションを勉強したいと志した方を対象に、ルンゲ・クッタ法を用いて理工学系大学1年生程度で学習する物理学の内容を数値計

本稿では新しいWEBページ用の言語であるHTML5＋WebGLを利用して、 ウェブブラウザ上で、物理シミュレーションの計算と描画をリアルタイムに実行する「物理シミュレータ」の作成までの手順を記述します。 本稿では、物理シミュレータの例として、任意の初期条件に対する２重振り子の時間発展を４次のルンゲクッタ法を計算する「２重振子シミュレータ」を構築します。また、本稿では WebGL を簡単に利用することができるWebGLライブラリとして著名な Three.js を用いています。 物理や工学とは無関係に、初めて Three.js を利用する人がチュートリアルとしても利用できることも意図しております。 パート１では、主に Three.js の使い方について触れました。 パート２では、拘束力のある運動の代表例である単振子を取り上げ、物理演算結果のリアルタイム描画＋物理量の時間発展の様子をグラフ化しま