Spaces:

awacke1
/

HTML5-DNA-Sequence

Running

App Files Files Community

awacke1 commited on Mar 3, 2023

Commit

6e8ecd2

1 Parent(s): f8acd7a

Update index.html

Browse files

Files changed (1) hide show

index.html +53 -105

index.html CHANGED Viewed

@@ -1,20 +1,17 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8" />
-    <title>DNA Fractal Demo</title>
-    <script src="https://cdn.babylonjs.com/babylon.js"></script>
     <style>
-      html,
-      body {
-        overflow: hidden;
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
       }
-      #renderCanvas {
         width: 100%;
         height: 100%;
       }
@@ -22,103 +19,54 @@
   </head>
   <body>
     <canvas id="renderCanvas"></canvas>
     <script>
-      // Create the BabylonJS engine
-      const canvas = document.getElementById("renderCanvas");
-      const engine = new BABYLON.Engine(canvas, true);
-      // Create a new scene
-      const scene = new BABYLON.Scene(engine);
-      // Create a camera
-      const camera = new BABYLON.ArcRotateCamera(
-        "Camera",
-        0,
-        0,
-        10,
-        new BABYLON.Vector3(0, 0, 0),
-        scene
-      );
-      // Attach the camera to the canvas
-      camera.attachControl(canvas, true);
-      // Create a DNA fractal
-      const DNAFractal = BABYLON.MeshBuilder.CreateTube(
-        "DNAFractal",
-        {
-          path: [
-            new BABYLON.Vector3(0, 0, 0),
-            new BABYLON.Vector3(0, 1, 0),
-            new BABYLON.Vector3(0.5, 1.5, 0),
-            new BABYLON.Vector3(0.5, 2.5, 0),
-            new BABYLON.Vector3(0, 3, 0),
-          ],
-          radius: 0.5,
-          tessellation: 64,
-          sideOrientation: BABYLON.Mesh.DOUBLESIDE,
-        },
-        scene
-      );
-      // Add a material to the DNA fractal
-      const DNAFractalMaterial = new BABYLON.StandardMaterial(
-        "DNAFractalMaterial",
-        scene
-      );
-      DNAFractalMaterial.diffuseColor = new BABYLON.Color3(1, 0.5, 0);
-      DNAFractalMaterial.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1);
-      DNAFractal.material = DNAFractalMaterial;
-      // Animate the DNA fractal
-      let time = 0;
-      scene.registerAfterRender(function () {
-        time += 0.01;
-        const positions = DNAFractal.getVerticesData(
-          BABYLON.VertexBuffer.PositionKind
-        );
-        const colors = DNAFractal.getVerticesData(
-          BABYLON.VertexBuffer.ColorKind
-        );
-        for (let i = 0; i < positions.length; i += 3) {
-          const x = positions[i];
-          const y = positions[i + 1];
-          const z = positions[i + 2];
-          const color = colors[i / 3];
-          const scale = 0.5 + 0.5 * Math.sin(time + y * 10);
-          const rotation = Math.PI * 2 * Math.sin(time + x * 10);
-          positions[i] = x * scale;
-          positions[i + 1] = y * scale * Math.cos(rotation);
-          positions[i + 2] = y * scale * Math.sin(rotation);
-          colors[i / 3] = new BABYLON.Color4(
-            color.r,
-            color.g,
-            color.b,1);
-}
-    DNAFractal.updateVerticesData(
-      BABYLON.VertexBuffer.PositionKind,
-      positions
-    );
-    DNAFractal.updateVerticesData(BABYLON.VertexBuffer.ColorKind, colors);
-  });
-  // Render the scene
-  engine.runRenderLoop(function () {
-    scene.render();
-  });
-  // Resize the canvas when the window is resized
-  window.addEventListener("resize", function () {
-    engine.resize();
-  });
-</script>
   </body>
 </html>

 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">
+    <title>DNA Fractal</title>
     <style>
+      html, body {
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
+        overflow: hidden;
       }
+      canvas {
         width: 100%;
         height: 100%;
       }
   </head>
   <body>
     <canvas id="renderCanvas"></canvas>
+    <script src="https://cdn.babylonjs.com/babylon.js"></script>
+    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
     <script>
+      window.addEventListener('DOMContentLoaded', () => {
+        // Get the canvas element and create the Babylon scene
+        const canvas = document.getElementById('renderCanvas');
+        const engine = new BABYLON.Engine(canvas, true);
+        const scene = new BABYLON.Scene(engine);
+        // Set up the camera
+        const camera = new BABYLON.ArcRotateCamera('Camera', 0, 0, 10, BABYLON.Vector3.Zero(), scene);
+        camera.attachControl(canvas, true);
+        // Create the DNA fractal shape
+        const shape = BABYLON.MeshBuilder.CreateBox('Shape', {size: 1}, scene);
+        shape.scaling = new BABYLON.Vector3(0.5, 1, 0.5);
+        shape.rotation = new BABYLON.Vector3(Math.PI / 4, 0, 0);
+        // Create the fractal by cloning and rotating the shape
+        const numLevels = 5;
+        const angle = Math.PI / 4;
+        const scale = 0.5;
+        const fractal = new BABYLON.Mesh('Fractal', scene);
+        fractal.addChild(shape);
+        for (let i = 0; i < numLevels; i++) {
+          const child = shape.clone(`Level ${i}`);
+          child.scaling = child.scaling.scale(scale);
+          child.rotation = child.rotation.add(new BABYLON.Vector3(0, angle, 0));
+          fractal.addChild(child);
+          shape = child;
+        }
+        // Apply the DNA texture to the fractal
+        const dnaTexture = new BABYLON.Texture('https://i.imgur.com/f5GcE7Y.jpg', scene);
+        const material = new BABYLON.StandardMaterial('Material', scene);
+        material.diffuseTexture = dnaTexture;
+        fractal.material = material;
+        // Start the Babylon engine and render the scene
+        engine.runRenderLoop(() => {
+          scene.render();
+        });
+        // Handle window resizing
+        window.addEventListener('resize', () => {
+          engine.resize();
+        });
+      });
+    </script>
   </body>
 </html>