Spaces:
Running
Running
File size: 2,070 Bytes
b5eff73 928243c 7289276 928243c 7289276 7c8a2ff 928243c 7289276 928243c b5eff73 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!DOCTYPE html>
<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>
|