aframe-lsystem-component
Version:
L-System/LSystem component for A-Frame to draw 3D turtle graphics. Using Lindenmayer as backend.
37 lines (26 loc) • 1.26 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame L-System Component - Hilbert Curve</title>
<script src="../libs/aframe.js"></script>
<script src="../libs/aframe-animation-component.js"></script>
<script src="../libs/aframe-lsystem-component.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-mixin id="line" geometry="primitive: box; height: 0.2; width: 1; depth: 0.2;" material="metalness:0.2"></a-mixin>
<a-mixin id="yellow" material="color: yellow;"></a-mixin>
<a-mixin id="green" material="color: #528e1e;"></a-mixin>
<a-mixin id="red" material="color: #8e311e;"></a-mixin>
</a-assets>
<a-entity id="hilbertcurve" lsystem="axiom: X; productions: X:^<XF^<XFX-F^>>XFX&F+>>XFX-F>X->; segmentMixins: F:green line; angle: 90.0; iterations: 2; translateAxis: X" rotation="0 45 0" position="0 0 -3">
</a-entity>
</a-scene>
<script type="text/javascript">
// doesnt work if i directly add the component above in the HTML :(
document.getElementById('hilbertcurve').setAttribute('animation', "property: lsystem.angle; dur: 24000; loop: true; to: 450; easing: easeInOutCirc;");
</script>
</body>
</html>