From 300840177ba955a5a2d1b41a9f3768fc1f68543f Mon Sep 17 00:00:00 2001
From: rei1024 <satopen1729@gmail.com>
Date: Mon, 30 Sep 2024 21:21:53 +0900
Subject: [PATCH] add color input

---
 index.html      | 12 ++++++++++--
 src/cell.ts     |  7 ++++---
 src/main.ts     | 17 ++++++++++++-----
 src/settings.ts |  0
 4 files changed, 26 insertions(+), 10 deletions(-)
 create mode 100644 src/settings.ts

diff --git a/index.html b/index.html
index 4d0b558..e3ede54 100644
--- a/index.html
+++ b/index.html
@@ -17,8 +17,16 @@ <h2>Usage</h2>
         </section>
         <section>
           <h2>Settings</h2>
-          <label for="historySize">History size (number of generations):</label>
-          <input id="historySize" type="number" value="" min="1" max="500" />
+          <p>
+            <label for="historySize"
+              >History size (number of generations):</label
+            >
+            <input id="historySize" type="number" value="" min="1" max="500" />
+          </p>
+          <p>
+            <label for="color">Color:</label>
+            <input type="color" id="color" value="#FFFFFF" />
+          </p>
         </section>
         <section>
           <h2>Input</h2>
diff --git a/src/cell.ts b/src/cell.ts
index c99474b..60f3251 100644
--- a/src/cell.ts
+++ b/src/cell.ts
@@ -1,6 +1,6 @@
 import * as BABYLON from "babylonjs";
 
-export function createTemplateCell(scene: BABYLON.Scene): BABYLON.Mesh {
+export function createTemplateCell(scene: BABYLON.Scene) {
   // 1つのベースメッシュを作成
   const templateCell = BABYLON.MeshBuilder.CreateBox(
     "templateCell",
@@ -14,9 +14,10 @@ export function createTemplateCell(scene: BABYLON.Scene): BABYLON.Mesh {
   cellMaterial.diffuseColor = new BABYLON.Color3(1, 1, 1); // 白色
   cellMaterial.alpha = 1; // 透明度を設定
   cellMaterial.alphaMode = BABYLON.Constants.ALPHA_COMBINE;
-  cellMaterial.freeze();
+  // cellMaterial.wireframe = true; // ワイヤーフレームモードを有効に
+  // cellMaterial.freeze();
 
   templateCell.material = cellMaterial;
 
-  return templateCell;
+  return { templateCell, cellMaterial };
 }
diff --git a/src/main.ts b/src/main.ts
index 464b6db..cae70eb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -44,7 +44,7 @@ let generation = 0;
 let cellMeshes: BABYLON.InstancedMesh[][] = [];
 const stackHeight = 1;
 
-const templateCell = createTemplateCell(scene);
+const { templateCell, cellMaterial } = createTemplateCell(scene);
 
 function updateWorld() {
   bitWorld.next();
@@ -60,6 +60,7 @@ function updateWorld() {
 
       // マテリアルや色はテンプレートセルと共有されるので追加設定不要
       newCells.push(instance);
+      // instance.scaling = new Vector3(0.5, 0.5, 0.5);
     }
   });
 
@@ -73,11 +74,10 @@ function updateWorld() {
     });
     cellMeshes = cellMeshes.slice(cellMeshes.length - historySize);
   }
-
   // 点光源の位置を移動させる
-  pointLight.position.y = generation * stackHeight;
+  pointLight.position.y += stackHeight;
   // カメラを移動
-  camera.target.y = generation * stackHeight;
+  camera.target.y += stackHeight;
   generation++;
 }
 
@@ -88,8 +88,10 @@ engine.runRenderLoop(() => {
   if (!running) {
     return;
   }
+  const INTERVAL = 3;
+
   i++;
-  if (i % 3 === 0) {
+  if (i % INTERVAL === 0) {
     updateWorld();
   }
 });
@@ -161,3 +163,8 @@ readRLE.addEventListener("click", () => {
   }
   settingsDialog.close();
 });
+
+const colorInput = document.getElementById("color") as HTMLInputElement;
+colorInput.addEventListener("input", () => {
+  cellMaterial.diffuseColor = BABYLON.Color3.FromHexString(colorInput.value);
+});
diff --git a/src/settings.ts b/src/settings.ts
new file mode 100644
index 0000000..e69de29