$ JS Color Interpolation

<!DOCTYPE html>
<html>
<body>
<head>
  <title>Color Interpolation</title>
</head>
<canvas id="canvas" width="580" height="580"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var imgRef = ctx.createImageData(580, 580);
var img = ctx.createImageData(1160, 1160);

const rnd = 20;
var zoom = 0.5;

for (var i = 0; i < imgRef.data.length; i += 4) {
imgRef.data[i] = 200;
imgRef.data[i + 1] = 200;
imgRef.data[i + 2] = 200;
imgRef.data[i + 3] = 255;
}

ctx.putImageData(imgRef, 0, 0);

function interpolate() {
for (var i = 0; i < 1160; i++) {
  for (var j = 0; j < 1160; j++) {
    // Determine the corresponding pixel in the original image
    let iRef = Math.floor(i / 2);
    let jRef = Math.floor(j / 2);

    // Get the color values of the corresponding pixel
    let r = imgRef.data[(iRef * 580 + jRef) * 4];
    let g = imgRef.data[(iRef * 580 + jRef) * 4 + 1];
    let b = imgRef.data[(iRef * 580 + jRef) * 4 + 2];

    // Add random noise to color values
    r += Math.floor(Math.random() * (rnd * 2 + 1)) - rnd;
    g += Math.floor(Math.random() * (rnd * 2 + 1)) - rnd;
    b += Math.floor(Math.random() * (rnd * 2 + 1)) - rnd;

    // Clamp color values to valid range
    r = Math.min(255, Math.max(0, r));
    g = Math.min(255, Math.max(0, g));
    b = Math.min(255, Math.max(0, b));

    // Set the color values of the current pixel in the new image
    img.data[(i * 1160 + j) * 4] = r;
    img.data[(i * 1160 + j) * 4 + 1] = g;
    img.data[(i * 1160 + j) * 4 + 2] = b;
    img.data[(i * 1160 + j) * 4 + 3] = 255;
  }
}
animate()
}

function animate() {
ctx.scale(zoom, zoom);
ctx.putImageData(img, -zoom/2, -zoom/2);
requestAnimationFrame(animate);
// alert(zoom);
if (zoom < 1) {
zoom += 0.02;
} else {
zoom = 0.5;
imgRef = ctx.getImageData(0, 0, 580, 580);
interpolate();
}
}

interpolate();

</script>
</body>
</html>