/
stripes.js
65 lines (51 loc) · 1.57 KB
/
stripes.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
const GAP_HEIGHT = 60;
const STRIPE_HEIGHT = 60;
const GAP_FILL = "#d400ff";
const STRIPE_FILL = "#ffd400";
const MIN_SPEED = 10;
const MAX_SPEED = 100;
const canvas = document.getElementById("stripes");
const ctx = canvas.getContext("2d");
let speed = MIN_SPEED;
let prevTime = Date.now();
let offset = 0;
function paint() {
const time = Date.now();
const delta = (time - prevTime) / 1000;
prevTime = time;
offset += speed * delta;
offset = offset % (GAP_HEIGHT + STRIPE_HEIGHT);
const numStripes = Math.ceil(canvas.height / (GAP_HEIGHT + STRIPE_HEIGHT));
for (let i = -1; i < numStripes; i++) {
const y = i * (GAP_HEIGHT + STRIPE_HEIGHT) + offset;
ctx.fillStyle = STRIPE_FILL;
ctx.fillRect(0, y, canvas.width, STRIPE_HEIGHT);
ctx.fillStyle = GAP_FILL;
ctx.fillRect(0, y + STRIPE_HEIGHT, canvas.height, GAP_HEIGHT);
}
requestAnimationFrame(paint);
}
requestAnimationFrame(paint);
function resizeCanvas() {
const isMobile = window.innerWidth < 600;
canvas.width = window.innerWidth * (isMobile ? 0.1 : 0.25);
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener("resize", resizeCanvas);
export function setSpeed(newSpeed) {
speed = newSpeed;
}
function handleMouseMove(event) {
setSpeed(
(event.clientX / window.innerWidth) * (MAX_SPEED - MIN_SPEED) + MIN_SPEED
);
}
export function enableDynamicSpeed() {
setSpeed(MIN_SPEED);
document.addEventListener("mousemove", handleMouseMove);
}
export function disableDynamicSpeed() {
document.removeEventListener("mousemove", handleMouseMove);
}
enableDynamicSpeed();