Data Mining and Machine Learning Markov Chains Pixels and Images - xbdev.net 2000 - 2024 (c) - Tutorials - Demos - Software, Game Development, Engineering, Data Mining, File Formats,Programming, Machine Learning

const image = new Image();
image.src = './test-image.jpg'; // Replace this with your own image (try other images)
image.onload = function() {
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const pixels = imageData.data;

// Function to get a pixel from its x, y coordinates
  const getPixel = (x, y) => {
    const index = (y * canvas.width + x) * 4;
    return [pixels[index], pixels[index + 1], pixels[index + 2], pixels[index + 3]];
  };

// Function to set a pixel at its x, y coordinates
  const setPixel = (x, y, pixel) => {
    const index = (y * canvas.width + x) * 4;
    pixels[index] = pixel[0];
    pixels[index + 1] = pixel[1];
    pixels[index + 2] = pixel[2];
    pixels[index + 3] = pixel[3];
  };

// Build Markov Chain for pixels
  const markovChain = {};
  for (let y = 0; y < canvas.height; y++) {
    for (let x = 0; x < canvas.width; x++) {
      const currentPixel = getPixel(x, y);
      const neighbors = [];
      for (let dy = -1; dy <= 1; dy++) {
        for (let dx = -1; dx <= 1; dx++) {
          if (dx === 0 && dy === 0) continue; // Skip current pixel
          const nx = x + dx;
          const ny = y + dy;
          if (nx >= 0 && nx < canvas.width && ny >= 0 && ny < canvas.height) {
            neighbors.push(getPixel(nx, ny));
          }
        }
      }
      markovChain[currentPixel.toString()] = neighbors;
    }
  }

// Scroll image
  let offset = 0;
  const scrollSpeed = 1;
  setInterval(() => {
    // Shift pixels to the right
    for (let y = 0; y < canvas.height; y++) {
      for (let x = canvas.width - 1; x > 0; x--) {
        const pixel = getPixel(x - 1, y);
        setPixel(x, y, pixel);
      }
    }
    // Generate new pixels on the left using Markov Chain
    for (let y = 0; y < canvas.height; y++) {
      const lastPixel = getPixel(0, y);
      const nextPixel = markovChain[lastPixel.toString()][Math.floor(Math.random() * markovChain[lastPixel.toString()].length)];
      setPixel(0, y, nextPixel);
    }
    ctx.putImageData(imageData, 0, 0);
    offset += scrollSpeed;
  }, 100); // Adjust interval as needed
};
</script>

Data Mining and Machine Learning > Markov Chains Pixels and Images

Not all Peaches and Cream

Thinks to Try

Resources