2015-06-27 00:48:18

License: MIT License

Fork: 5

Fav: 8

View: 4091

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);

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);
    }());

}());

波動方程式で波を再現

# 波動方程式で波を再現 \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; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

edo_m18

URL
http://edom18.hateblo.jp/

Unity/VRエンジニア。最近のもっぱらの興味は機械学習（ディープラーニング）とレイマーチング（とレイトレ）。

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/nuZF/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

YasuHiro

tonkotsuboy

ethertank

simiraaaa

GSSxGSS

h_doxas

siouxcitizen

cx20

Forked

sort by

forked: 波動方程式で波を再現

_nabe

153/2/5

forked: 波動方程式で波を再現

_nabe

168/2/5

forked: 波動方程式で波を再現

yama1866

153/2/5

forked: 波動方程式で波を再現

ushiostarfis

153/2/5

波動方程式で波を再現

波動方程式で波を再現

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by

Forked