-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmindfullness.htm
80 lines (66 loc) · 1.88 KB
/
mindfullness.htm
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
<html>
<head>
<title>mindfullness</title>
<style>
html, body {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<h2>mindfullness</h2>
<canvas id="histogram" width="700" height="300" style="border:1px solid #000000;"></canvas><br />
<script>
var c = document.getElementById('histogram');
var ctx = c.getContext('2d');
ctx.fillText('0', 00, 10);
ctx.fillText('100', 700/1000*100, 10);
ctx.fillText('150', 700/1000*150, 10);
ctx.fillText('200', 700/1000*200, 10);
ctx.fillText('500', 700/1000*500, 10);
ctx.fillText('500', 700/1000*500, 10);
ctx.fillText('1000', 700/1000*1000, 10);
var max = 1000;
var timestamp = null;
var lastMouseX = null;
var lastMouseY = null;
document.body.addEventListener('mousemove', function(e) {
if (timestamp === null) {
timestamp = Date.now();
lastMouseX = e.screenX;
lastMouseY = e.screenY;
return;
}
var now = Date.now();
var dt = now - timestamp;
var dx = e.screenX - lastMouseX;
var dy = e.screenY - lastMouseY;
var vd = Math.abs(Math.sqrt(Math.pow(dx, 2)+Math.pow(dy, 2)) / dt * 100);
timestamp = now;
lastMouseX = e.screenX;
lastMouseY = e.screenY;
if (vd > max) {
vd = max;
}
relv = vd / max;
var gradA = [0xc7, 0x79, 0xd0];
var gradB = [0xfe, 0xac, 0x5e];
grad = [gradA[0]+Math.round((gradB[0]-gradA[0])*relv), gradA[1]+Math.round((gradB[1]-gradA[1])*relv), gradA[2]+Math.round((gradB[2]-gradA[2])*relv)];
for (var i=0; i<3; i++) {
if (grad[i] > 255) {
grad[i] = 255;
} else if (grad[i] < 0) {
grad[i] = 0;
}
}
ctx.beginPath();
ctx.strokeStyle='#'+grad[0].toString(16)+''+grad[1].toString(16)+grad[2].toString(16);
ctx.moveTo(700*relv, 300);
ctx.lineTo(700*relv, 20);
ctx.stroke();
ctx.closePath();
});
</script>
</body>
</html>