Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>A-Frame Recursive DNA Demo</title> | |
| <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> | |
| </head> | |
| <body> | |
| <a-scene> | |
| <!-- DNA Strand Generator --> | |
| <a-entity id="dna-strand"></a-entity> | |
| <!-- Background --> | |
| <a-plane position="0 0 -7" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane> | |
| <a-sky color="#ECECEC"></a-sky> | |
| </a-scene> | |
| <script> | |
| // DNA Strand Parameters | |
| const strandHeight = 4; | |
| const strandRadius = 0.5; | |
| const torusRadius = 1; | |
| const torusTubularRadius = 0.1; | |
| const strandColors = ["red", "blue", "green", "orange", "purple"]; | |
| // Recursive DNA Strand Generator | |
| function generateStrand(parent, level, maxLevel) { | |
| if (level > maxLevel) { | |
| return; | |
| } | |
| const numStrands = Math.pow(2, level); | |
| const angleStep = 360 / numStrands; | |
| for (let i = 0; i < numStrands; i++) { | |
| const angle = i * angleStep; | |
| const strand = document.createElement("a-entity"); | |
| strand.setAttribute("position", "0 0 " + strandHeight * level); | |
| strand.setAttribute("rotation", "0 " + angle + " 0"); | |
| strand.setAttribute("color", strandColors[level % strandColors.length]); | |
| const cylinder = document.createElement("a-cylinder"); | |
| cylinder.setAttribute("height", strandHeight); | |
| cylinder.setAttribute("radius", strandRadius); | |
| const torus = document.createElement("a-torus"); | |
| torus.setAttribute("radius", torusRadius); | |
| torus.setAttribute("radius-tubular", torusTubularRadius); | |
| strand.appendChild(cylinder); | |
| strand.appendChild(torus); | |
| parent.appendChild(strand); | |
| generateStrand(strand, level + 1, maxLevel); | |
| } | |
| } | |
| // Initialize DNA Strand Generator | |
| const dnaStrand = document.getElementById("dna-strand"); | |
| generateStrand(dnaStrand, 0, 4); | |
| </script> | |
| </body> | |
| </html> | |