CryptoPunk #8611 #13436271

<!DOCTYPE html>
<html>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    canvas {
      position: relative;
      width: 24rem;
      height: 24rem;
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: contain;
      top: 0;
      left: 0;
      image-rendering: pixelated;
    }
  </style>
  <body>
    <canvas id="canvas" width="24" height="24"></canvas>
    <script>
      var isBlackAndWhite = true;
      var originalImageData = null;

      function convertToBlackAndWhite() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        var x = 3;
        var y = 11; 

        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var pixels = imageData.data;

        for (var i = 0; i < pixels.length; i += 4) {
          var currentX = (i / 4) % canvas.width;
          var currentY = Math.floor(i / (4 * canvas.width));

          if (currentX === x && currentY === y) {
            pixels[i] = 255; 
            pixels[i + 1] = 73; 
            pixels[i + 2] = 0; 
            pixels[i + 3] = 255; 
          } else {
            var red = pixels[i];
            var green = pixels[i + 1];
            var blue = pixels[i + 2];

            var grayscaleValue = red * 0.3 + green * 0.59 + blue * 0.11;

            pixels[i] = grayscaleValue;
            pixels[i + 1] = grayscaleValue; 
            pixels[i + 2] = grayscaleValue; 
          }
        }

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.putImageData(imageData, 0, 0);

        isBlackAndWhite = true;
      }

      function restoreOriginalColors() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.putImageData(originalImageData, 0, 0);
        
        isBlackAndWhite = false;
      }

      function toggleColors() {
        if (isBlackAndWhite) {
          restoreOriginalColors();
        } else {
          convertToBlackAndWhite();
        }
      }

      function loadImage() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var img = new Image();

        img.crossOrigin = 'anonymous';

        img.onload = function () {
          ctx.drawImage(img, 0, 0);
          originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          setTimeout(convertToBlackAndWhite, 0);
        };

        img.src = '/content/6defa75c3d57fed23c4205ee258d434bd7ccde8e32b0f4f1bbddc04823fc7d8di0';
      }

      window.onload = function () {
        var canvas = document.getElementById('canvas');
        canvas.addEventListener('click', toggleColors);
        loadImage();
      };
    </script>
  </body>
</html>

CryptoPunk #8611 #13436414

CryptoPunk #8611 #13432976

CryptoPunk #8611 #13436908

Action	Price	Marketplace	From	To	Time
SALE	0.0129 390.88	magiceden	77rv	380e	12 months
INSCRIBED	- -		-	77rv	12 months

Inscription #13436271

More from this Collection