Markov Chain Image Generation This code loads an image onto a canvas then builds a Markov Chain for the pixels where each pixel s neighbors are stored as possible next pixels Finally it scrolls the image to the right generating new pixels on the left using the Markov Chain DOCTYPE html html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title Markov Chain Pixel Scrolling title head body canvas id canvas width 800 height 600 canvas script const canvas document getElementById canvas const ctx canvas getContext 2d const image new Image image src var images test512 png Replace your image jpg with the path to your image 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 let neighbors if markovChain currentPixel toString neighbors markovChain currentPixel toString 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 body html
et y 0 y canvas height y for let x 0 x canvas width x const currentPixel getPixel x y let neighbors if markovChain currentPixel toString neighbors markovChain currentPixel toString 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 body html