-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
78 lines (67 loc) · 2.19 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>L-System</title>
<script src="lindenmayer.js"></script>
<script>
function setup() {
var canvas = document.getElementById('canvas');
var plant = Lindenmayer.createLSystem({
seed: 'X',
rules: {
'X': 'F-[[X]+X]+F[+FX]-X',
'F': 'FF'
},
canvas: canvas,
angle: 25,
initialAngle: 270,
width: 512,
height: 512,
x: 0,
y: 0
});
var dragonCurve = Lindenmayer.createLSystem({
seed: 'XY',
rules: {
'X': 'X+YF',
'Y': 'FX-Y'
},
canvas: canvas,
angle: 90
});
var kochCurve = Lindenmayer.createLSystem({
seed: 'F',
rules: {
'F': 'F-F+F+F-FB'
},
canvas: canvas,
angle: 90
});
var sierpinskiTriangle = Lindenmayer.createLSystem({
seed: 'A',
rules: {
'A': 'B-A-B',
'B': 'A+B+A'
},
constants: ['A', 'B'],
canvas: canvas,
angle: 60,
color: '#0000ff'
});
for ( var i = 0; i < 8; i++) {
plant.iterate();
}
dragonCurve.iterate(12);
kochCurve.iterate(5);
sierpinskiTriangle.iterate(9);
plant.render();
dragonCurve.render();
kochCurve.render();
sierpinskiTriangle.render();
}
</script>
</head>
<body onload="setup()">
<canvas id="canvas" width="1280px" height="720px" style="border: 1px solid black"></canvas>
</body>
</html>