Spaces:
Running
Running
Update index.html
Browse files- index.html +50 -9
index.html
CHANGED
|
@@ -2,23 +2,64 @@
|
|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
-
<title>A-Frame DNA Demo</title>
|
| 6 |
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
|
| 7 |
</head>
|
| 8 |
<body>
|
| 9 |
<a-scene>
|
| 10 |
-
<!--
|
| 11 |
-
<a-
|
| 12 |
-
<a-torus position="0 2 -5" radius="1" radius-tubular="0.1" color="red"></a-torus>
|
| 13 |
-
|
| 14 |
-
<!-- Second Helix -->
|
| 15 |
-
<a-cylinder position="1 0 -5" height="4" radius="0.5" color="blue"></a-cylinder>
|
| 16 |
-
<a-torus position="1 2 -5" radius="1" radius-tubular="0.1" color="blue"></a-torus>
|
| 17 |
|
| 18 |
<!-- Background -->
|
| 19 |
<a-plane position="0 0 -7" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane>
|
| 20 |
<a-sky color="#ECECEC"></a-sky>
|
| 21 |
</a-scene>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 22 |
</body>
|
| 23 |
</html>
|
| 24 |
-
|
|
|
|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
+
<title>A-Frame Recursive DNA Demo</title>
|
| 6 |
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
|
| 7 |
</head>
|
| 8 |
<body>
|
| 9 |
<a-scene>
|
| 10 |
+
<!-- DNA Strand Generator -->
|
| 11 |
+
<a-entity id="dna-strand"></a-entity>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 12 |
|
| 13 |
<!-- Background -->
|
| 14 |
<a-plane position="0 0 -7" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane>
|
| 15 |
<a-sky color="#ECECEC"></a-sky>
|
| 16 |
</a-scene>
|
| 17 |
+
|
| 18 |
+
<script>
|
| 19 |
+
// DNA Strand Parameters
|
| 20 |
+
const strandHeight = 4;
|
| 21 |
+
const strandRadius = 0.5;
|
| 22 |
+
const torusRadius = 1;
|
| 23 |
+
const torusTubularRadius = 0.1;
|
| 24 |
+
const strandColors = ["red", "blue", "green", "orange", "purple"];
|
| 25 |
+
|
| 26 |
+
// Recursive DNA Strand Generator
|
| 27 |
+
function generateStrand(parent, level, maxLevel) {
|
| 28 |
+
if (level > maxLevel) {
|
| 29 |
+
return;
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
const numStrands = Math.pow(2, level);
|
| 33 |
+
const angleStep = 360 / numStrands;
|
| 34 |
+
|
| 35 |
+
for (let i = 0; i < numStrands; i++) {
|
| 36 |
+
const angle = i * angleStep;
|
| 37 |
+
|
| 38 |
+
const strand = document.createElement("a-entity");
|
| 39 |
+
strand.setAttribute("position", "0 0 " + strandHeight * level);
|
| 40 |
+
strand.setAttribute("rotation", "0 " + angle + " 0");
|
| 41 |
+
strand.setAttribute("color", strandColors[level % strandColors.length]);
|
| 42 |
+
|
| 43 |
+
const cylinder = document.createElement("a-cylinder");
|
| 44 |
+
cylinder.setAttribute("height", strandHeight);
|
| 45 |
+
cylinder.setAttribute("radius", strandRadius);
|
| 46 |
+
|
| 47 |
+
const torus = document.createElement("a-torus");
|
| 48 |
+
torus.setAttribute("radius", torusRadius);
|
| 49 |
+
torus.setAttribute("radius-tubular", torusTubularRadius);
|
| 50 |
+
|
| 51 |
+
strand.appendChild(cylinder);
|
| 52 |
+
strand.appendChild(torus);
|
| 53 |
+
|
| 54 |
+
parent.appendChild(strand);
|
| 55 |
+
|
| 56 |
+
generateStrand(strand, level + 1, maxLevel);
|
| 57 |
+
}
|
| 58 |
+
}
|
| 59 |
+
|
| 60 |
+
// Initialize DNA Strand Generator
|
| 61 |
+
const dnaStrand = document.getElementById("dna-strand");
|
| 62 |
+
generateStrand(dnaStrand, 0, 4);
|
| 63 |
+
</script>
|
| 64 |
</body>
|
| 65 |
</html>
|
|
|