Hugging Face's logo

Spaces:
awacke1
/
HTML5-Aframe-Lsystems
Running

App Files Community
awacke1 commited on
Commit
39c0db9
·
1 Parent(s): b1a57fb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +101 -17
index.html CHANGED
@@ -1,19 +1,103 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>A-Frame L-System Tree Demo</title>
6
+ <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
7
+ </head>
8
+ <body>
9
+ <a-scene>
10
+ <a-entity lsystem="rules:F[-F][+F];iterations:4;angle:25;length:0.5;color:green"></a-entity>
11
+
12
+ <a-plane position="0 0 -7" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane>
13
+ <a-sky color="#ECECEC"></a-sky>
14
+ </a-scene>
15
+
16
+ <script>
17
+ AFRAME.registerComponent('lsystem', {
18
+ schema: {
19
+ rules: {type: 'string'},
20
+ iterations: {type: 'int', default: 4},
21
+ angle: {type: 'number', default: 25},
22
+ length: {type: 'number', default: 0.5},
23
+ color: {type: 'string', default: 'green'}
24
+ },
25
+
26
+ init: function () {
27
+ // Initialize state
28
+ this.state = 'F';
29
+
30
+ // Apply rules
31
+ for (var i = 0; i < this.data.iterations; i++) {
32
+ this.state = this.applyRules(this.state, this.data.rules);
33
+ }
34
+
35
+ // Generate tree
36
+ var tree = this.generateTree(this.state, this.data.angle, this.data.length);
37
+
38
+ // Create A-Frame entities
39
+ this.el.setAttribute('position', '0 0 -5');
40
+ this.el.setAttribute('color', this.data.color);
41
+ this.el.appendChild(tree);
42
+ },
43
+
44
+ applyRules: function (state, rules) {
45
+ var newState = '';
46
+
47
+ for (var i = 0; i < state.length; i++) {
48
+ var c = state.charAt(i);
49
+ if (c in rules) {
50
+ newState += rules[c];
51
+ } else {
52
+ newState += c;
53
+ }
54
+ }
55
+
56
+ return newState;
57
+ },
58
+
59
+ generateTree: function (state, angle, length) {
60
+ var tree = document.createElement('a-entity');
61
+
62
+ for (var i = 0; i < state.length; i++) {
63
+ var c = state.charAt(i);
64
+
65
+ switch (c) {
66
+ case 'F':
67
+ var branch = document.createElement('a-cylinder');
68
+ branch.setAttribute('height', length);
69
+ branch.setAttribute('radius', length / 10);
70
+ branch.setAttribute('color', this.data.color);
71
+ tree.appendChild(branch);
72
+ tree.setAttribute('position', '0 ' + length / 2 + ' 0');
73
+ tree.setAttribute('rotation', '-' + angle + ' 0 0');
74
+ tree.appendChild(this.generateTree('F', angle, length));
75
+ tree.setAttribute('position', '0 ' + length + ' 0');
76
+ tree.setAttribute('rotation', angle + ' 0 0');
77
+ break;
78
+ case '+':
79
+ tree.setAttribute('rotation', '0 ' + angle + ' 0');
80
+ break;
81
+ case '-':
82
+ tree.setAttribute('rotation', '0 -' + angle + ' 0');
83
+ break;
84
+ case '[':
85
+ var subTree = this.generateTree(state.substring(i + 1), angle, length);
86
+ subTree.setAttribute('position', tree.getAttribute('position'));
87
+ subTree.setAttribute('rotation', tree.getAttribute('rotation'));
88
+ tree.appendChild(subTree);
89
+ i += subTree.getAttribute('lsystem').state.length + 1;
90
+ break;
91
+ case ']':
92
+ return tree;
93
+ default:
94
+ break;
95
+ }
96
+ }
97
+
98
+ return tree;
99
+ }
100
+ });
101
+ </script>
102
+ </body>
103
+ </html>