Round sine anim
I made this to have some nice animation on the web index page.
const target = document.getElementById("code-target");
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
target.appendChild(svg);
svg.style.width = "100%";
svg.style.height = svg.clientWidth + "px";
svg.style.stroke = "white";
let rds = [
Math.random(),
Math.random(),
Math.random(),
];
const gPos = document.getElementById("g-position");
if (svg) {
let viewWidth = 100;
let viewHeight = 100;
svg.setAttribute(
"viewBox",
`${-viewWidth / 2} ${-viewHeight / 2} ${viewWidth} ${viewHeight}`
);
const svgNameSpace = svg.namespaceURI;
const oscilloscopeLine = document.createElementNS(svgNameSpace, "path");
oscilloscopeLine.setAttribute("fill", "none");
oscilloscopeLine.setAttribute("stroke-width", "0.23");
setInterval(()=>{
rds = [
Math.random(),
Math.random(),
Math.random(),
];
}, 10000);
svg.appendChild(oscilloscopeLine);
let pastValues = [];
let index = 0;
const animationFrame = (time) => {
requestAnimationFrame(animationFrame);
const maxVals = 600;
for (let i = 0; i < maxVals; i += 1) {
const vnow = (
Math.sin(i * time / 140000 * rds[0]) * 1
+ Math.cos(i * time / 10000 * rds[1]) * .25
+ Math.cos(i * time / 5000 * rds[2]) * rds[2]
// Math.cos(i * time / 134412.1249812) * 7
)
if (undefined === pastValues[i]) pastValues[i] = 0;
pastValues[i] = vnow * 0.01 + pastValues[i] * 0.99;
}
let min = 0;
let max = 0;
pastValues.forEach((value) => {
if (value > max) max = value;
if (value < min) min = value;
});
const mult = 1;
const mm1 = viewWidth * mult;
const path = pastValues
.map((value, index) => {
if (!value) return;
const window =
Math.cos((index / pastValues.length - 0.5) * 2 * Math.PI) * 0.5 +
0.5;
const mm2 = mm1 * value;
const x = Math.cos(index * 2 * Math.PI / maxVals) * mm2;
const y = Math.sin(index * 2 * Math.PI / maxVals) * mm2;
return `${x * window},${y * window}`;
})
.join(" ");
oscilloscopeLine.setAttribute("d", `M ${path}`);
};
requestAnimationFrame(animationFrame);
}