cordQ text/html M;<!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>Infinite Ways</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
canvas {
display: block;
touch-action: none;
}
#info {
position: absolute;
bottom: 10px;
left: 10px;
color: #ffffff;
font-family: monospace;
background: rgba(0, 0, 0, 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 currentComplexity = 0;
const gridSize = 10;
let circuits = [];
let nodes = [];
// Boost effect management variables
let isBoostActive = false;
let boostStartTime = 0;
const BOOST_DURATION = 5000;
const BOOST_FADE_DURATION = 1000;
// Event listeners for keyboard and touch
document.addEventListener('keydown', (event) => {
if (event.key === 'g' && !isBoostActive) {
activateBoost();
}
});
canvas.addEventListener('touchstart', (event) => {
event.preventDefault();
// Two-finger tap for boost
if (event.touches.length === 2 && !isBoostActive) {
activateBoost();
}
// Single-finger tap for circuit branching
else if (event.touches.length === 1) {
const touch = event.touches[0];
const rect = canvas.getBoundingClientRect();
const x = Math.floor((touch.clientX - rect.left) / gridSize);
const y = Math.floor((touch.clientY - rect.top) / gridSize);
const nearestCircuit = findNearestCircuit(x, y);
if (nearestCircuit) {
branchCircuit(nearestCircuit, x, y);
updateComplexity();
}
}
}, { passive: false });
canvas.addEventListener('touchmove', (event) => {
if (event.touches.length > 1) {
event.preventDefault();
}
}, { passive: false });
canvas.addEventListener('touchend', (event) => {
event.preventDefault();
}, { passive: false });
// Mouse click event for desktop
canvas.addEventListener('click', handleInteraction);
function activateBoost() {
isBoostActive = true;
boostStartTime = Date.now();
}
function setup() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
updateArt();
setInterval(updateArt, 60000);
animate();
}
function animate() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
circuits.forEach(circuit => {
drawCircuit(circuit);
});
nodes.forEach(node => {
drawNode(node);
});
ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 10;
ctx.strokeRect(5, 5, canvas.width - 10, canvas.height - 10);
requestAnimationFrame(animate);
}
function drawCircuit(circuit) {
let boostFactor = 0;
if (isBoostActive) {
const elapsedTime = Date.now() - boostStartTime;
if (elapsedTime >= BOOST_DURATION) {
const fadeTime = elapsedTime - BOOST_DURATION;
if (fadeTime >= BOOST_FADE_DURATION) {
isBoostActive = false;
} else {
boostFactor = 1 - (fadeTime / BOOST_FADE_DURATION);
}
} else {
boostFactor = 1;
}
}
const baseWidth = 2;
const boostedWidth = baseWidth + (4 * boostFactor);
ctx.lineWidth = boostedWidth;
const boostedBrightness = circuit.brightness * (1 + boostFactor);
ctx.strokeStyle = `rgba(${circuit.color.join(',')}, ${boostedBrightness})`;
ctx.beginPath();
ctx.moveTo(circuit.x * gridSize, circuit.y * gridSize);
circuit.path.forEach(point => {
ctx.lineTo(point.x * gridSize, point.y * gridSize);
});
ctx.stroke();
const boostedSpeed = circuit.speed * (1 + (0.5 * boostFactor));
circuit.energy += boostedSpeed;
if (circuit.energy > 1) circuit.energy = 0;
const pulsePosition = Math.floor(circuit.energy * circuit.path.length);
if (pulsePosition < circuit.path.length) {
const pulse = circuit.path[pulsePosition];
ctx.fillStyle = `rgba(${circuit.color.join(',')}, 1)`;
ctx.beginPath();
ctx.arc(pulse.x * gridSize, pulse.y * gridSize, 3 + (3 * boostFactor), 0, Math.PI * 2);
ctx.fill();
}
}
function drawNode(node) {
let boostFactor = 0;
if (isBoostActive) {
const elapsedTime = Date.now() - boostStartTime;
if (elapsedTime >= BOOST_DURATION) {
const fadeTime = elapsedTime - BOOST_DURATION;
if (fadeTime >= BOOST_FADE_DURATION) {
isBoostActive = false;
} else {
boostFactor = 1 - (fadeTime / BOOST_FADE_DURATION);
}
} else {
boostFactor = 1;
}
}
const boostedSize = node.size * (1 + boostFactor);
const radius = boostedSize + Math.sin(node.pulse * Math.PI * 2) * 2;
const gradient = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, radius);
const alpha = 1 + boostFactor;
gradient.addColorStop(0, `rgba(${node.color.join(',')}, ${alpha})`);
gradient.addColorStop(1, `rgba(${node.color.join(',')}, 0)`);
ctx.beginPath();
ctx.arc(node.x, node.y, radius, 0, Math.PI * 2);
ctx.fillStyle = gradient;
ctx.fill();
const boostedSpeed = node.speed * (1 + (0.5 * boostFactor));
node.pulse = (node.pulse + boostedSpeed) % 1;
}
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 updateArt() {
const blockInfo = await fetchBlockInfo();
if (blockInfo && blockInfo.hash !== currentBlockHash) {
currentBlockHash = blockInfo.hash;
currentBlockHeight = blockInfo.height;
generateArt(blockInfo.hash);
displayBlockInfo(blockInfo.hash, blockHeight);
}
}
function generateArt(blockHash) {
const shuffledHash = shuffleString(blockHash);
circuits = [];
nodes = [];
const cols = Math.floor(canvas.width / gridSize);
const rows = Math.floor(canvas.height / gridSize);
const circuitCount = 30 + (parseInt(shuffledHash.substr(0, 4), 16) % 21);
const nodeCount = 20 + (parseInt(shuffledHash.substr(4, 4), 16) % 31);
for (let i = 0; i < circuitCount; i++) {
const start = (i * 8) % (shuffledHash.length - 8);
const hashPart = shuffledHash.substr(start, 8);
const circuit = {
x: Math.floor(Math.sin(parseInt(hashPart.substr(0, 2), 16) / 255 * Math.PI * 2) * cols / 2 + cols / 2),
y: Math.floor(Math.cos(parseInt(hashPart.substr(2, 2), 16) / 255 * Math.PI * 2) * rows / 2 + rows / 2),
brightness: (parseInt(hashPart.substr(4, 2), 16) / 255) * 0.5 + 0.5,
energy: 0,
speed: (parseInt(hashPart.substr(6, 2), 16) / 255) * 0.1 + 0.01,
color: [
Math.floor(Math.sin(parseInt(hashPart.substr(0, 2), 16) / 255 * Math.PI) * 127 + 128),
Math.floor(Math.sin(parseInt(hashPart.substr(2, 2), 16) / 255 * Math.PI) * 127 + 128),
Math.floor(Math.sin(parseInt(hashPart.substr(4, 2), 16) / 255 * Math.PI) * 127 + 128)
],
path: []
};
generatePath(circuit, cols, rows);
circuits.push(circuit);
}
for (let i = 0; i < nodeCount; i++) {
const start = (i * 8) % (shuffledHash.length - 8);
const hashPart = shuffledHash.substr(start, 8);
nodes.push({
x: Math.sin(parseInt(hashPart.substr(0, 2), 16) / 255 * Math.PI * 2) * canvas.width / 2 + canvas.width / 2,
y: Math.cos(parseInt(hashPart.substr(2, 2), 16) / 255 * Math.PI * 2) * canvas.height / 2 + canvas.height / 2,
color: [
Math.floor(Math.sin(parseInt(hashPart.substr(0, 2), 16) / 255 * Math.PI) * 127 + 128),
Math.floor(Math.sin(parseInt(hashPart.substr(2, 2), 16) / 255 * Math.PI) * 127 + 128),
Math.floor(Math.sin(parseInt(hashPart.substr(4, 2), 16) / 255 * Math.PI) * 127 + 128)
],
pulse: 0,
speed: (parseInt(hashPart.substr(6, 1), 16) / 16) * 0.2 + 0.02,
size: (parseInt(hashPart.substr(7, 1), 16) / 16) * 3 + 2
});
}
updateComplexity();
}
function generatePath(circuit, cols, rows) {
let x = circuit.x;
let y = circuit.y;
let direction = Math.floor(Math.random() * 4);
for (let i = 0; i < 100; i++) {
if (Math.random() < 0.2) {
direction = Math.floor(Math.random() * 4);
}
switch (direction) {
case 0: x = (x + 1) % cols; break;
case 1: x = (x - 1 + cols) % cols; break;
case 2: y = (y + 1) % rows; break;
case 3: y = (y - 1 + rows) % rows; break;
}
circuit.path.push({x, y});
}
}
function shuffleString(str) {
return str.split('').sort(() => Math.random() - 0.5).join('');
}
function calculateCrossroadComplexity() {
const width = canvas.width;
const height = canvas.height;
const area = width * height;
let complexity = 0;
const gridCells = new Map();
circuits.forEach(circuit => {
circuit.path.forEach(point => {
const key = `${point.x},${point.y}`;
gridCells.set(key, (gridCells.get(key) || 0) + 1);
});
});
gridCells.forEach(count => {
if (count > 1) {
complexity += count * (count - 1) / 2;
}
});
nodes.forEach(node => {
circuits.forEach(circuit => {
circuit.path.forEach(point => {
const distance = Math.sqrt(
Math.pow((node.x / width) - (point.x * gridSize / width), 2) +
Math.pow((node.y / height) - (point.y * gridSize / height), 2)
);
if (distance < 0.05) {
complexity += 1 / (distance * 100 + 1);
}
});
});
});
complexity = complexity * 1000000 / area;
return Math.round(complexity);
}
function updateComplexity() {
currentComplexity = calculateCrossroadComplexity();
displayBlockInfo(currentBlockHash, currentBlockHeight);
}
function displayBlockInfo(blockHash, blockHeight) {
document.getElementById('info').innerHTML = `
<div>Block Height: ${blockHeight}</div>
<div>Block Hash: ${blockHash}</div>
<div>Crossroad Complexity: ${currentComplexity}</div>
<div>Controls: Press 'g' key or two-finger tap for boost effect</div>
`;
}
function handleInteraction(event) {
const rect = canvas.getBoundingClientRect();
const x = Math.floor((event.clientX - rect.left) / gridSize);
const y = Math.floor((event.clientY - rect.top) / gridSize);
const nearestCircuit = findNearestCircuit(x, y);
if (nearestCircuit) {
branchCircuit(nearestCircuit, x, y);
updateComplexity();
}
}
function findNearestCircuit(x, y) {
return circuits.reduce((nearest, circuit) => {
const distance = Math.sqrt(Math.pow(circuit.x - x, 2) + Math.pow(circuit.y - y, 2));
return distance < nearest.distance ? { circuit, distance } : nearest; }, { circuit: null, distance: Infinity }).circuit;
} function branchCircuit(circuit, x, y) { const branchPoint=findNearestPointOnPath(circuit, x, y); const
newCircuit={ ...circuit, path: circuit.path.slice(0, branchPoint + 1), color: circuit.color.map(c=> Math.min(255, c
+ 50))
};
generatePath(newCircuit, Math.floor(canvas.width / gridSize), Math.floor(canvas.height / gridSize));
circuits.push(newCircuit);
}
function findNearestPointOnPath(circuit, x, y) {
return circuit.path.reduce((nearest, point, index) => {
const distance = Math.sqrt(Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2));
return distance < nearest.distance ? { index, distance } : nearest; }, { index: 0, distance: Infinity }).index; }
window.addEventListener('resize', ()=> {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
if (currentBlockHash) {
generateArt(currentBlockHash);
}
updateComplexity();
});
setup();
</script>
</body>
</html>hv© ªÎ-Crñ,ív¤ßh-¬
https://whatsonchain.com/tx/fde26a4bcf94ccef9d9ef9c697ceb115d22d7e3822c99860040d00deeb91b33f