File size: 4,846 Bytes
b5270da
 
5eed13d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b5270da
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Babylon.js L-system Fractal Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<style>
        canvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
        window.addEventListener('DOMContentLoaded', function () {
            var canvas = document.getElementById('renderCanvas');
            var engine = new BABYLON.Engine(canvas, true);
            var createScene = function () {
                var scene = new BABYLON.Scene(engine);
                // Create a camera
                var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
                // Create a light
                var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
                // Create an array to hold the spheres
                var spheres = [];
                // Load the texture and bump map
                var texture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png", scene);
                var bumpMap = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor_n.jpg", scene);
                // Define the L-system rules and starting axiom
                var rules = {
                    F: "F+F-F-F+F"
                };
                var axiom = "F-F-F-F";
                var angle = Math.PI / 2;
                var length = 1;
                var iterations = 3;
                // Generate the L-system string
                var lSystemString = axiom;
                for (var i = 0; i < iterations; i++) {
                    var newString = "";
                    for (var j = 0; j < lSystemString.length; j++) {
                        var char = lSystemString.charAt(j);
                        if (rules[char]) {
                            newString += rules[char];
                        } else {
                            newString += char;
                        }
                    }
                    lSystemString = newString;
                }
                // Create a fountain of spheres that follow the L-system string
                var position = BABYLON.Vector3.Zero();
                var direction = BABYLON.Vector3.Forward();
                for (var i = 0; i < lSystemString.length; i++) {
                    var char = lSystemString.charAt(i);
                    if (char === "F") {
                        // Create a new sphere
                        var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: length, segments: 16}, scene);
                        sphere.position = position.clone();
                        sphere.material = new BABYLON.StandardMaterial("texture", scene);
                        sphere.material.diffuseTexture = texture;
                        sphere.material.bumpTexture = bumpMap;
                        spheres.push(sphere);
                        // Animate the texture of the sphere
                        var textureAnimation = new BABYLON.Animation("textureAnimation", "material.diffuseTexture.uOffset", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
                        var keys = [];
                        keys.push({frame: 0, value:0});
keys.push({frame: 100, value: 1});
textureAnimation.setKeys(keys);
sphere.material.diffuseTexture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;
sphere.material.diffuseTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;
sphere.material.diffuseTexture.uScale = 10;
sphere.material.diffuseTexture.vScale = 10;
sphere.animations.push(textureAnimation);
scene.beginAnimation(sphere, 0, 100, true);
// Animate the sphere
var animation = new BABYLON.Animation("myAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
keys = [];
keys.push({frame: 0, value: position.clone()});
position.addInPlace(direction.scale(length));
keys.push({frame: 100, value: position.clone()});
animation.setKeys(keys);
sphere.animations.push(animation);
scene.beginAnimation(sphere, 0, 100, true);
} else if (char === "+") {
// Rotate clockwise
direction.rotateByQuaternionToRef(BABYLON.Quaternion.RotationAxis(BABYLON.Vector3.Up(), -angle), direction);
} else if (char === "-") {
// Rotate counterclockwise
direction.rotateByQuaternionToRef(BABYLON.Quaternion.RotationAxis(BABYLON.Vector3.Up(), angle), direction);
}
}
return scene;
}
var scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener('resize', function () {
engine.resize();
});
});
</script>

 

</body>
</html>