cordQ text/html M3<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Colorful in Hand</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
canvas {
display: block;
touch-action: none;
}
#info {
position: absolute;
bottom: 10px;
left: 10px;
color: #333;
font-family: monospace;
background: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 5px;
}
</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;
let animationPhase = 0;
let hashParts = [];
let drawingMode = 0;
let lineWidth = 1;
let scale = 1;
let rotationSpeed = 0.01;
const maxRotationSpeed = 0.5;
let isAccelerating = false;
let longPressTimer;
let offsetX = 0;
let offsetY = 0;
let lastX = 0;
let lastY = 0;
let isDragging = false;
let lastPinchDistance = 0;
function setup() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
updateArt();
animate();
setupEventListeners();
}
function animate() {
ctx.fillStyle = 'rgba(240, 240, 240, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
if (isAccelerating && !isDragging) {
rotationSpeed = Math.min(rotationSpeed + 0.005, maxRotationSpeed);
} else {
rotationSpeed = Math.max(rotationSpeed - 0.005, 0.01);
}
animationPhase += rotationSpeed;
drawGeometricArt();
if (Date.now() - lastUpdateTime > updateInterval) {
updateArt();
lastUpdateTime = Date.now();
}
requestAnimationFrame(animate);
}
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;
hashParts = currentBlockHash.match(/.{1,2}/g).map(part => parseInt(part, 16));
updateDrawingParameters();
displayBlockInfo(currentBlockHash, currentBlockHeight);
}
}).catch(error => {
console.error('Error updating art:', error);
});
}
function updateDrawingParameters() {
drawingMode = calculateDrawingMode();
lineWidth = calculateLineWidth();
}
function drawGeometricArt() {
ctx.save();
ctx.translate(canvas.width / 2 + offsetX, canvas.height / 2 + offsetY);
ctx.scale(scale, scale);
const baseRadius = Math.min(canvas.width, canvas.height) * 0.4;
if (drawingMode % 2 === 0) {
drawCirclePattern(baseRadius);
}
if (drawingMode % 2 === 1) {
drawLinePattern(baseRadius);
}
if (drawingMode === 4) {
drawSpiralPattern(baseRadius);
}
ctx.restore();
}
function drawCirclePattern(baseRadius) {
const circleCount = calculateCircleCount();
const baseHue = calculateBaseHue();
for (let i = 0; i < circleCount; i++) {
const angle = (i / circleCount) * Math.PI * 2 + animationPhase;
const distance = baseRadius * 0.6 * (1 + Math.sin(animationPhase * 2 + i * 0.5) * 0.2);
const x = distance * Math.cos(angle);
const y = distance * Math.sin(angle);
const radius = baseRadius * 0.05 * (1 + Math.sin(animationPhase * 3 + i * 0.7) * 0.5);
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.strokeStyle = `hsl(${(baseHue + i * 360 / circleCount) % 360}, 70%, 50%)`;
ctx.lineWidth = lineWidth;
if (drawingMode === 0) {
ctx.stroke();
} else {
ctx.fill();
}
}
}
function drawLinePattern(baseRadius) {
const lineCount = calculateLineCount();
const angleOffset = calculateAngleOffset();
const radiusMultiplier = calculateRadiusMultiplier();
for (let i = 0; i < lineCount; i++) {
const angle1 = (i / lineCount) * Math.PI * 2 + animationPhase + angleOffset;
const angle2 = ((i + lineCount / 2) / lineCount) * Math.PI * 2 + animationPhase + angleOffset;
const r1 = baseRadius * (0.8 + Math.sin(animationPhase * 2 + i * 0.1) * 0.2) * radiusMultiplier;
const r2 = baseRadius * (0.8 + Math.cos(animationPhase * 2 + i * 0.1) * 0.2) * radiusMultiplier;
const x1 = r1 * Math.cos(angle1);
const y1 = r1 * Math.sin(angle1);
const x2 = r2 * Math.cos(angle2);
const y2 = r2 * Math.sin(angle2);
ctx.beginPath();
if (drawingMode === 2) {
ctx.moveTo(0, 0);
}
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = `hsla(${(animationPhase * 150 + i * 10) % 360}, 70%, 50%, 0.3)`;
ctx.lineWidth = lineWidth;
ctx.stroke();
}
}
function drawSpiralPattern(baseRadius) {
const spiralCount = calculateCircleCount();
const baseHue = calculateBaseHue();
for (let i = 0; i < spiralCount; i++) {
const t = i / spiralCount;
const angle = 2 * Math.PI * t * 10 + animationPhase;
const radius = baseRadius * t;
const x = radius * Math.cos(angle);
const y = radius * Math.sin(angle);
ctx.beginPath();
ctx.arc(x, y, lineWidth * 2, 0, 2 * Math.PI);
ctx.fillStyle = `hsl(${(baseHue + i * 360 / spiralCount) % 360}, 70%, 50%)`;
ctx.fill();
}
}
function calculateDrawingMode() {
const modeSum = hashParts.reduce((sum, part, index) => sum + part * (index + 1), 0);
return modeSum % 5;
}
function calculateLineWidth() {
const minWidth = 0.5;
const maxWidth = 8;
const hashProduct = hashParts.reduce((product, part) => product * (part + 1), 1);
const normalizedValue = (Math.log(hashProduct) % Math.log(256)) / Math.log(256);
return minWidth + normalizedValue * (maxWidth - minWidth);
}
function calculateCircleCount() {
const minCount = 5;
const maxCount = 50;
const hashProduct = hashParts.reduce((product, part) => product * (part + 1), 1);
const normalizedValue = (Math.log(hashProduct) % Math.log(256)) / Math.log(256);
return Math.floor(minCount + normalizedValue * (maxCount - minCount));
}
function calculateBaseHue() {
const hashSum = hashParts.reduce((sum, part, index) => sum + part * (index + 1), 0);
return hashSum % 360;
}
function calculateLineCount() {
const baseCount = 50;
const variationRange = 40;
const hashSum = hashParts.reduce((sum, part) => sum + part, 0);
const normalizedSum = hashSum / (255 * hashParts.length);
return Math.floor(baseCount + (normalizedSum - 0.5) * 2 * variationRange);
}
function calculateAngleOffset() {
const hashSum = hashParts.reduce((sum, part, index) => sum + part * (index + 1), 0);
return (hashSum % 628) / 100;
}
function calculateRadiusMultiplier() {
const minMultiplier = 0.5;
const maxMultiplier = 1.5;
const hashProduct = hashParts.reduce((product, part) => product * (part + 1), 1);
const normalizedValue = (Math.log(hashProduct) % Math.log(256)) / Math.log(256);
return minMultiplier + normalizedValue * (maxMultiplier - minMultiplier);
}
function displayBlockInfo(blockHash, blockHeight) {
document.getElementById('info').innerHTML = `
<div>Block Height: ${blockHeight}</div>
<div>Block Hash: ${blockHash}</div>
`;
}
function setupEventListeners() {
canvas.addEventListener('mousedown', startInteraction);
canvas.addEventListener('mousemove', handleInteraction);
canvas.addEventListener('mouseup', endInteraction);
canvas.addEventListener('mouseleave', endInteraction);
canvas.addEventListener('touchstart', startInteraction);
canvas.addEventListener('touchmove', handleInteraction);
canvas.addEventListener('touchend', endInteraction);
canvas.addEventListener('wheel', zoom);
canvas.addEventListener('gesturestart', preventDefault);
canvas.addEventListener('gesturechange', handlePinchZoom);
canvas.addEventListener('gestureend', preventDefault);
}
function preventDefault(e) {
e.preventDefault();
}
function handlePinchZoom(e) {
e.preventDefault();
scale *= e.scale;
scale = Math.max(0.1, Math.min(scale, 5));
}
function startInteraction(e) {
e.preventDefault();
isAccelerating = true;
isDragging = false;
[lastX, lastY] = getEventPosition(e);
longPressTimer = setTimeout(() => {
rotationSpeed = maxRotationSpeed;
}, 1000);
if (e.touches && e.touches.length === 2) {
lastPinchDistance = getPinchDistance(e);
}
}
function handleInteraction(e) {
e.preventDefault();
if (!isAccelerating) return;
if (e.touches && e.touches.length === 2) {
const currentPinchDistance = getPinchDistance(e);
const pinchDelta = currentPinchDistance - lastPinchDistance;
scale *= 1 + pinchDelta * 0.01;
scale = Math.max(0.1, Math.min(scale, 5));
lastPinchDistance = currentPinchDistance;
return;
}
const [x, y] = getEventPosition(e);
const dx = x - lastX;
const dy = y - lastY;
if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
isDragging = true;
clearTimeout(longPressTimer);
offsetX += dx;
offsetY += dy;
}
lastX = x;
lastY = y;
}
function endInteraction(e) {
e.preventDefault();
isAccelerating = false;
isDragging = false;
clearTimeout(longPressTimer);
}
function getEventPosition(e) {
if (e.touches && e.touches.length > 0) {
return [e.touches[0].clientX, e.touches[0].clientY];
}
return [e.clientX, e.clientY];
}
function getPinchDistance(e) {
const touch1 = e.touches[0];
const touch2 = e.touches[1];
return Math.hypot(touch1.clientX - touch2.clientX, touch1.clientY - touch2.clientY);
}
function zoom(e) {
e.preventDefault();
const delta = e.deltaY * -0.01;
scale *= 1 + delta;
scale = Math.max(0.1, Math.min(scale, 5));
}
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
setup();
</script>
</body>
</html>hv© tÝWÎ<ÖÖ{7t Ny.¬
https://whatsonchain.com/tx/undefined