Created
July 7, 2015 09:40
Three.js - LifeGame - 3D
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>二次元ライフゲーム</title> | |
<script type="text/javascript" src="https://www.googledrive.com/host/0BxNQTV_CEVCHfm9kR1ZYdW1MYUtsLXhZV3Q4a3ZLQjgyWnZQZGF4MXpDYnZZNk9DRUg0QXM/javascript/three.js"></script><!-- Three.js --> | |
<script type="text/javascript" src="https://www.googledrive.com/host/0BxNQTV_CEVCHfm9kR1ZYdW1MYUtsLXhZV3Q4a3ZLQjgyWnZQZGF4MXpDYnZZNk9DRUg0QXM/javascript/TrackballControls.js"></script><!-- TrackballControls.js --> | |
<script type="text/javascript" src="https://www.googledrive.com/host/0BxNQTV_CEVCHfm9kR1ZYdW1MYUtsLXhZV3Q4a3ZLQjgyWnZQZGF4MXpDYnZZNk9DRUg0QXM/javascript/jquery-2.1.4.min.js"></script> | |
</head> | |
<body> | |
<div> | |
世代:<input id="gene" size="3"/> | |
<button onclick="random()">RANDOM</button> | |
<button onclick="start()">START</button> | |
<button onclick="stop()">STOP</button> | |
<button onclick="oneStep()">ONE STEP</button> | |
<button onclick="pattern1()">PATTERN</button> | |
</div> | |
<hr /> | |
<div id="container"></div> | |
<script> | |
// -------------------------------------------------------------- | |
// --- HTML | |
// -------------------------------------------------------------- | |
var container = document.getElementById("container"); // コンテナー | |
// Global変数 (Three.js) | |
var camera; // カメラ | |
var trackBall; // トラックボール | |
var scene; // シーン | |
var renderer; // レンダー | |
// Global変数 (LifeGame) | |
var cells; // セル | |
var tmpCells; // セル一時領域 | |
var cellSize = 51; // セルのサイズ | |
var intervalId; // 繰り返し処理ID | |
var geneCount = 1; // 世代 | |
// -------------------------------------------------------------- | |
// 初期処理実行 | |
// -------------------------------------------------------------- | |
init(); | |
animate(); | |
function pattern1() { | |
stop(); | |
cells = [ | |
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,1,1,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,1,1,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,1,1,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,1,1,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,1,1,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,1,1,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0] | |
,[0,0,0,1,1,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0] | |
,[0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0] | |
,[0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0] | |
,[0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
,[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] | |
]; | |
geneCount = 1; | |
initCells = new Array(cellSize); | |
for (x = 0; x < cells.length; x++){ | |
initCells[x] = new Array(cellSize); | |
for (y = 0; y < cells[x].length; y++){ | |
initCells[x][y] = 0; | |
} | |
} | |
// 描写 | |
view(); | |
} | |
// -------------------------------------------------------------- | |
// --- Three.js | |
// -------------------------------------------------------------- | |
// 初期化処理 | |
function init() { | |
// カメラ初期化 | |
initCamera(); | |
// トラックボール初期化 | |
initTrackBall(); | |
// レンダー初期化 | |
initRenderer(); | |
// セル初期化 | |
cells = []; | |
initCells = new Array(cellSize); | |
for (x = 0; x < cells.length; x++){ | |
initCells[x] = new Array(cellSize); | |
for (y = 0; y < cells[x].length; y++){ | |
initCells[x][y] = 0; | |
} | |
} | |
// 描写 | |
view(); | |
} | |
// カメラ初期化 | |
function initCamera() { | |
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); | |
camera.position.x = 0; | |
camera.position.y = 0; | |
camera.position.z = 50; | |
} | |
// トラックボール初期化 | |
function initTrackBall() { | |
trackBall = new THREE.TrackballControls(camera); | |
} | |
// レンダー初期化 | |
function initRenderer() { | |
renderer = new THREE.WebGLRenderer(); | |
renderer.setSize(window.innerWidth, window.innerHeight); | |
renderer.setClearColor(0x000000); | |
container.appendChild(renderer.domElement); | |
} | |
// 描写 | |
function animate() { | |
requestAnimationFrame(animate); | |
renderer.render(scene,camera); | |
trackBall.update(); | |
} | |
// -------------------------------------------------------------- | |
// --- LifeGame | |
// -------------------------------------------------------------- | |
// ライフゲームスタート | |
function start() { | |
// 既存処理をストップ | |
stop(); | |
// 繰り返し処理実行 | |
intervalId = setInterval( | |
function() { | |
// 世代交代処理実行 | |
alternationOfGenerations(); | |
} | |
,250 | |
); | |
} | |
// 世代交代 | |
function alternationOfGenerations() { | |
// 初期化 | |
var tmpCells = $.extend(true, [], initCells); | |
for (x in cells) { | |
for (y in cells[x]) { | |
tmpCells[x][y] = roule(x, y); | |
} | |
} | |
// 変異しない場合はストップ | |
if (JSON.stringify(cells) == JSON.stringify(tmpCells)) { | |
stop(); | |
} else { | |
// 世代更新 | |
++geneCount; | |
cells = tmpCells; | |
// 描写 | |
view(); | |
} | |
} | |
// 変異ルール | |
function roule(x, y) { | |
var count = 0; | |
var xxFrom = parseInt(x) - 1; | |
var xxTo = parseInt(x) + 1; | |
var yyFrom = parseInt(y) - 1; | |
var yyTo = parseInt(y) + 1; | |
for (xx = xxFrom; xx <= xxTo; xx++) { | |
if (xx < 0) continue; | |
if (xx == cellSize) break; | |
for (yy = yyFrom; yy <= yyTo; yy++) { | |
if (yy < 0 || (x == xx && y == yy)) continue; | |
if (yy == cellSize) break; | |
try { | |
if (cells[xx][yy]) { | |
count = count + cells[xx][yy]; | |
} | |
} catch (e) { | |
} | |
} | |
} | |
// 死 | |
if (count >= 4 || count <= 1) { | |
return 0; | |
// 誕生 | |
} else if (count == 3) { | |
return 1; | |
// 変異なし | |
} else { | |
return cells[x][y]; | |
} | |
} | |
// 描写 | |
function view() { | |
$("#gene").val(geneCount); | |
scene = new THREE.Scene(); | |
var geometry = new THREE.Geometry(); | |
for (x in cells) { | |
for (y in cells[x]) { | |
if (cells[x][y] == 1) { | |
var vertex = new THREE.Vector3(); | |
vertex.x = parseInt(x) + (cellSize / 2 * -1); | |
vertex.y = parseInt(y) + (cellSize / 2 * -1); | |
vertex.z = 0; | |
geometry.vertices.push(vertex); | |
} | |
} | |
} | |
scene.add(new THREE.PointCloud(geometry, new THREE.PointCloudMaterial({size:1,color: 0xFFFFFF}))); | |
animate(); | |
} | |
// ランダム値で初期化 | |
function random() { | |
geneCount = 1; | |
cells = new Array(cellSize); | |
initCells = new Array(cellSize); | |
for (x = 0; x < cells.length; x++){ | |
cells[x] = new Array(cellSize); | |
initCells[x] = new Array(cellSize); | |
for (y = 0; y < cells[x].length; y++){ | |
cells[x][y] = Math.floor(Math.random()*2); | |
initCells[x][y] = 0; | |
} | |
} | |
// 描画 | |
view(); | |
} | |
// 1ステップのみ実行 | |
function oneStep() { | |
stop(); | |
// 世代交代処理実行 | |
alternationOfGenerations(); | |
// 描写 | |
view(); | |
} | |
// ライフゲームストップ | |
function stop() { | |
console.log("ID:" + intervalId + "の処理をストップしました。"); | |
clearInterval(intervalId); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment