以下に、ユーザーの要望に基づいたアプリの実装例を示します。このアプリでは、JavaScriptのCanvas APIを使用して画像のコントラストを変更します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>画像コントラスト変更アプリ</title>
  <style>
    #image-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="image-container">
    <canvas id="canvas"></canvas>
  </div>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const image = new Image();

      image.src = 'path/to/your/image.jpg'; // 画像のパスを指定してください

      image.onload = function() {
        canvas.width = image.width;
        canvas.height = image.height;

        ctx.drawImage(image, 0, 0);

        const width = image.width;
        const height = image.height;
        const tileSize = 30;

        for (let x = 0; x < width; x += tileSize) {
          for (let y = 0; y < height; y += tileSize) {
            const imageData = ctx.getImageData(x, y, tileSize, tileSize);
            const data = imageData.data;

            for (let i = 0; i < data.length; i += 4) {
              // コントラストをランダムで変更する
              const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
              const contrast = Math.random() * 2 - 1; // -1から1までのランダムな値
              const newBrightness = brightness + contrast * (brightness - 128);
              data[i] = data[i + 1] = data[i + 2] = newBrightness;
            }

            ctx.putImageData(imageData, x, y);
          }
        }
      };
    });
  </script>
</body>
</html>
```

ジョーク要素がなかったため、ジョークは含まれていません。このアプリは、指定された画像のコントラストを30×30ごとの範囲でランダムに変更します。画像のパスを適切なものに変更して使用してください。