Draw simple lines
This commit is contained in:
parent
010640501f
commit
867a0cdd77
|
@ -5,25 +5,66 @@ const {$, doAfterLoad} = window.fwdekker;
|
||||||
doAfterLoad(() => {
|
doAfterLoad(() => {
|
||||||
$("main").classList.remove("hidden");
|
$("main").classList.remove("hidden");
|
||||||
|
|
||||||
|
// State
|
||||||
|
const startTime = Math.floor(Date.now() / 100);
|
||||||
|
let lastDrawTime = 0;
|
||||||
|
const linePartAngles: number[] = [];
|
||||||
|
|
||||||
|
// Draw
|
||||||
const canvas = $("#art");
|
const canvas = $("#art");
|
||||||
const ctx = canvas.getContext("2d");
|
const ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
const draw = () => {
|
const draw = () => {
|
||||||
ctx.fillStyle = "#000000";
|
ctx.fillStyle = "#000000";
|
||||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
const center = [canvas.width / 2, canvas.height / 2];
|
||||||
|
|
||||||
|
// Center dot
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.fillStyle = "#ffffff";
|
ctx.fillStyle = "#ffffff";
|
||||||
ctx.arc(canvas.width / 2 - 20, canvas.height / 2 - 20, 20, 0, 2 * Math.PI);
|
ctx.arc(center[0] - 5, center[1] - 5, 10, 0, 2 * Math.PI);
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
|
|
||||||
|
// Lines
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = "#ffffff";
|
||||||
|
ctx.moveTo(center[0], center[1]);
|
||||||
|
let lastPos = [center[0], center[1]];
|
||||||
|
let totalAngle = 0;
|
||||||
|
for (const linePartAngle of linePartAngles) {
|
||||||
|
totalAngle += linePartAngle;
|
||||||
|
lastPos = [lastPos[0] + Math.cos(totalAngle) * 25, lastPos[1] + Math.sin(totalAngle) * 25];
|
||||||
|
ctx.lineTo(lastPos[0], lastPos[1]);
|
||||||
|
}
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
const secondsSinceStart = Math.floor(Date.now() / 100) - startTime;
|
||||||
|
if (secondsSinceStart > lastDrawTime) {
|
||||||
|
lastDrawTime = secondsSinceStart;
|
||||||
|
linePartAngles.push((random_normal() - 0.5) * Math.PI * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.requestAnimationFrame(draw);
|
||||||
};
|
};
|
||||||
|
window.requestAnimationFrame(draw);
|
||||||
|
|
||||||
|
// Listen to resize
|
||||||
const resize = () => {
|
const resize = () => {
|
||||||
canvas.width = window.innerWidth;
|
canvas.width = window.innerWidth;
|
||||||
canvas.height = window.innerHeight;
|
canvas.height = window.innerHeight;
|
||||||
|
|
||||||
draw();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
window.addEventListener("resize", resize, false);
|
window.addEventListener("resize", resize, false);
|
||||||
resize();
|
resize();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Taken from https://stackoverflow.com/a/49434653/
|
||||||
|
function random_normal(): number {
|
||||||
|
let u = 0;
|
||||||
|
while (u === 0) u = Math.random();
|
||||||
|
let v = 0;
|
||||||
|
while (v === 0) v = Math.random();
|
||||||
|
|
||||||
|
const num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v) / 10.0 + 0.5;
|
||||||
|
if (num >= 0 && num < 1) return num;
|
||||||
|
return random_normal();
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue