Hugging Face's logo

Spaces:
kmahtan2
/
HTML5Interactivity
No application file

App Files Community
kmahtan2 commited on
Commit
663bb19
·
1 Parent(s): 94ae395

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +219 -0
index.html ADDED
@@ -0,0 +1,219 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <html>
4
+
5
+ <head>
6
+
7
+ <meta charset="utf-8" />
8
+
9
+ <title>Babylon.js L-system Fractal Example</title>
10
+
11
+ <script src="https://cdn.babylonjs.com/babylon.js"></script>
12
+
13
+ <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
14
+
15
+ <style>
16
+
17
+ canvas {
18
+
19
+ width: 100%;
20
+
21
+ height: 100%;
22
+
23
+ touch-action: none;
24
+
25
+ }
26
+
27
+ </style>
28
+
29
+ </head>
30
+
31
+ <body>
32
+
33
+ <canvas id="renderCanvas"></canvas>
34
+
35
+ <script>
36
+
37
+ window.addEventListener('DOMContentLoaded', function () {
38
+
39
+ var canvas = document.getElementById('renderCanvas');
40
+
41
+ var engine = new BABYLON.Engine(canvas, true);
42
+
43
+ var createScene = function () {
44
+
45
+ var scene = new BABYLON.Scene(engine);
46
+
47
+ // Create a camera
48
+
49
+ var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
50
+
51
+ // Create a light
52
+
53
+ var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
54
+
55
+ // Create an array to hold the spheres
56
+
57
+ var spheres = [];
58
+
59
+ // Load the texture and bump map
60
+
61
+ var texture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png", scene);
62
+
63
+ var bumpMap = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor_n.jpg", scene);
64
+
65
+ // Define the L-system rules and starting axiom
66
+
67
+ var rules = {
68
+
69
+ F: "F+F-F-F+F"
70
+
71
+ };
72
+
73
+ var axiom = "F-F-F-F";
74
+
75
+ var angle = Math.PI / 2;
76
+
77
+ var length = 1;
78
+
79
+ var iterations = 3;
80
+
81
+ // Generate the L-system string
82
+
83
+ var lSystemString = axiom;
84
+
85
+ for (var i = 0; i < iterations; i++) {
86
+
87
+ var newString = "";
88
+
89
+ for (var j = 0; j < lSystemString.length; j++) {
90
+
91
+ var char = lSystemString.charAt(j);
92
+
93
+ if (rules[char]) {
94
+
95
+ newString += rules[char];
96
+
97
+ } else {
98
+
99
+ newString += char;
100
+
101
+ }
102
+
103
+ }
104
+
105
+ lSystemString = newString;
106
+
107
+ }
108
+
109
+ // Create a fountain of spheres that follow the L-system string
110
+
111
+ var position = BABYLON.Vector3.Zero();
112
+
113
+ var direction = BABYLON.Vector3.Forward();
114
+
115
+ for (var i = 0; i < lSystemString.length; i++) {
116
+
117
+ var char = lSystemString.charAt(i);
118
+
119
+ if (char === "F") {
120
+
121
+ // Create a new sphere
122
+
123
+ var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: length, segments: 16}, scene);
124
+
125
+ sphere.position = position.clone();
126
+
127
+ sphere.material = new BABYLON.StandardMaterial("texture", scene);
128
+
129
+ sphere.material.diffuseTexture = texture;
130
+
131
+ sphere.material.bumpTexture = bumpMap;
132
+
133
+ spheres.push(sphere);
134
+
135
+ // Animate the texture of the sphere
136
+
137
+ var textureAnimation = new BABYLON.Animation("textureAnimation", "material.diffuseTexture.uOffset", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
138
+
139
+ var keys = [];
140
+
141
+ keys.push({frame: 0, value:0});
142
+
143
+ keys.push({frame: 100, value: 1});
144
+
145
+ textureAnimation.setKeys(keys);
146
+
147
+ sphere.material.diffuseTexture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;
148
+
149
+ sphere.material.diffuseTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;
150
+
151
+ sphere.material.diffuseTexture.uScale = 10;
152
+
153
+ sphere.material.diffuseTexture.vScale = 10;
154
+
155
+ sphere.animations.push(textureAnimation);
156
+
157
+ scene.beginAnimation(sphere, 0, 100, true);
158
+
159
+ // Animate the sphere
160
+
161
+ var animation = new BABYLON.Animation("myAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
162
+
163
+ keys = [];
164
+
165
+ keys.push({frame: 0, value: position.clone()});
166
+
167
+ position.addInPlace(direction.scale(length));
168
+
169
+ keys.push({frame: 100, value: position.clone()});
170
+
171
+ animation.setKeys(keys);
172
+
173
+ sphere.animations.push(animation);
174
+
175
+ scene.beginAnimation(sphere, 0, 100, true);
176
+
177
+ } else if (char === "+") {
178
+
179
+ // Rotate clockwise
180
+
181
+ direction.rotateByQuaternionToRef(BABYLON.Quaternion.RotationAxis(BABYLON.Vector3.Up(), -angle), direction);
182
+
183
+ } else if (char === "-") {
184
+
185
+ // Rotate counterclockwise
186
+
187
+ direction.rotateByQuaternionToRef(BABYLON.Quaternion.RotationAxis(BABYLON.Vector3.Up(), angle), direction);
188
+
189
+ }
190
+
191
+ }
192
+
193
+ return scene;
194
+
195
+ }
196
+
197
+ var scene = createScene();
198
+
199
+ engine.runRenderLoop(function () {
200
+
201
+ scene.render();
202
+
203
+ });
204
+
205
+ window.addEventListener('resize', function () {
206
+
207
+ engine.resize();
208
+
209
+ });
210
+
211
+ });
212
+
213
+ </script>
214
+
215
+
216
+
217
+ </body>
218
+
219
+ </html>