-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (109 loc) · 3.33 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
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<title>Fractal Tree</title>
<style>
body { text-align:center; background: black; color:blue; font-family: sans-serif;}
canvas {
border: 1px solid black;
margin:0 auto;
}
</style>
</head>
<body>
<h1 id="title">Fractal Tree</h1>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var maxDepth = 10;
var angle = Math.PI;
var branchRatio = 0.67;
var baseWidth = 10;
var cursor = {
x: canvas.width / 2,
y: canvas.height
};
var color = "blue";
// add event listener for mouse movement
window.addEventListener("mousemove", function(event) {
var rect = canvas.getBoundingClientRect();
var mouseX = event.clientX - rect.left;
var mouseY = event.clientY - rect.top;
angle = Math.min((mouseX / canvas.width) * Math.PI /2, Math.PI / 5);
maxDepth = Math.max(1, Math.min(10, Math.floor((mouseY / canvas.height) * 11)));
// set the color based on the angle and maxdepth
color = getColor(angle, maxDepth);
document.getElementById('title').style.color=color;
});
// add event listener for touch movement
window.addEventListener("touchmove", function(event) {
var rect = canvas.getBoundingClientRect();
var touchX = event.touches[0].clientX - rect.left;
var touchY = event.touches[0].clientY - rect.top;
angle = Math.min((touchX / canvas.width) * Math.PI/2, Math.PI / 5);
maxDepth = Math.max(1, Math.min(10, Math.floor((touchY / canvas.height) * 11)));
// set the color based on the angle and maxdepth
color = getColor(angle, maxDepth);
document.getElementById('title').style.color=color;
});
// function to generate a color based on the angle and maxdepth
function getColor(angle, maxDepth) {
// map the angle and maxdepth to a range of values for the red, green, and blue channels
var r = Math.floor((angle / (Math.PI / 2)) * 255);
var g = Math.floor((maxDepth / 10) * 255);
var b = Math.floor((1 - angle / (Math.PI / 2)) * 255);
// combine the red, green, and blue channels into a color string
return "rgb(" + b + "," + g + "," + r + ")";
}
function drawTree(start, depth) {
if (depth === 0) {
return;
}
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.lineTo(start.x, start.y - depth * 10);
ctx.lineWidth = baseWidth * depth / maxDepth;
ctx.strokeStyle = color;
ctx.stroke();
var end = {
x: start.x,
y: start.y - depth * 10
};
drawBranch(end, depth - 1, angle);
drawBranch(end, depth - 1, -angle);
}
function drawBranch(start, depth, angle) {
if (depth === 0) {
return;
}
ctx.save();
ctx.translate(start.x, start.y);
ctx.rotate(angle);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, -depth * 10);
ctx.lineWidth = baseWidth * depth / maxDepth;
ctx.strokeStyle = color;
ctx.stroke();
var end = {
x: 0,
y: -depth * 10
};
drawBranch(end, depth - 1, angle);
drawBranch(end, depth - 1, -angle);
ctx.restore();
}
function animateCursor() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawTree(cursor, maxDepth);
ctx.beginPath();
ctx.arc(cursor.x, cursor.y, 10, 0, 2 * Math.PI);
//ctx.fillStyle = "red";
ctx.fill();
requestAnimationFrame(animateCursor);
}
animateCursor();
</script>
</body>
</html>