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
134
135
136
137
138
139
140
|
const canvas = document.getElementById("background");
const ctx = canvas.getContext("2d");
// Resize Handling
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener("resize", resizeCanvas);
// Custom Math Functions
function customFunction(x, t, c) {
const centerY = c.height / 2;
return centerY + (30 + 10 * Math.sin(0.05 * t)) *
Math.sin(0.006 * x - 0.4 * t) +
20 * Math.sin(0.011 * x - 0.25 * t + 2);
}
function customFunctionTwo(x, t, c) {
const centerY = c.height / 2;
return centerY + (
40 * Math.sin(0.005 * x - 0.6 * t) +
25 * Math.sin(0.009 * x - 0.35 * t + 2) +
15 * Math.sin(0.015 * x - 0.2 * t + 5)
);
}
// Math Function Drawing Engine
// Get time from localstorage if it exists
let time = parseFloat(localStorage.getItem("time")) || 0;
function drawFunction(fn, color) {
ctx.beginPath();
// Start at left edge
ctx.moveTo(0, fn(0, time, canvas));
// Plot function across entire width
for (let x = 0; x < canvas.width; x++) {
const y = fn(x, time, canvas);
ctx.lineTo(x, y);
}
ctx.strokeStyle = color;
ctx.lineWidth = 2;
ctx.stroke();
}
// Starfield Drawing Engine
function makeStarfield(width, height, count, seed = 1) {
function rng() {
seed |= 0;
seed = seed + 0x6D2B79F5 | 0;
let t = Math.imul(seed ^ seed >>> 15, 1 | seed);
t ^= t + Math.imul(t ^ t >>> 7, 61 | t);
return ((t ^ t >>> 14) >>> 0) / 4294967296;
}
const stars = [];
for (let i = 0; i < count; i++) {
stars.push({
x: rng() * width,
y: rng() * height,
size: rng() * 1.5 + 0.3,
base: 0.5 + rng() * 0.3,
phase: rng() * Math.PI * 2,
speed: 0.5 + rng() * 2.0
});
}
return stars;
}
function drawStars(ctx, stars, time, color) {
ctx.fillStyle = color;
for (const s of stars) {
const twinkle = Math.sin(time * s.speed + s.phase) * 0.5 + 0.5;
const alpha = s.base + twinkle * 0.5;
ctx.globalAlpha = alpha;
ctx.fillRect(s.x, s.y, s.size, s.size);
}
ctx.globalAlpha = 1;
}
// Animation Loop
let animationId = null;
let lastTime = 0;
const stars = makeStarfield(canvas.width, canvas.height, 600, 42);
function animate(timestamp) {
animationId = requestAnimationFrame(animate);
// First frame setup
if (!lastTime) {
lastTime = timestamp;
}
// Time difference in seconds
const delta = (timestamp - lastTime) / 1000;
lastTime = timestamp;
// Advance time
time += delta;
// save time in localstorage
localStorage.setItem("time", time);
// Get colors
const styles = getComputedStyle(document.documentElement);
const fgColor = styles.getPropertyValue("--fg").trim();
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw Stars
drawStars(ctx, stars, time, fgColor);
// Draw first custom function
drawFunction(customFunction, fgColor);
// draw second custom function
drawFunction(customFunctionTwo, fgColor);
}
animate(0);
|
