matt-westerhaus commited on
Commit
89048d3
1 Parent(s): e984ae0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +108 -17
index.html CHANGED
@@ -1,19 +1,110 @@
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>Babylon.js L-system Fractal Example</title>
6
+ <script src="https://cdn.babylonjs.com/babylon.js"></script>
7
+ <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
8
+ <style>
9
+ canvas {
10
+ width: 100%;
11
+ height: 100%;
12
+ touch-action: none;
13
+ }
14
+ </style>
15
+ </head>
16
+ <body>
17
+ <canvas id="renderCanvas"></canvas>
18
+ <script>
19
+ window.addEventListener('DOMContentLoaded', function () {
20
+ var canvas = document.getElementById('renderCanvas');
21
+ var engine = new BABYLON.Engine(canvas, true);
22
+ var createScene = function () {
23
+ var scene = new BABYLON.Scene(engine);
24
+ // Create a camera
25
+ var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
26
+ // Create a light
27
+ var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
28
+ // Create an array to hold the spheres
29
+ var spheres = [];
30
+ // Load the texture and bump map
31
+ var texture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png", scene);
32
+ var bumpMap = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor_n.jpg", scene);
33
+ // Define the L-system rules and starting axiom
34
+ var rules = {
35
+ F: "F+F-F-F+F"
36
+ };
37
+ var axiom = "F-F-F-F";
38
+ var angle = Math.PI / 2;
39
+ var length = 1;
40
+ var iterations = 3;
41
+ // Generate the L-system string
42
+ var lSystemString = axiom;
43
+ for (var i = 0; i < iterations; i++) {
44
+ var newString = "";
45
+ for (var j = 0; j < lSystemString.length; j++) {
46
+ var char = lSystemString.charAt(j);
47
+ if (rules[char]) {
48
+ newString += rules[char];
49
+ } else {
50
+ newString += char;
51
+ }
52
+ }
53
+ lSystemString = newString;
54
+ }
55
+ // Create a fountain of spheres that follow the L-system string
56
+ var position = BABYLON.Vector3.Zero();
57
+ var direction = BABYLON.Vector3.Forward();
58
+ for (var i = 0; i < lSystemString.length; i++) {
59
+ var char = lSystemString.charAt(i);
60
+ if (char === "F") {
61
+ // Create a new sphere
62
+ var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: length, segments: 16}, scene);
63
+ sphere.position = position.clone();
64
+ sphere.material = new BABYLON.StandardMaterial("texture", scene);
65
+ sphere.material.diffuseTexture = texture;
66
+ sphere.material.bumpTexture = bumpMap;
67
+ spheres.push(sphere);
68
+ // Animate the texture of the sphere
69
+ var textureAnimation = new BABYLON.Animation("textureAnimation", "material.diffuseTexture.uOffset", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
70
+ var keys = [];
71
+ keys.push({frame: 0, value:0});
72
+ keys.push({frame: 100, value: 1});
73
+ textureAnimation.setKeys(keys);
74
+ sphere.material.diffuseTexture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;
75
+ sphere.material.diffuseTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;
76
+ sphere.material.diffuseTexture.uScale = 10;
77
+ sphere.material.diffuseTexture.vScale = 10;
78
+ sphere.animations.push(textureAnimation);
79
+ scene.beginAnimation(sphere, 0, 100, true);
80
+ // Animate the sphere
81
+ var animation = new BABYLON.Animation("myAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
82
+ keys = [];
83
+ keys.push({frame: 0, value: position.clone()});
84
+ position.addInPlace(direction.scale(length));
85
+ keys.push({frame: 100, value: position.clone()});
86
+ animation.setKeys(keys);
87
+ sphere.animations.push(animation);
88
+ scene.beginAnimation(sphere, 0, 100, true);
89
+ } else if (char === "+") {
90
+ // Rotate clockwise
91
+ direction.rotateByQuaternionToRef(BABYLON.Quaternion.RotationAxis(BABYLON.Vector3.Up(), -angle), direction);
92
+ } else if (char === "-") {
93
+ // Rotate counterclockwise
94
+ direction.rotateByQuaternionToRef(BABYLON.Quaternion.RotationAxis(BABYLON.Vector3.Up(), angle), direction);
95
+ }
96
+ }
97
+ return scene;
98
+ }
99
+ var scene = createScene();
100
+ engine.runRenderLoop(function () {
101
+ scene.render();
102
+ });
103
+ window.addEventListener('resize', function () {
104
+ engine.resize();
105
+ });
106
+ });
107
+ </script>
108
+
109
+ </body>
110
+ </html>