78 lines
1.8 KiB
JavaScript
78 lines
1.8 KiB
JavaScript
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
let centerX, centerY;
|
||
|
|
|
||
|
|
function setCanvasSize() {
|
||
|
|
canvas.width = window.innerWidth;
|
||
|
|
canvas.height = window.innerHeight;
|
||
|
|
centerX = canvas.width / 2;
|
||
|
|
centerY = canvas.height / 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
setCanvasSize();
|
||
|
|
window.addEventListener("resize", setCanvasSize);
|
||
|
|
|
||
|
|
const degPerSec = 0.00000015;
|
||
|
|
const time = 99999999;
|
||
|
|
const fps = 60;
|
||
|
|
|
||
|
|
let rotation = 0;
|
||
|
|
let currentFrame = 0;
|
||
|
|
|
||
|
|
function render() {
|
||
|
|
if (currentFrame < maxTime / (1 / fps)) {
|
||
|
|
setTimeout(() => {
|
||
|
|
render();
|
||
|
|
clearCanvas();
|
||
|
|
|
||
|
|
drawSpiral(rotation + 1);
|
||
|
|
|
||
|
|
rotation += degPerSec * fps;
|
||
|
|
currentFrame++;
|
||
|
|
}, 1000 / fps);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
render();
|
||
|
|
|
||
|
|
function clearCanvas() {
|
||
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
|
ctx.fillStyle = "black";
|
||
|
|
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||
|
|
}
|
||
|
|
|
||
|
|
function drawSpiral(angle) {
|
||
|
|
const startColor = [45, 129, 252];
|
||
|
|
const endColor = [252, 3, 98];
|
||
|
|
const distanceMultiplier = 2;
|
||
|
|
const maxIterations = 1000;
|
||
|
|
|
||
|
|
for (let n = 0; n < maxIterations; n++) {
|
||
|
|
const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
|
||
|
|
const nAngle = n * angle + Math.sin(angle * n * 3);
|
||
|
|
const radius = distanceMultiplier * n;
|
||
|
|
const xCoord = radius * Math.cos(nAngle) + centerX;
|
||
|
|
const yCoord = radius * Math.sin(nAngle) + centerY;
|
||
|
|
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
|
||
|
|
ctx.fillStyle = colourToText(nColor);
|
||
|
|
ctx.fill();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function rad(degrees) {
|
||
|
|
return degrees * (Math.PI / 180);
|
||
|
|
}
|
||
|
|
|
||
|
|
function lerpRGB(a, b, t) {
|
||
|
|
const result = [0, 0, 0];
|
||
|
|
for (let i = 0; i < 3; i++) {
|
||
|
|
result[i] = (1 - t) * a[i] + t * b[i];
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
}
|
||
|
|
|
||
|
|
function colourToText(colour) {
|
||
|
|
return `rgb(${colour[0]}, ${colour[1]}, ${colour[2]})`;
|
||
|
|
}
|