cordQ text/html MX <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BSV Game of Life Color 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="lifeCanvas"></canvas>
<div id="info"></div>
<script>
const canvas = document.getElementById('lifeCanvas');
const ctx = canvas.getContext('2d');
let currentBlockHash = '';
let currentBlockHeight = 0;
const cellSize = 5;
let cols, rows;
let grid, nextGrid;
let lastUpdateTime = 0;
const updateInterval = 60000; // Update every minute
let frameCount = 0;
let colorPalette = [];
function setup() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
cols = Math.floor(canvas.width / cellSize);
rows = Math.floor(canvas.height / cellSize);
grid = create2DArray(cols, rows);
nextGrid = create2DArray(cols, rows);
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
randomizeGrid();
updateLife();
requestAnimationFrame(animate);
}
function create2DArray(cols, rows) {
return new Array(cols).fill(null).map(() => new Array(rows).fill(0));
}
function animate(currentTime) {
frameCount++;
if (currentTime - lastUpdateTime > updateInterval) {
updateLife();
lastUpdateTime = currentTime;
}
updateGrid();
drawGrid();
if (frameCount % 200 === 0) {
addRandomCells();
}
requestAnimationFrame(animate);
}
function updateGrid() {
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
let state = grid[i][j];
let neighbors = countNeighbors(grid, i, j);
if (state == 0 && neighbors == 3) {
nextGrid[i][j] = 1;
} else if (state == 1 && (neighbors < 2 || neighbors > 3)) {
nextGrid[i][j] = 0;
} else {
nextGrid[i][j] = state;
}
}
}
[grid, nextGrid] = [nextGrid, grid];
}
function countNeighbors(grid, x, y) {
let sum = 0;
for (let i = -1; i < 2; i++) {
for (let j = -1; j < 2; j++) {
let col = (x + i + cols) % cols;
let row = (y + j + rows) % rows;
sum += grid[col][row];
}
}
sum -= grid[x][y];
return sum;
}
function drawGrid() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
if (grid[i][j] == 1) {
ctx.fillStyle = colorPalette[(i + j) % colorPalette.length];
ctx.fillRect(i * cellSize, j * cellSize, cellSize - 1, cellSize - 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;
}
}
function updateLife() {
fetchBlockInfo().then(blockInfo => {
if (blockInfo && blockInfo.hash !== currentBlockHash) {
currentBlockHash = blockInfo.hash;
currentBlockHeight = blockInfo.height;
colorPalette = generateColorPalette(blockInfo.hash);
seedNewCells(blockInfo.hash);
displayBlockInfo(blockInfo.hash, blockInfo.height);
}
}).catch(error => {
console.error('Error updating life:', error);
});
}
function getBaseHue(blockHash) {
const hashEnd = blockHash.slice(-4);
return parseInt(hashEnd, 16) % 360;
}
function generateColorPalette(blockHash) {
const colors = [];
const baseHue = getBaseHue(blockHash);
for (let i = 0; i < 8; i++) {
const hue = (baseHue + i * 5) % 360;
const saturation = 70 + (parseInt(blockHash.substr(i*2, 2), 16) % 30);
const lightness = 40 + (parseInt(blockHash.substr(56 - i*2, 2), 16) % 20);
colors.push(`hsl(${hue}, ${saturation}%, ${lightness}%)`);
}
return colors;
}
function randomizeGrid() {
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
grid[i][j] = Math.random() > 0.9 ? 1 : 0;
}
}
}
function seedNewCells(blockHash) {
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
const hashPart = blockHash.substr((i * j) % 60, 2);
if (parseInt(hashPart, 16) % 16 === 0) {
grid[i][j] = 1;
}
}
}
}
function addRandomCells() {
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
if (Math.random() > 0.999) {
grid[i][j] = 1;
}
}
}
}
function displayBlockInfo(blockHash, blockHeight) {
document.getElementById('info').innerHTML = `
<div>Block Height: ${blockHeight}</div>
<div>Block Hash: ${blockHash}</div>
`;
}
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
cols = Math.floor(canvas.width / cellSize);
rows = Math.floor(canvas.height / cellSize);
grid = create2DArray(cols, rows);
nextGrid = create2DArray(cols, rows);
randomizeGrid();
});
setup();
</script>
</body>
</html>hv© tÝWÎ<ÖÖ{7t Ny.¬
https://whatsonchain.com/tx/undefined