cordQ text/html M=%<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Block Art</title>
<style>
body { margin: 0; overflow: hidden; background: #000; }
canvas { display: block; }
#info {
position: absolute; bottom: 10px; left: 10px;
font-family: monospace; color: #fff;
background: rgba(0,0,0,0.7); padding: 10px; border-radius: 5px;
}
#colorPalette {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.colorSwatch {
width: 20px;
height: 20px;
margin: 2px;
border: 1px solid #fff;
}
</style>
</head>
<body>
<canvas id="artCanvas"></canvas>
<div id="info"></div>
<script>
const canvas = document.getElementById('artCanvas');
const ctx = canvas.getContext('2d');
let currentBlockHash = '';
let currentBlockHeight = 0;
let lastUpdateTime = 0;
const updateInterval = 60000; // Update every minute
let squares = [];
function setup() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
updateArt();
}
function draw() {
ctx.fillStyle = '#0000FF';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 10;
ctx.strokeRect(5, 5, canvas.width - 10, canvas.height - 10);
squares.forEach(square => {
if (!square.shattered) {
drawRoundedSquare(square.x, square.y, square.size, square.color, square.cornerRadius);
} else {
drawShatteredSquare(square);
}
updateSquarePosition(square);
});
requestAnimationFrame(draw);
}
function drawRoundedSquare(x, y, size, color, radius) {
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + size - radius, y);
ctx.quadraticCurveTo(x + size, y, x + size, y + radius);
ctx.lineTo(x + size, y + size - radius);
ctx.quadraticCurveTo(x + size, y + size, x + size - radius, y + size);
ctx.lineTo(x + radius, y + size);
ctx.quadraticCurveTo(x, y + size, x, y + size - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
ctx.fillStyle = color;
ctx.globalAlpha = 0.7;
ctx.fill();
ctx.globalAlpha = 1;
}
function drawShatteredSquare(square) {
square.fragments.forEach(fragment => {
ctx.fillStyle = fragment.color;
ctx.fillRect(fragment.x, fragment.y, fragment.size, fragment.size);
fragment.x += fragment.vx;
fragment.y += fragment.vy;
});
}
function updateSquarePosition(square) {
if (!square.shattered) {
square.x += square.vx;
square.y += square.vy;
if (square.x + square.size > canvas.width || square.x < 0) {
square.vx *= -1;
}
if (square.y + square.size > canvas.height || square.y < 0) {
square.vy *= -1;
}
}
}
function improvedGenerateSquares(blockHash) {
const squares = [];
const hashParts = blockHash.match(/.{1,2}/g) || [];
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
const partIndex = (i * 10 + j) % hashParts.length;
const part = hashParts[partIndex];
const sizeValue = parseInt(part, 16) / 255;
const size = 50 + 200 * (1 - Math.exp(-3 * sizeValue));
const colorValue = parseInt(hashParts[(partIndex + 1) % hashParts.length], 16) / 255;
const hue = colorValue * 360;
const color = `hsl(${hue}, 70%, 80%)`;
const x = (i / 10) * canvas.width;
const y = (j / 10) * canvas.height;
const cornerRadius = size / 4;
const vx = (Math.random() - 0.5) * 2;
const vy = (Math.random() - 0.5) * 2;
squares.push({ x, y, size, color, cornerRadius, vx, vy, shattered: false, fragments: [] });
}
}
return squares.sort((a, b) => b.size - a.size);
}
function xorHexStrings(hex1, hex2) {
const buf1 = new Uint8Array(hex1.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
const buf2 = new Uint8Array(hex2.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
const result = new Uint8Array(buf1.length);
for (let i = 0; i < buf1.length; i++) {
result[i] = buf1[i] ^ buf2[i];
}
return Array.from(result, byte => byte.toString(16).padStart(2, '0')).join('');
}
function preprocessHash(blockHash) {
const fixedString = "f".repeat(blockHash.length);
return xorHexStrings(blockHash, fixedString);
}
function shatterSquare(square) {
const fragmentSize = square.size / 10;
square.fragments = [];
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
square.fragments.push({
x: square.x + i * fragmentSize,
y: square.y + j * fragmentSize,
size: fragmentSize,
color: square.color,
vx: (Math.random() - 0.5) * 4,
vy: (Math.random() - 0.5) * 4
});
}
}
square.shattered = true;
}
function shatterAllSquares() {
squares.forEach(square => shatterSquare(square));
setTimeout(() => {
squares.forEach(square => {
square.shattered = false;
square.fragments = [];
});
}, 3000);
}
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
squares.forEach(square => {
if (x > square.x && x < square.x + square.size && y > square.y && y < square.y + square.size) {
shatterSquare(square);
setTimeout(() => {
square.shattered = false;
square.fragments = [];
}, 3000);
}
});
});
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;
}
}
function updateArt() {
fetchBlockInfo().then(blockInfo => {
if (blockInfo && blockInfo.hash !== currentBlockHash) {
currentBlockHash = blockInfo.hash;
currentBlockHeight = blockInfo.height;
shatterAllSquares();
setTimeout(() => {
const processedHash = preprocessHash(blockInfo.hash);
squares = improvedGenerateSquares(processedHash);
displayBlockInfo(blockInfo.hash, blockInfo.height);
}, 3000);
}
}).catch(error => {
console.error('Error updating art:', error);
});
}
function displayBlockInfo(blockHash, blockHeight) {
const colorPalette = generateColorPalette();
document.getElementById('info').innerHTML = `
<div>Block Height: ${blockHeight}</div>
<div>Block Hash: ${blockHash}</div>
<div>Youth Colors:</div>
<div id="colorPalette">${colorPalette}</div>
`;
}
function generateColorPalette() {
const uniqueColors = [...new Set(squares.map(square => square.color))];
return uniqueColors.map(color =>
`<div class="colorSwatch" style="background-color: ${color};" title="${color}"></div>`
).join('');
}
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const processedHash = preprocessHash(currentBlockHash);
squares = improvedGenerateSquares(processedHash);
});
setInterval(updateArt, updateInterval);
setup();
draw();
</script>
</body>
</html>hv© tÝWÎ<ÖÖ{7t Ny.¬
https://whatsonchain.com/tx/df46cfcb93fbd9ea0ff730fcd0bd1252a8b05f743e6c9eebc52ee86ee0b6b2a6