#0
0.00000001 BSV
v© tÝWÎ<ÖÖ{7t Ny.¬ cordQ text/html Má<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Enhanced BSV Monochrome Data Flow Pixel Art</title>
<style>
body { margin: 0; padding: 0; overflow: hidden; background-color: #000; }
canvas { display: block; }
#info { position: absolute; bottom: 10px; left: 10px; color: #fff; font-family: monospace; background: rgba(0, 0, 0, 0.7); padding: 10px; border-radius: 5px; }
</style>
</head>
<body>
<canvas id="dataCanvas"></canvas>
<div id="info"></div>
<script>
const canvas = document.getElementById('dataCanvas');
const ctx = canvas.getContext('2d');
let currentBlockHash = '';
let currentBlockHeight = 0;
const nodeCount = 100;
const packetCount = 200;
let nodes = [];
let packets = [];
function setup() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
updateDataFlow();
setInterval(updateDataFlow, 60000);
animate();
}
function animate() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
drawConnections();
updateAndDrawPackets();
drawNodes();
requestAnimationFrame(animate);
}
function drawNodes() {
nodes.forEach(node => {
ctx.fillStyle = node.color;
ctx.beginPath();
ctx.arc(node.x, node.y, 8, 0, Math.PI * 2);
ctx.fill();
});
}
function drawConnections() {
ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
ctx.lineWidth = 1;
ctx.beginPath();
nodes.forEach(node => {
node.connections.forEach(connectedNode => {
ctx.moveTo(node.x, node.y);
ctx.lineTo(connectedNode.x, connectedNode.y);
});
});
ctx.stroke();
}
function updateAndDrawPackets() {
packets.forEach(packet => {
packet.progress += 0.005; // Reduced speed of packets
if (packet.progress >= 1) {
packet.start = packet.end;
packet.end = packet.start.connections[Math.floor(Math.random() * packet.start.connections.length)];
packet.progress = 0;
}
const x = packet.start.x + (packet.end.x - packet.start.x) * packet.progress;
const y = packet.start.y + (packet.end.y - packet.start.y) * packet.progress;
ctx.fillStyle = packet.color;
ctx.beginPath();
ctx.arc(x, y, 4, 0, Math.PI * 2);
ctx.fill();
});
}
function getMonochromeColor(intensity) {
return `rgb(${intensity}, ${intensity}, ${intensity})`;
}
async function fetchBlockInfo() {
try {
const response = await fetch('/v1/bsv/block/latest');
if (!response.ok) throw new Error('Network response was not ok');
const data = await response.json();
return { hash: data.hash, height: data.height };
} catch (error) {
console.error('Error fetching block info:', error);
document.getElementById('info').innerHTML = 'Error fetching block info';
return null;
}
}
async function updateDataFlow() {
const blockInfo = await fetchBlockInfo();
if (blockInfo && blockInfo.hash !== currentBlockHash) {
currentBlockHash = blockInfo.hash;
currentBlockHeight = blockInfo.height;
generateNodesAndPackets(blockInfo.hash);
displayBlockInfo(blockInfo.hash, blockInfo.height);
}
}
function generateNodesAndPackets(blockHash) {
nodes = [];
for (let i = 0; i < nodeCount; i++) {
nodes.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
color: getMonochromeColor(Math.floor(Math.random() * 200) + 55),
connections: []
});
}
nodes.forEach(node => {
const connectionCount = Math.floor(Math.random() * 5) + 2;
for (let i = 0; i < connectionCount; i++) {
const connectedNode = nodes[Math.floor(Math.random() * nodes.length)];
if (connectedNode !== node && !node.connections.includes(connectedNode)) {
node.connections.push(connectedNode);
}
}
});
packets = [];
for (let i = 0; i < packetCount; i++) {
const startNode = nodes[Math.floor(Math.random() * nodes.length)];
const endNode = startNode.connections[Math.floor(Math.random() * startNode.connections.length)];
packets.push({
start: startNode,
end: endNode,
progress: 0,
color: getMonochromeColor(Math.floor(Math.random() * 200) + 55)
});
}
}
function displayBlockInfo(blockHash, blockHeight) {
document.getElementById('info').innerHTML = `
<div>Block Height: ${blockHeight}</div>
<div>Block Hash: ${blockHash}</div>
<div>Active Packets: ${packetCount}</div>
`;
}
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (currentBlockHash) {
generateNodesAndPackets(currentBlockHash);
}
});
setup();
</script>
</body>
</html>h
https://whatsonchain.com/tx/81dec0206d68ee2fbbfdff8981f8cfc5c2be62073dc52cea2d1ce142cd740458