2014年11月24日月曜日

Web等の技術を、もっともっと教育利用できればいいですね

※ ソースコードを見やすくするために、Syntaxhilighterを使っています。状況によって表示に時間がかかる場合があります。

昨今のニュースを見ていて、技術、資本そして言葉も含めて、ありとあらゆるものが諸刃の剣かも知れないと思う今日この頃です。

その一方で、けっして暗い側面ばかりではなく、正しく活用すれば「その良い面を使って、もっと人々に役立たせることも出来る筈だ」という期待を持っています。

映像技術やWebの技術はもうすでに教育現場で活用され成果をあげていますが、さらに「技術の進歩と普及」を教育活用していけるのかも知れません。

********************

Scilabの紹介

以前、Scilabというフリーソフトで休日や夏休みに作ったものをいくつかご紹介しました。今回はこれを使って、子どもたちと数学と物理のお勉強です。

ちょっとずつ振幅と周期を変えたSine波を次々と重ね合わせていくと限りなく「のこぎり波」に近づいていく様子、そして電磁波では電界が磁界を、そして磁界が電界を交互に作りながら伝播していく様子を見せました（後者は正確にはもう少し検証が必要なのですが）。

後者の方はFDTD法という電磁場解析の手法の理解が必要なのでちょっと苦労しましたが、そこさえ乗り越えればフリーでここまで出来るとは驚きです。

 Sine波の重ね合わせによるのこぎり波の形成





電磁波の伝播 の様子（これも、もともとはアニメです）

数学における関数の級数近似（テイラー展開、マクローリン展開）や、 電磁気学におけるMaxwell方程式といったものの概念とそれがどう活用されているかを紹介（Maxwell方程式の詳細は高校生で理解する必要はないし、数式は一切見せませんでしたが）して、今彼らが高校で習っているCalculus（日本語では微分積分学ですね）を勉強することの意味や今後の展望について触れました。

私は子どもの頃にイマジネーションが欠けていたのかも知れませんが、こうした直感的に分かるものがあれば、もっともっと苦労せずに学習できただろうとも思います。

HTML5 + WebGL + Three.jsの紹介

さて、Web技術においてはHTML5が普及するにつれ、４年ほど前からWebGLというグラフィックスを扱ったツール群（ライブラリ）が登場しているようです。ただこのWebGL自体は比較的癖があり、JavaScript開発者には使いづらいという欠点がありました。

ところが、そのうちJavaScript開発者にも直感的にWebGLを扱えるThree.jsというライブラリが登場します*)。私も触ってみましたが、あまりの簡単さとその可能性に驚いています。

遠藤理平さんという東北大の博士課程を出た方のテキストを使っていますが、1～2時間も勉強すれば次のような図形が簡単に描けてしまいます（実際はFor Loopを使ってCubeがくるくる回転しています）。


上記のものは私の習作ですが、その本では、次のリンクなど、本格的なデモの紹介があります。

WebGL自体
水族館：　　　　Aquarium

人体解剖図：　Biodigital Human


WebGLを直感的、簡便に使えるようにしたThree.js
three.js - JavaScript 3D library


今後忙しくなるので、私自身は当面時間的に無理でしょうが、HTML5やこうした技術を使えば、数式に基づいた平面・空間図形の表示、そして物理シミュレーションまで、いろいろなものが比較的簡単に作れてしまうでしょう。アイディアとスキルさえあれば。

私の場合は、ScilabとHTML5+WebGL+Three.jsの長所と特長をそれぞれ使いながらとなるでしょうが。

いつかチャンスがあれば誰かと組むなり、こうしたオリジナルのツールを準備して、子どもたちや学生、世の中を背負う若者らといっしょに勉強し合える場を創れればと思います。

お金はありませんが、アイディアだけは湯水のように湧いて来ます（笑）


*)　http://matome.naver.jp/odai/2134456894777001501
three.jsについて
three.jsはHTML5でリッチなゲームなどを作る際に活用が期待される、WebGLをサポートした3D描画ライブラリです。OpenGL独特の使いにくさがあるWebGLをラッピングしており、JavaScript開発者にとって直感的に使いやすくなっています。またWebGL非サポート環境用としてCanvasやSVGでのレンダリングも可能で、WebGLまたはWebでの3D表現の入門用にはうってつけのライブラリといえます。


********************

以下、お恥ずかしいのですが、上記のThree.jsを利用した私の習作のコードです。

勉強のために私は手打ちをした上で、Cubeや半球の生成とその回転などを追加しました。が、基本的には教科書のコードを「コピペ」して、必要な部分を変えたり、追加するだけでいろいろなことが出来ます。

※ 現在、<!DOCTYPE html>や<html>、<head>といったタグがどうしても切れてしまいます。実際にそのまま使う場合には、注意願います。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<title>The Basic Drawing with Three.js (1)</title>
<script src="../javascript/three_r55.js"></script>     
<!-- Three.js用ライブラリ -->
 
<style>
div#canvas-frame{
 width: 512px;  /* 横幅 */
 height: 512px; /* 縦幅 */
}
</style>
<script>
  
window.addEventListener("load", function(){
 resizeTo(546, 567);
  
 threeStart();
});
 
function threeStart(){
 initThree();
 initCamera();
 initLight();  //光源初期化関数の実行
 initObject();
 //draw();
loop();
 
}
 
var renderer,scene,canvasFrame;
 
function initThree(){
 canvasFrame=document.getElementById('canvas-frame');
 
 renderer=new THREE.WebGLRenderer({antialias: true});
 if (!renderer) alert('Three.js failed init');
 
 renderer.setSize(canvasFrame.clientWidth,canvasFrame.clientHeight);
 
 canvasFrame.appendChild(renderer.domElement);
 
 renderer.setClearColorHex(0xEEEEEE, 1.0);
 scene=new THREE.Scene();
}
 
var camera;
 
function initCamera(){
 camera=new THREE.PerspectiveCamera(45, canvasFrame.clientWidth/canvasFrame.clientHeight, 1, 10000);
 
 camera.position.set(30,30,30);
 camera.up.set(0,0,1);
 camera.lookAt({x:0, y:0, z:0});
}
 
var directionalLight;   //平行光源オブジェクト
  
function initLight() {
 //平行光源オブジェクトの生成
   
 directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1.0, 0);
 directionalLight.position.set(50, 20, 100);
  //平行光源オブジェクトのシーンへの追加
  scene.add(directionalLight);
  
}
  
var axis, sphere, cube;
 
function initObject() {
  //軸オブジェクトの生成
   
 axis = new THREE.AxisHelper(50);
//軸オブジェクトのシーンへの追加
 scene.add(axis);
//軸オブジェクトの位置座標を設定
 axis.position.set(0, 0, 0);
//形状オブジェクトの宣言と生成
 
// Sphere
 var geometry = new THREE.SphereGeometry(10, 20, 20, 0, Math.PI);
 var material = new THREE.MeshLambertMaterial({ color: 0xFF0000, wireframe: true });
   
 sphere = new THREE.Mesh(geometry, material);
 //球オブジェクトのシーンへの追加
   scene.add(sphere);
 //球オブジェクトの位置座標を設定
   
 sphere.position.set(0, 0, 0);
 
// Cube
 var geometry2 = new THREE.CubeGeometry(10, 10, 10);
 var material2 = new THREE.MeshLambertMaterial({ color: 0x0000FF, wireframe: false });
 
 cube = new THREE.Mesh(geometry2, material2);
 //Cubeオブジェクトのシーンへの追加
   scene.add(cube);
 //Cubeオブジェクトの位置座標を設定
   
 cube.position.set(-5,5,5);
 cube.rotation.x=Math.PI/4; 
}
 
var step = 0; //ステップ数
  
function loop() {
 
 step++;
  //各立方体の角度の変更
 cube.rotation.set(step/100, 0, 0);
 
 renderer.clear();
 renderer.render(scene, camera);
 requestAnimationFrame(loop);
}
 
function draw(){
 renderer.clear();
 renderer.render(scene,camera);
}
 
</script>
 
 
 
<div id="canvas-frame">
</div>



投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)