Bitcoin address: bc1p3f6kfsmwkq6edjaky958sjllyg7dsmf3eg283akkgyh9a58g4gdsa5eukq

SHOWING: First 60

<!DOCTYPE html>
<html>
<head>
<script src="/content/b6a50f5ba932b0ea7f652d9d28e59eced47bc6f8376c25e02d8b3457bb60ac8fi0"></script>
<!-- artwork by @dmtbillythecats -->
<style>
body {
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   height: 100%;
   background-color: #f0f0f0;
   overflow: auto;
}
#controls {
   width: 100%;
   background-color: rgba(255, 255, 255, 0.8);
   box-sizing: border-box;
   z-index: 10;
   position: absolute;
   top: 0;
}
#canvas-container {
   flex: 1;
   width: 100%;
   height: 100%;
}
canvas {
   display: block;
}
</style>
</head>
<body>
<div id="controls">
<input id="blk" type="number" placeholder="Enter block number" style="display: none;" />
</div>
<div id="canvas-container"></div>
<script>
let canvas;
let blockNumber = 1;
let scaleFactor = 1;
let btcColor;

function setup() {
   let canvasSize = min(windowWidth, windowHeight);
   canvas = createCanvas(canvasSize, canvasSize);
   canvas.parent('canvas-container');
   noLoop();
   generateArt();
   document.getElementById('blk').value = blockNumber;
   document.getElementById('blk').addEventListener('input', updateArt);
   window.addEventListener('resize', resize, true);
   resize();

   let mintText = document.getElementById('preview').getAttribute('mint');
   if (mintText.includes('MINT_INSCRIPTION_ID')) {
   let input = document.getElementById('blk');
   input.style.display = 'block';
   input.style.position = 'absolute';
   input.style.fontSize = '10px';
   input.style.margin = '1px';
   input.style.top = '0';
   input.value = blockNumber;
   input.addEventListener('input', () => {
   blockNumber = parseInt(input.value) || 1;
   updateArt();
   });
   updateArt();
   } else {
   const request = new XMLHttpRequest();
   try {
   request.open('GET', '/content/' + mintText);
   request.responseType = 'text';
   request.addEventListener('load', () => initialize(request.response));
   request.addEventListener('error', () => console.error('XHR error'));
   request.send();
   } catch (error) {
   console.error(`XHR error ${error}`);
   }
}
}

function initialize(result) {
   if (result) {
   try {
   console.log('Result', result);
   const data = JSON.parse(result);
   blockNumber = data.blk;
   updateArt();
   } catch (error) {
   console.error('JSON parsing error', error);
   }
 }
}

function updateArt() {
    blockNumber = parseInt(document.getElementById('blk').value) || 1;
    btcColor = getColorFromBlockNumber(blockNumber);
    generateArt();
}

function resize() {
    let canvasSize = min(windowWidth, windowHeight);
    resizeCanvas(canvasSize, canvasSize);
    const root = document.getElementById('canvas-container');
    root.style.width = window.innerWidth - 300 + 'px';
    root.style.height = window.innerHeight + 'px';
    const orgWidth = 300;
    const orgHeight = 300;
    let scaleW = window.innerWidth / orgWidth;
    let scaleH = window.innerHeight / orgHeight;
    let offsetX = 0;
    let offsetY = 0;
    if (scaleH < scaleW) {
    scaleW = scaleH;
    offsetX = (window.innerWidth - orgWidth * scaleW) / 2;
    } else {
    scaleH = scaleW;
    offsetY = (window.innerHeight - orgHeight * scaleH) / 2;
    }
    canvas.style.zoom = scaleW;
    scaleFactor = Math.min(width / 1000, height / 1000);
    redraw();
    updateArt();
}

function generateArt() {
    clear(); 
    let bgColor = color(220, 220, 220);
    background(bgColor);
    btcColor = getColorFromBlockNumber(blockNumber);
    NotebookCover(width / 2, height / 2, width * 0.7, height * 0.85);
    Title(width / 2, height * 0.25);
    BitcoinLogo(width / 2, height * 0.45, width * 0.2);
    TextDetails(width / 2, height * 0.6);
    DecorativeElements();
    CanvasBorder(); 
    DecorativeBorders(); 
}

function getColorFromBlockNumber(blockNumber) {
    let r = (blockNumber * 37) % 256;
    let g = (blockNumber * 73) % 256;
    let b = (blockNumber * 97) % 256;
    return color(r, g, b);
}
  
function DecorativeBorders() {
    stroke(100, 100, 100);
    strokeWeight(2);
    noFill();
    line(width * 0.1, height * 0.1, width * 0.9, height * 0.1);
    line(width * 0.1, height * 0.1, width * 0.1, height * 0.9);
    line(width * 0.9, height * 0.1, width * 0.9, height * 0.9);
    line(width * 0.1, height * 0.9, width * 0.9, height * 0.9);
}
  
function CanvasBorder() {
    noFill();
    stroke(255, 165, 0); // Orange
    strokeWeight(75);
    rect(0, 0, width, height);
}
  
function NotebookCover(x, y, w, h) {
    noStroke();
    fill(0, 0, 0, 30);
    rect(x - w/2 + 10, y - h/2 + 10, w, h, 10);
    fill(255);
    stroke(100);
    strokeWeight(2);
    rect(x - w/2, y - h/2, w, h, 10);
    fill(200);
    noStroke();
    rect(x - w/2 - 10, y - h/2, 20, h, 5);
    let ringCount = 12;
    let ringSpacing = h / (ringCount + 1);
    for (let i = 0; i < ringCount; i++) {
        let ringY = y - h / 2 + ringSpacing * (i + 1);
        BindingRing(x - w/2 - 10, ringY, ringSpacing * 0.6);
    }
    let lineSpacing = h / 25;
    stroke(200);
    strokeWeight(1);
    for (let i = 0; i < 25; i++) {
        let lineY = y - h / 2 + lineSpacing * (i + 1);
        line(x - w / 2 + 30, lineY, x + w / 2 - 30, lineY);
    }
}

function BindingRing(x, y, size) {
    stroke(100);
    strokeWeight(2);
    fill(220);
    ellipse(x, y, size, size * 1.2);
}

function Title(x, y) {
    textAlign(CENTER, CENTER);
    textSize(width * 0.04);
    fill(50);
    noStroke();
    textStyle(BOLD);
    text("Bitcoin:", x, y - 20);
    textSize(width * 0.035);
    textStyle(NORMAL);
    text("A Peer-to-Peer Electronic", x, y + 10);
    text("Cash System", x, y + 40);
}

function BitcoinLogo(x, y, size) {
    push();
    translate(x, y);
    rotate(-PI/12);
    fill(0, 0, 0, 50); 
    noStroke();
    ellipse(5, 5, size * scaleFactor, size * scaleFactor);
    fill(btcColor);
    noStroke();
    ellipse(0, 0, size * scaleFactor, size * scaleFactor);
    fill(255);
    textSize(size * 0.8 * scaleFactor);
    textAlign(CENTER, CENTER);
    textStyle(BOLD);
    text('\u20BF', 0, size * 0.05 * scaleFactor);
    pop();
}

function TextDetails(x, y) {
    textAlign(CENTER, TOP);
    textSize(width * 0.025);
    fill(80);
    let textDetails = [
        "By Satoshi Nakamoto",
        "Published: October 31, 2008",
        "20081031"
    ];
    let yOffset = y;
    let lineHeight = height * 0.05;
    for (let i = 0; i < textDetails.length; i++) {
        text(textDetails[i], x, yOffset);
        yOffset += lineHeight;
    }
}

function DecorativeElements() {
    stroke(200);
    strokeWeight(1);
    noFill();
    let circleCount = 8;
    let circleSize = width * 0.03;
    let startX = width * 0.1;
    let endX = width * 0.9;
    let y = height * 0.85;
    for (let i = 0; i < circleCount; i++) {
        let x = map(i, 0, circleCount - 1, startX, endX);
        ellipse(x, y, circleSize);
        if (i < circleCount - 1) {
            line(x + circleSize/2, y, x + (endX - startX)/(circleCount-1) - circleSize/2, y);
        }
    }
}

window.addEventListener('load', setup);
</script>
<script id="preview" mint="MINT_INSCRIPTION_ID"></script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="/content/b6a50f5ba932b0ea7f652d9d28e59eced47bc6f8376c25e02d8b3457bb60ac8fi0"></script>
<style>
body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    background-color: #f0f0f0;
    overflow: auto;
}
#controls {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    z-index: 10;
    position: absolute;
    top: 0;
}
#canvas-container {
    flex: 1;
    width: 100%;
    height: 100%;
}
canvas {
    display: block;
}
</style>
</head>
<body>
<div id="controls">
    <input id="blockNumberInput" type="number" placeholder="Enter block number" style="display: none;" />
</div>
<div id="canvas-container"></div>
<script>
let canvas;
let blockNumber = 1;
let currentP5Instance = null;
let scaleFactor = 1;

const colors = [
    '#000000',
    '#c8b7e3',
    '#f5aab6',
    '#f4a261',
    '#fa8072',
    '#87ceeb',
    '#ffe082'
];

const balloonColors = [
    '#FFB6C1',
    '#FFDDC1',
    '#D3F9D8',
    '#B3E5FC',
    '#E1BEE7',
    '#FFAB91',
    '#FFE082',
    '#F48FB1'
];

function setup() {
    let canvasSize = min(windowWidth, windowHeight);
    canvas = createCanvas(canvasSize, canvasSize);
    canvas.parent('canvas-container');
    noLoop();
    generateColors();
    generateArt();
    document.getElementById('blockNumberInput').value = blockNumber;
    document.getElementById('blockNumberInput').addEventListener('input', updateArt);
    window.addEventListener('resize', resize, true);
    resize();

    let mintText = document.getElementById('preview').getAttribute('mint');
    if (mintText.includes('MINT_INSCRIPTION_ID')) {
        let input = document.getElementById('blockNumberInput');
        input.style.display = 'block';
        input.style.position = 'absolute';
        input.style.fontSize = '10px';
        input.style.margin = '1px';
        input.style.top = '0';
        input.value = blockNumber;
        input.addEventListener('input', () => {
            blockNumber = parseInt(input.value) || 1;
            updateArt();
        });
        updateArt();
    } else {
        const request = new XMLHttpRequest();
        try {
            request.open('GET', '/content/' + mintText);
            request.responseType = 'text';
            request.addEventListener('load', () => initialize(request.response));
            request.addEventListener('error', () => console.error('XHR error'));
            request.send();
        } catch (error) {
            console.error(`XHR error ${request.status}`);
        }
    }
}

function initialize(result) {
    if (result) {
        console.log('Result', result);
        const data = JSON.parse(result);
        blockNumber = data.blk;
    }
    updateArt();
}

function resize(event) {
    let canvasSize = min(windowWidth, windowHeight);
    canvas = createCanvas(canvasSize, canvasSize);

    const root = document.getElementById('canvas-container');
    root.style.width = window.innerWidth - 300 + 'px';
    root.style.height = window.innerHeight + 'px';
    const orgWidth = 300;
    const orgHeight = 300;
    let scaleW = window.innerWidth / orgWidth;
    let scaleH = window.innerHeight / orgHeight;
    let offsetX = 0;
    let offsetY = 0;
    if (scaleH < scaleW) {
        scaleW = scaleH;
        offsetX = (window.innerWidth - orgWidth * scaleW) / 2;
    } else {
        scaleH = scaleW;
        offsetY = (window.innerHeight - orgHeight * scaleH) / 2;
    }
    canvas.style.zoom = scaleW;
    scaleFactor = Math.min(width / 1000, height / 1000);
    redraw();
    updateArt();
}

function updateArt() {
    generateColors();
    generateArt();
}

function generateColors() {
    let colorIndex = (blockNumber - 1) % colors.length;
    background(colors[colorIndex]);

    balloons.forEach(balloon => {
        balloon.color = getRandomBalloonColor();
    });
}
	
function generateArt() {
    Stars();
    Rainbow();
    BirthdayCake(width / 2, height / 1.5, min(width, height) / 2);
    updateBalloonColors();
    drawBalloons();
    BirthdayCard(width / 2, height / 1.15, min(width, height) * 0.3);
}

function BirthdayCard(x, y, size) {
    let cardWidth = size;
    let cardHeight = size * 0.6;
    fill('#ff8c00'); 
    rectMode(CENTER);
    rect(x, y, cardWidth, cardHeight, 20);
    stroke(082, 193);
    strokeWeight(20);
    noFill();
    rect(x, y, cardWidth, cardHeight, 20);
    textAlign(CENTER, CENTER);
    textStyle(BOLD);
    fill(255);
    noStroke();
    let textSizeTop = cardWidth * 0.1;
    let textSizeMiddle = cardWidth * 0.15;
    let textSizeBottom = cardWidth * 0.1;
    textSize(textSizeTop);
    text("Happy Birthday!", x, y - cardHeight * 0.2);
    textSize(textSizeMiddle);
    text("Bitmap", x, y);
    textSize(textSizeBottom);
    text("2023-06-01", x, y + cardHeight * 0.2);
}

function updateBalloonColors() {
    balloons = [
        { x: 0.15, y: 0.2, size: 80, color: getRandomBalloonColor() },
        { x: 0.85, y: 0.2, size: 100, color: getRandomBalloonColor() },
        { x: 0.85, y: 0.7, size: 70, color: getRandomBalloonColor() },
        { x: 0.15, y: 0.7, size: 90, color: getRandomBalloonColor() }
    ];
}

function getRandomBalloonColor() {
    return balloonColors[Math.floor(Math.random() * balloonColors.length)];
}

let balloons = [
    { x: 0.15, y: 0.2, size: 80, color: getRandomBalloonColor() },
    { x: 0.85, y: 0.2, size: 100, color: getRandomBalloonColor() },
    { x: 0.85, y: 0.7, size: 70, color: getRandomBalloonColor() },
    { x: 0.15, y: 0.7, size: 90, color: getRandomBalloonColor() }
];

function drawBalloons() {
    for (let balloon of balloons) {
        let x = balloon.x * width;
        let y = balloon.y * height;
        let size = balloon.size * Math.min(width, height) / 1000;
        let color = balloon.color || getRandomBalloonColor();
        drawBalloon(x, y, size, color);
        drawBitcoinLogo3(x, y, size * 0.6);
    }
}

function drawBalloon(x, y, size, color) {
    fill(color);
    noStroke();
    ellipse(x, y, size, size * 1.2);
    fill('#333');
    ellipse(x, y + size * 1.2 / 2, size * 0.2, size * 0.2);
    stroke('#333');
    strokeWeight(2);
    line(x, y + size * 1.2 / 2, x, y + size * 1.2 + 50 * Math.min(width, height) / 1000);
}

function BirthdayCake(x, y, size) {
    size *= 1.5;
    let cakeBaseWidth = size * 0.6;
    let cakeBaseHeight = size * 0.2;
    let cakeMiddleWidth = cakeBaseWidth * 0.85;
    let cakeMiddleHeight = cakeBaseHeight * 0.85;
    let cakeTopWidth = cakeMiddleWidth * 0.85;
    let cakeTopHeight = cakeMiddleHeight * 0.85;
    let cakeLayerHeight = cakeBaseHeight * 0.3;
    let frostingHeight = cakeLayerHeight * 0.6;
    let candleHeight = cakeLayerHeight * 2;
    let candleWidth = cakeBaseWidth * 0.07;
    let scaleFactor = cakeBaseWidth / 15;
    let baseColor = color(255, 192, 203);
    let middleColor = color(173, 216, 230);
    let topColor = color(144, 238, 144);
    noStroke();
    fill(baseColor);
    rectMode(CENTER);
    rect(x, y, cakeBaseWidth, cakeBaseHeight, 20);
    fill(middleColor);
    rect(x, y - cakeBaseHeight / 2 - cakeMiddleHeight / 2 + frostingHeight / 2, cakeMiddleWidth, cakeMiddleHeight, 20);
    fill(topColor);
    rect(x, y - cakeBaseHeight - cakeMiddleHeight / 2 - cakeTopHeight / 2 + frostingHeight / 2, cakeTopWidth, cakeTopHeight, 20);
    drawFrosting(x, y - cakeBaseHeight / 2, cakeBaseWidth, frostingHeight, 0.5);
    drawFrosting(x, y - cakeBaseHeight - cakeMiddleHeight / 2, cakeMiddleWidth, frostingHeight, 0.3);
    drawFrosting(x, y - cakeBaseHeight - cakeMiddleHeight - cakeTopHeight / 2, cakeTopWidth, frostingHeight, 0.3);
    for (let i = -2; i <= 2; i++) {
        drawCandle(x + i * candleWidth * 2, y - cakeBaseHeight - cakeMiddleHeight - cakeTopHeight / 2 - frostingHeight / 2, candleWidth, candleHeight);
    }
    drawCakeDecorations(x, y - cakeBaseHeight / 2, cakeBaseWidth, cakeBaseHeight);
    drawCakeDecorations(x, y - cakeBaseHeight - cakeMiddleHeight / 2, cakeMiddleWidth, cakeMiddleHeight);
    drawCakeDecorations(x, y - cakeBaseHeight - cakeMiddleHeight - cakeTopHeight / 2, cakeTopWidth, cakeTopHeight);
    let gridSize = scaleFactor;
    drawBitmap3x3(
        x - cakeBaseWidth / 10 + gridSize / 2, 
        y + cakeBaseHeight / 35 - gridSize / 2 + 1, 
        gridSize, 
        gridSize, 
        2
    );
}
  
function drawFrosting(x, y, width, height, dripFactor) {
  fill(255, 250, 250);
  beginShape();
  vertex(x - width / 2, y);
  for (let i = -width / 2; i <= width / 2; i += width / 12) {
    let drip = height + random(-height * dripFactor, height * dripFactor);
    vertex(x + i, y + drip);
  }
  vertex(x + width / 2, y);
  endShape(CLOSE);
}

function drawCandle(x, y, candleWidth, candleHeight) {
  let gridWidth = candleWidth;
  let gridHeight = candleHeight / 3;
  let cornerRadius = 2;
  let borderColor = '#000000';
  let borderWidth = 2;

  for (let i = 0; i < 3; i++) {
    fill(255, 165, 0);
    stroke(borderColor);
    strokeWeight(borderWidth);
    rect(x - gridWidth / 25, y - candleHeight / 2 + i * gridHeight, gridWidth, gridHeight, cornerRadius);
  }

  noStroke();
  fill(255, 223, 0);
  ellipse(x, y - candleHeight, candleWidth * 0.8, candleWidth * 1.2);

  fill(255, 69, 0);
  ellipse(x, y - candleHeight - candleWidth * 0.1, candleWidth * 0.5, candleWidth * 0.7);
}

function drawCakeDecorations(x, y, cakeWidth, cakeHeight) {
  let sprinkleColors = [color(255, 105, 180), color(255, 182, 193), color(255, 165, 0), color(144, 238, 144), color(173, 216, 230)];

  for (let i = 0; i < 20; i++) {
    fill(random(sprinkleColors));
    let sprinkleX = random(x - cakeWidth / 2 + 10, x + cakeWidth / 2 - 10);
    let sprinkleY = random(y - cakeHeight / 2 + 10, y + cakeHeight / 2 - 10);
    ellipse(sprinkleX, sprinkleY, random(5, 10), random(5, 10));
  }

  for (let i = 0; i < 15; i++) {
    fill(random(200, 255), random(100, 200), random(150, 250));
    let dotX = random(x - cakeWidth / 2 + 20, x + cakeWidth / 2 - 20);
    let dotY = random(y - cakeHeight / 2 + 20, y + cakeHeight / 2 - 20);
    ellipse(dotX, dotY, random(5, 1));
  }
}

function drawBitmap3x3(x, y, cellWidth, cellHeight, borderSize) {
  let borderColor = '#000000';
  let cellColor = '#FFA500';
  noStroke();
  noFill();
  for (let row = 0; row < 3; row++) {
    for (let col = 0; col < 3; col++) {
      let cellX = x + col * (cellWidth + borderSize);
      let cellY = y + row * (cellHeight + borderSize);
      fill(cellColor);
      rect(cellX, cellY, cellWidth, cellHeight);
      stroke(borderColor);
      strokeWeight(borderSize);
      noFill();
      rect(cellX, cellY, cellWidth, cellHeight);
    }
  }
}

function Rainbow() {
  let colors = [
    color(148, 0, 211),
    color(75, 0, 130),
    color(0, 0, 255),
    color(0, 255, 0),
    color(255, 255, 0),
    color(255, 127, 0),
    color(255, 0, 0)
  ];
  let startX = width / 2;
  let startY = height * 0.9;
  let radius = Math.min(width, height) * 0.6;
  let arcWidth = radius * 0.015;
  noStroke();
  for (let i = 0; i < colors.length; i++) {
    stroke(colors[i]);
    strokeWeight(arcWidth);
    noFill();
    arc(startX, startY, radius * 2, radius * 2, PI, 0, OPEN);
    radius -= arcWidth;
  }
}

function Stars() {
  fill(255);
  noStroke();
  for (let i = 0; i < 100; i++) {
    let x = random(width);
    let y = random(height);
    ellipse(x, y, 2, 2);
  }
}

function drawBitcoinLogo3(x, y, size) {
  noStroke();
  fill('#f7931a');
  ellipse(x, y, size, size);

  fill(255);
  textSize(size * 0.6);
  textAlign(CENTER, CENTER);
  text('\u20BF', x, y);
}
       
        window.addEventListener('load', setup);
    </script>
    <script id="preview" mint="MINT_INSCRIPTION_ID"></script>
</body>
</html>

#74,367,915text bitmapbirthday.20230601.16.element#74,348,274text dmt-mint.halvingone#73,781,647tap dmt-deploy.pizzaday#73,752,671tap

<!DOCTYPE html>
<html>
<head>
    <script src="/content/b6a50f5ba932b0ea7f652d9d28e59eced47bc6f8376c25e02d8b3457bb60ac8fi0"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            height: 100vh;
            background-color: #f0f0f0;
            overflow: auto;
        }
        #controls {
            width: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            box-sizing: border-box;
            z-index: 10;
        }
        #controls input {
            font-size: 16px;
            padding: 5px;
        }
        #canvas-container {
            flex: 1;
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            position: relative;
            padding: 10px;
        }
        canvas {
            border: 1px solid #ccc;
            display: block;
        }
    </style>
</head>
<body>
    <div id="controls">
        <input id="blockNumberInput" type="number" placeholder="Enter block number" />
    </div>
    <div id="canvas-container"></div>
    <script>
        let canvas;
        let blockNumber = 1;

        const colors = [
            '#000000',
            '#f3d9c2',
            '#c8b7e3',
            '#f5aab6',
            '#d3c6e0',
            '#f4a261',
            '#fa8072',
            '#98fb98',
            '#87ceeb',
            '#ffb6c1'
        ];

        function setup() {
            canvas = createCanvas(600, 600);
            canvas.parent('canvas-container');
            noLoop();
            document.getElementById('blockNumberInput').value = blockNumber;
            generateArt();
            
            window.addEventListener('resize', resize, true);
            resize();
            
            document.getElementById('blockNumberInput').addEventListener('input', updateArt);
        }

        function updateArt() {
            blockNumber = parseInt(document.getElementById('blockNumberInput').value, 10) || 290304;
            generateArt();
        }

        function resize() {
            const root = document.getElementById('canvas-container');
            root.style.width = window.innerWidth - 300 + 'px';
            root.style.height = window.innerHeight + 'px';
            const orgWidth = 600;
            const orgHeight = 600;
            let scaleW = window.innerWidth / orgWidth;
            let scaleH = window.innerHeight / orgHeight;
            let offsetX = 0;
            let offsetY = 0;
            if (scaleH < scaleW) {
                scaleW = scaleH;
                offsetX = (window.innerWidth - orgWidth * scaleW) / 2;
            } else {
                scaleH = scaleW;
                offsetY = (window.innerHeight - orgHeight * scaleH) / 2;
            }
            canvas.style.zoom = scaleW;
            scaleFactor = Math.min(width / 1000, height / 1000);
            redraw();
        }

        function generateColors() {
            let colorIndex = (blockNumber - 1) % colors.length;
            background(colors[colorIndex]);
        }

        function generateArt() {
            clear(); 
            generateColors(); 
            
if (blockNumber % 2 !== 0) {
    let positions = [
        { x: 50, y: 50, size: 40 }, 
        { x: 550, y: 50, size: 40 }, 
        { x: 50, y: 550, size: 40 }, 
        { x: 550, y: 550, size: 40 } 
    ];

    for (let pos of positions) {
        drawBitcoinLogo2(pos.x, pos.y, pos.size);
    }
}

if (blockNumber % 2 === 0) {
    let positions = [
        { x: 50, y: 50, size: 40 }, 
        { x: 550, y: 50, size: 40 },
        { x: 50, y: 550, size: 40 }, 
        { x: 550, y: 550, size: 40 } 
    ];

    for (let pos of positions) {
        drawBitcoinLogo3(pos.x, pos.y, pos.size);
    }
}
          
          drawPizza(300, 300); 
          drawStars();
        }

function drawStars() {
    fill(255);
    noStroke();
    for (let i = 0; i < 100; i++) {
        let x = random(width);
        let y = random(height);
        ellipse(x, y, 2, 2);
    }
}
      
function drawPizza(x, y) {
    let pizzaSize = 300;
    let crustThickness = 30;
    let sauceColor = '#d9534f'; 
    let cheeseColor = '#ffeb3b'; 
    let oliveColor = '#000'; 
    let pepperoniColor = '#d9534f'; 
    let greenPepperColor = '#4caf50'; 
    let mushroomColor = '#9e9e9e'; 
    let onionColor = '#f5f5f5'; 
    let baconColor = '#e57373';
    let pineappleColor = '#f7e2a6'; 
    let redPepperColor = '#c62828'; 
    let btcSize = 50; 

    fill('#f4a261'); 
    noStroke();
    ellipse(x, y, pizzaSize, pizzaSize); 

    // Draw sauce
    fill(sauceColor);
    ellipse(x, y, pizzaSize - crustThickness, pizzaSize - crustThickness); 

    // Draw cheese
    fill(cheeseColor);
    ellipse(x, y, pizzaSize - crustThickness * 2, pizzaSize - crustThickness * 2); 

    stroke('#f4a261'); 
    strokeWeight(10);
    line(x, y, x + pizzaSize / 2, y);
    line(x, y, x, y + pizzaSize / 2);
    line(x, y, x - pizzaSize / 2, y);
    line(x, y, x, y - pizzaSize / 2);

    fill(pepperoniColor);
    noStroke();
    ellipse(x - 80, y - 80, 30, 30); 
    ellipse(x + 80, y - 80, 30, 30); 
    ellipse(x - 80, y + 80, 30, 30); 
    ellipse(x + 80, y + 80, 30, 30); 

    fill(greenPepperColor);
    beginShape();
    vertex(x - 60, y - 60);
    vertex(x - 40, y - 80);
    vertex(x - 20, y - 60);
    vertex(x - 40, y - 40);
    endShape(CLOSE);
    
    beginShape();
    vertex(x + 60, y - 60);
    vertex(x + 40, y - 80);
    vertex(x + 20, y - 60);
    vertex(x + 40, y - 40);
    endShape(CLOSE);

    fill(mushroomColor);
    ellipse(x - 60, y - 20, 25, 20); 
    ellipse(x + 60, y - 20, 25, 20); 
    ellipse(x, y + 60, 25, 20); 

    fill(oliveColor);
    ellipse(x - 70, y + 70, 15, 15); 
    ellipse(x + 70, y - 70, 15, 15); 
    ellipse(x - 30, y - 30, 15, 15); 
    ellipse(x + 30, y + 30, 15, 15); 

    fill(onionColor);
    ellipse(x - 40, y + 40, 20, 10); 
    ellipse(x + 40, y - 40, 20, 10); 
	
    fill(baconColor);
    beginShape();
    vertex(x - 80, y - 80);
    vertex(x - 60, y - 100);
    vertex(x - 20, y - 80);
    vertex(x - 40, y - 60);
    endShape(CLOSE);

    beginShape();
    vertex(x + 80, y - 80);
    vertex(x + 60, y - 100);
    vertex(x + 20, y - 80);
    vertex(x + 40, y - 60);
    endShape(CLOSE);

    fill(pineappleColor);
    beginShape();
    vertex(x - 40, y - 60);
    vertex(x - 20, y - 80);
    vertex(x, y - 60);
    vertex(x - 20, y - 40);
    endShape(CLOSE);
    
    beginShape();
    vertex(x + 40, y - 60);
    vertex(x + 20, y - 80);
    vertex(x, y - 60);
    vertex(x + 20, y - 40);
    endShape(CLOSE);

    fill(redPepperColor);
    ellipse(x - 70, y + 70, 15, 15); 
    ellipse(x + 70, y - 70, 15, 15); 

    stroke('#f4a261'); 
    strokeWeight(5);
    noFill();
    ellipse(x, y, pizzaSize + 10, pizzaSize + 10); 
    
    drawBitcoinLogo(x, y, pizzaSize * 0.25); 
}

function drawBitcoinLogo(x, y, size) {
    fill('#f7931a'); 
    noStroke();
    ellipse(x, y, size, size); 

    fill('#ffffff'); 
    textSize(size * 0.8);
    textAlign(CENTER, CENTER);
    text('\u20BF', x, y);
}

function drawBitcoinLogo2(x, y, size) {
    fill('#00aaff'); 
    noStroke();
    ellipse(x, y, size, size); 

    fill('#ffffff'); 
    textSize(size * 0.8);
    textAlign(CENTER, CENTER);
    text('\u20BF', x, y);
}      

function drawBitcoinLogo3(x, y, size) {
    fill('#000000'); 
    noStroke();
    ellipse(x, y, size, size); 

    fill('#ffffff');
    textSize(size * 0.8);
    textAlign(CENTER, CENTER);
    text('\u20BF', x, y);
}      
      
    </script>
</body>
</html>