-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
73 lines (62 loc) · 1.54 KB
/
app.js
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
var canvas;
var ctx;
var width;
var height;
var circle;
var tick;
var reset = function() {
width = Math.ceil(window.innerWidth / 2) * 2;
height = Math.ceil(window.innerHeight / 2) * 2;
tick = 0;
canvas.width = width;
canvas.height = height;
};
var clear = function() {
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1)';
ctx.fillRect(0, 0, width, height);
ctx.globalCompositeOperation = 'lighter';
};
var loop = function() {
requestAnimationFrame(loop);
circle.step();
clear();
circle.draw();
tick++;
};
var moveCircle = function(e) {
var x = e.clientX;
var y = e.clientY;
circle.moveTo(x, y);
};
var resetCircle = function(e) {
e.preventDefault();
var x = window.innerWidth / 2 + 1;
var y = window.innerHeight / 2 + 1;
circle.moveTo(x, y);
};
var handleTouch = function(e) {
e.preventDefault();
var touches = e.changedTouches;
var x = touches[0].pageX;
var y = touches[0].pageY;
circle.moveTo(x, y);
};
var init = function() {
canvas = document.getElementById('canvas');
canvas.addEventListener('mousemove', moveCircle);
canvas.addEventListener('mouseout', resetCircle);
canvas.addEventListener('touchstart', handleTouch);
canvas.addEventListener('touchmove', handleTouch);
canvas.addEventListener('touchcancel', resetCircle);
canvas.addEventListener('touchend', resetCircle);
ctx = canvas.getContext('2d');
reset();
circle = new RainbowCircle();
loop();
};
var onresize = function() {
reset();
};
window.addEventListener('resize', onresize);
init();