|
|
@ -5,9 +5,9 @@
|
|
|
|
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
onMount(() => {
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
let frame;
|
|
|
|
let frame = requestAnimationFrame(loop);
|
|
|
|
|
|
|
|
|
|
|
|
(function loop() {
|
|
|
|
function loop(t) {
|
|
|
|
frame = requestAnimationFrame(loop);
|
|
|
|
frame = requestAnimationFrame(loop);
|
|
|
|
|
|
|
|
|
|
|
|
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
|
|
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
|
@ -17,8 +17,6 @@
|
|
|
|
const x = i % canvas.width;
|
|
|
|
const x = i % canvas.width;
|
|
|
|
const y = i / canvas.height >>> 0;
|
|
|
|
const y = i / canvas.height >>> 0;
|
|
|
|
|
|
|
|
|
|
|
|
const t = window.performance.now();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
|
|
|
|
const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
|
|
|
|
const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
|
|
|
|
const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
|
|
|
|
const b = 128;
|
|
|
|
const b = 128;
|
|
|
@ -30,7 +28,7 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
ctx.putImageData(imageData, 0, 0);
|
|
|
|
ctx.putImageData(imageData, 0, 0);
|
|
|
|
}());
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
return () => {
|
|
|
|
cancelAnimationFrame(frame);
|
|
|
|
cancelAnimationFrame(frame);
|
|
|
|