<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=".Hz">
<title>Ordinal Frequencies</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="/content/a8ceaa2d5ef5508f794d001b0bad38dd6b933bd07e40993036b8f6a67fe4cf2ci0"></script>
<script>
async function fetchBlockHeight() {
try {
const response = await fetch('/blockheight');
const data = await response.text();
let currentBlock = parseInt(data, 10);
return currentBlock;
} catch (error) {
console.error('Error:', error);
}
}
async function runSimulation() {
let currentBlock = await fetchBlockHeight();
if (isNaN(currentBlock)) {
var selectColor = 0;
currentBlock = 210000 * selectColor + 1;
}
new p5((p) => {
let frequency = 1;
let amplitude = 100;
let phase = 0;
let time = 0;
p.setup = function() {
p.createCanvas(p.windowWidth, p.windowHeight);
p.frameRate(30);
}
p.draw = function() {
p.background(0);
time = p.frameCount / p.frameRate();
p.translate(0, p.height / 2);
for (let x = 0; x < p.width; x++) {
let y = amplitude * p.sin(p.TWO_PI * frequency * (x / p.width - time) + phase);
p.stroke(255);
p.point(x, y);
}
}
});
}
runSimulation();
</script>
</body>
</html>