add color input

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>

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

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