-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo_fern.html
93 lines (84 loc) · 2.47 KB
/
demo_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
<!DOCTYPE html>
<html>
<head>
<title>Fern</title>
<script src="https://cdn.jsdelivr.net/gh/paul-caron/MatrixMath/matrix.js" ></script>
<style>
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
let canvas,ctx
let w,h
window.onload=onresize=init
function init(){
canvas=document.querySelector("canvas")
canvas.width=w=innerWidth
canvas.height=h=innerHeight
ctx=canvas.getContext("2d")
start()
}
function start(){
const scale=new Matrix(2,2)
scale.setValues([w/15,0,0,h/15])
const f1_mat1=new Matrix(2,2)
f1_mat1.setValues([0,0,
0,0.16])
const f1_mat2=new Matrix(2,1);
f1_mat2.setValues([0,0])
const f2_mat1=new Matrix(2,2)
f2_mat1.setValues([0.85,0.04,
-0.04,0.85])
const f2_mat2=new Matrix(2,1)
f2_mat2.setValues([0,
1.6])
const f3_mat1=new Matrix(2,2)
f3_mat1.setValues([0.2,-0.26,
0.23,0.22])
const f3_mat2=new Matrix(2,1)
f3_mat2.setValues([0,
1.6])
const f4_mat1=new Matrix(2,2)
f4_mat1.setValues([-0.15,0.28,
0.26,0.24])
const f4_mat2=new Matrix(2,1)
f4_mat2.setValues([0,
0.44])
let coords=new Matrix(2,1)
coords.setValues([0,
0])
for(let n=0;n<60000;n++){
const [x,y]=Matrix.mult(scale,coords).values
ctx.fillRect(x+w/2,y,Math.min(w,h)/360,Math.min(w,h)/360)
let randomNumber=Math.random()*100
if(randomNumber<=1){
ctx.fillStyle="black"
coords=Matrix.add(
Matrix.mult(f1_mat1,coords),
f1_mat2
)
}else if(randomNumber<=86){
ctx.fillStyle="green"
coords=Matrix.add(
Matrix.mult(f2_mat1,coords),
f2_mat2
)
}else if(randomNumber<=93){
ctx.fillStyle="red"
coords=Matrix.add(
Matrix.mult(f3_mat1,coords),
f3_mat2
)
}else{
ctx.fillStyle="blue"
coords=Matrix.add(
Matrix.mult(f4_mat1,coords),
f4_mat2
)
}
}
}
</script>
</body>
</html>