-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathifs-fern.html
102 lines (85 loc) · 2.27 KB
/
ifs-fern.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<canvas id="ifs" width="100%" height="100%">
<style>
html, body {
margin: 0;
padding: 0;
}
#ifs {
border: 1px solid black;
}
</style>
<script>
var canvas = document.getElementById("ifs"),
context = canvas.getContext("2d");
function onresize() {
canvas.width = document.body.offsetWidth;
canvas.height = document.body.offsetHeight;
window.aspect = canvas.width / canvas.height;
};
onresize();
window.resize = onresize;
var randomChoice = function(list, weight) {
var total_weight = weight.reduce(function (prev, cur, i, arr) {
return prev + cur;
});
var random_num = Math.random() * total_weight;
var weight_sum = 0;
for (var i = 0; i < list.length; i++) {
weight_sum += weight[i];
if (random_num <= weight_sum) {
return list[i];
}
}
};
var Vector2 = function (x, y) {
this.x = x;
this.y = y;
}
var fern = {
functions: [
function (p) {
return new Vector2(0, 0.16 * p.y);
},
function (p) {
var x = 0.85 * p.x + 0.04 * p.y;
var y = -0.04 * p.x + 0.85 * p.y + 1.6;
return new Vector2(x, y);
},
function (p) {
var x = 0.2 * p.x - 0.26 * p.y;
var y = 0.23 * p.x + 0.22 * p.y + 1.6;
return new Vector2(x, y);
},
function (p) {
var x = -0.15 * p.x + 0.28 * p.y;
var y = 0.26 * p.x + 0.24 * p.y + 0.44;
return new Vector2(x, y);
},
],
weights: [0.01, 0.85, 0.07, 0.07],
points: [new Vector2(0, 0)],
}
var ifs = fern;
var MAX_ITERATIONS = 1e7;
var POINT_SIZE = 1/30;
var construct = function () {
var points = ifs.points;
for (var i = 0; i < MAX_ITERATIONS; i++) {
var randFunction = randomChoice(ifs.functions, ifs.weights);
points.push(randFunction(points[points.length - 1]));
}
}
var scale = 2;
context.translate(canvas.width / 2, 0);
context.scale(scale, scale);
context.fillStyle = "green";
var drawPoints = function () {
var points = ifs.points;
var k = 1 / POINT_SIZE;
for (var i = 0; i < points.length; i++) {
context.fillRect(points[i].x * k, points[i].y * k, POINT_SIZE, POINT_SIZE);
}
}
construct();
drawPoints();
</script>