波動方程式で波を再現 edo_m18 Follow 2015-06-27 00:48:18 License: MIT License Fork5 Fav8 View4018 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 152 lines HTML 2 lines CSS 5 lines 波動方程式で波を再現 \frac{1}{s^2} \frac{\delta^2 u}{\delta t^2} = \Delta u このニコニコ動画の解説がとても分かりやすいです。 波の伝播シミュレーションの実装解説 波動方程式で波を再現 (function () { 'use strict'; var MAX_X = 100; var MAX_Y = 100; // 伝播スピード var k = 0.2; // 減衰率 var attenuation = 0.999; var U = []; var Vel = []; // 初期化 for (var x = 0; x < MAX_X; x++) { U[x] = []; Vel[x] = []; for (var y = 0; y < MAX_Y; y++) { U[x][y] = 0; Vel[x][y] = 0; } } // 最初の波 U[MAX_X/2][MAX_Y/2] = 10; document.addEventListener('click', function () { U[MAX_X/2][MAX_Y/2] += 10; }, false); function updateWave() { // 波動方程式 // \frac{1}{s^2} \frac{\delta^2 u}{\delta t^2} = \Delta u for (var x = 1; x < MAX_X - 1; x++) { for (var y = 1; y < MAX_Y - 1; y++) { var accel = U[x ][y-1] + U[x ][y+1] + U[x-1][y ] + U[x+1][y ] - U[x ][y ] * 4; accel *= k; Vel[x][y] = (Vel[x][y] + accel) * attenuation; } } for (var x = 1; x < MAX_X - 1; x++) { for (var y = 1; y < MAX_Y - 1; y++) { U[x][y] += Vel[x][y]; } } for (var x = 0; x < MAX_X - 1; x++) { for (var y = 0; y < MAX_Y - 1; y++) { var idx = x + (MAX_X * y); geometry.vertices[idx].z = U[x][y]; } } geometry.computeFaceNormals(); geometry.verticesNeedUpdate = true; geometry.normalsNeedUpdate = true; geometry.uvsNeedUpdate = true; } var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setClearColor(0x000000); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setViewport(0, 0, window.innerWidth, window.innerHeight); renderer.setScissor(0, 0, window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 30; camera.position.y = -30; camera.lookAt(new THREE.Vector3(0, 0, 0)); var controls = new THREE.OrbitControls(camera); var geometry = new THREE.Geometry(); var material = new THREE.MeshLambertMaterial({ color : 0x4499ff, wireframe: true, side : THREE.DoubleSide }); var uvs = []; var w = MAX_X - 1; var h = MAX_Y - 1; for (var i = 0; i < MAX_X; i++) { for (var j = 0; j < MAX_Y; j++) { geometry.vertices.push(new THREE.Vector3(i, j, 0)); uvs.push(new THREE.Vector2(i / w, j / h)); } } for (var j = 0; j < MAX_Y - 1; j++) { for (var i = 0; i < MAX_X - 1; i++) { var idx0 = (j * MAX_X) + i; var idx1 = idx0 + 1; var idx2 = idx0 + MAX_X; var idx3 = idx1; var idx4 = idx2; var idx5 = idx2 + 1; geometry.faces.push(new THREE.Face3(idx0, idx1, idx2)); geometry.faces.push(new THREE.Face3(idx3, idx4, idx5)); geometry.faceVertexUvs[0].push([ uvs[idx0], uvs[idx1], uvs[idx2] ]); geometry.faceVertexUvs[0].push([ uvs[idx3], uvs[idx4], uvs[idx5] ]); } } var mesh = new THREE.Mesh(geometry, material); mesh.position.x -= MAX_X / 2; mesh.position.y -= MAX_Y / 2; scene.add(mesh); // light var light = new THREE.DirectionalLight(0xfffffff); light.position.set(1, 1, 1); scene.add(light); var ambient = new THREE.AmbientLight(0x666666); scene.add(ambient); var prevTime = Date.now(); (function loop() { renderer.render(scene, camera); controls.update(); updateWave(); setTimeout(loop, 16); }()); }()); <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script> <script src="http://jsrun.it/assets/b/j/S/2/bjS2X"></script> 波動方程式で波を再現 * { margin: 0; padding: 0; border: 0; } # 波動方程式で波を再現 \frac{1}{s^2} \frac{\delta^2 u}{\delta t^2} = \Delta u このニコニコ動画の解説がとても分かりやすいです。 [波の伝播シミュレーションの実装解説](http://www.nicovideo.jp/watch/sm9470923) (function () { 'use strict'; var MAX_X = 100; var MAX_Y = 100; // 伝播スピード var k = 0.2; // 減衰率 var attenuation = 0.999; var U = []; var Vel = []; // 初期化 for (var x = 0; x < MAX_X; x++) { U[x] = []; Vel[x] = []; for (var y = 0; y < MAX_Y; y++) { U[x][y] = 0; Vel[x][y] = 0; } } // 最初の波 U[MAX_X/2][MAX_Y/2] = 10; document.addEventListener('click', function () { U[MAX_X/2][MAX_Y/2] += 10; }, false); function updateWave() { // 波動方程式 // \frac{1}{s^2} \frac{\delta^2 u}{\delta t^2} = \Delta u for (var x = 1; x < MAX_X - 1; x++) { for (var y = 1; y < MAX_Y - 1; y++) { var accel = U[x ][y-1] + U[x ][y+1] + U[x-1][y ] + U[x+1][y ] - U[x ][y ] * 4; accel *= k; Vel[x][y] = (Vel[x][y] + accel) * attenuation; } } for (var x = 1; x < MAX_X - 1; x++) { for (var y = 1; y < MAX_Y - 1; y++) { U[x][y] += Vel[x][y]; } } for (var x = 0; x < MAX_X - 1; x++) { for (var y = 0; y < MAX_Y - 1; y++) { var idx = x + (MAX_X * y); geometry.vertices[idx].z = U[x][y]; } } geometry.computeFaceNormals(); geometry.verticesNeedUpdate = true; geometry.normalsNeedUpdate = true; geometry.uvsNeedUpdate = true; } var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setClearColor(0x000000); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setViewport(0, 0, window.innerWidth, window.innerHeight); renderer.setScissor(0, 0, window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 30; camera.position.y = -30; camera.lookAt(new THREE.Vector3(0, 0, 0)); var controls = new THREE.OrbitControls(camera); var geometry = new THREE.Geometry(); var material = new THREE.MeshLambertMaterial({ color : 0x4499ff, wireframe: true, side : THREE.DoubleSide }); var uvs = []; var w = MAX_X - 1; var h = MAX_Y - 1; for (var i = 0; i < MAX_X; i++) { for (var j = 0; j < MAX_Y; j++) { geometry.vertices.push(new THREE.Vector3(i, j, 0)); uvs.push(new THREE.Vector2(i / w, j / h)); } } for (var j = 0; j < MAX_Y - 1; j++) { for (var i = 0; i < MAX_X - 1; i++) { var idx0 = (j * MAX_X) + i; var idx1 = idx0 + 1; var idx2 = idx0 + MAX_X; var idx3 = idx1; var idx4 = idx2; var idx5 = idx2 + 1; geometry.faces.push(new THREE.Face3(idx0, idx1, idx2)); geometry.faces.push(new THREE.Face3(idx3, idx4, idx5)); geometry.faceVertexUvs[0].push([ uvs[idx0], uvs[idx1], uvs[idx2] ]); geometry.faceVertexUvs[0].push([ uvs[idx3], uvs[idx4], uvs[idx5] ]); } } var mesh = new THREE.Mesh(geometry, material); mesh.position.x -= MAX_X / 2; mesh.position.y -= MAX_Y / 2; scene.add(mesh); // light var light = new THREE.DirectionalLight(0xfffffff); light.position.set(1, 1, 1); scene.add(light); var ambient = new THREE.AmbientLight(0x666666); scene.add(ambient); var prevTime = Date.now(); (function loop() { renderer.render(scene, camera); controls.update(); updateWave(); setTimeout(loop, 16); }()); }()); <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script> <script src="http://jsrun.it/assets/b/j/S/2/bjS2X"></script> * { margin: 0; padding: 0; border: 0; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? # 波動方程式で波を再現 \frac{1}{s^2} \frac{\delta^2 u}{\delta t^2} = \Delta u このニコニコ動画の解説がとても分かりやすいです。 [波の伝播シミュレーションの実装解説](http://www.nicovideo.jp/watch/sm9470923) Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author edo_m18 URLhttp://edom18.hateblo.jp/ Unity/VRエンジニア。 最近のもっぱらの興味は機械学習(ディープラーニング)とレイマーチング(とレイトレ)。 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/nuZF/js"></script> 3D Animation HTML5 html5_elements&api library&test WebGL アニメーション Discussion Questions on this code? Tags 3D Animation HTML5 WebGL html5_elements&api library&test アニメーション Favorite by YasuHiro tonkotsuboy ethertank simiraaaa GSSxGSS h_doxas siouxcitizen cx20 Forked sort by latest page views favorite forked forked: 波動方程式で波を再現 _nabe 00 630 153/2/5 3D Animation HTML5 WebGL html5_elements&api library&test アニメーション forked: 波動方程式で波を再現 _nabe 00 494 168/2/5 3D Animation HTML5 WebGL html5_elements&api library&test アニメーション forked: 波動方程式で波を再現 yama1866 00 728 153/2/5 3D Animation HTML5 WebGL html5_elements&api library&test アニメーション forked: 波動方程式で波を再現 ushiostarfis 00 786 153/2/5 3D Animation HTML5 WebGL html5_elements&api library&test アニメーション 1 2NEXT>>