Spaces:

awacke1
/

HTML5-DNA-Sequence

Running

App Files Files Community

awacke1 commited on Mar 3, 2023

Commit

f8acd7a

1 Parent(s): f8b2ba3

Update index.html

Browse files

Files changed (1) hide show

index.html +118 -52

index.html CHANGED Viewed

@@ -1,58 +1,124 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <title>DNA Sequence</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.babylonjs.com/babylon.js"></script>
-    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
-</head>
-<body>
     <canvas id="renderCanvas"></canvas>
     <script>
-        var canvas = document.getElementById("renderCanvas");
-        var engine = new BABYLON.Engine(canvas, true);
-        var createScene = function () {
-            var scene = new BABYLON.Scene(engine);
-            var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
-            camera.attachControl(canvas, true);
-            // Create a DNA strand
-            var dnaStrand = BABYLON.MeshBuilder.CreateTorusKnot("dnaStrand", {
-                radius: 1.5,
-                tube: 0.3,
-                radialSegments: 32,
-                tubularSegments: 64,
-                p: 2,
-                q: 3
-            }, scene);
-            // Create the material for the DNA strand
-            var dnaMaterial = new BABYLON.StandardMaterial("dnaMaterial", scene);
-            dnaMaterial.diffuseTexture = new BABYLON.Texture("https://i.imgur.com/06QxEyj.jpg", scene);
-            dnaMaterial.emissiveColor = new BABYLON.Color3(0.1, 0.1, 0.1);
-            dnaMaterial.specularColor = new BABYLON.Color3(0.2, 0.2, 0.2);
-            // Apply the material to the DNA strand
-            dnaStrand.material = dnaMaterial;
-            // Add some lights to the scene
-            var light1 = new BABYLON.PointLight("light1", new BABYLON.Vector3(5, 10, 5), scene);
-            var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(-5, -10, -5), scene);
-            return scene;
-        }
-        var scene = createScene();
-        engine.runRenderLoop(function () {
-            scene.render();
-        });
-        window.addEventListener("resize", function () {
-            engine.resize();
-        });
-    </script>
-</body>
 </html>

 <!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%;
+      }
+    </style>
+  </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>