DOCTYPE html html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title Markov Chain Block Scrolling title head body canvas id canvas width 800 height 600 canvas script const canvas document getElementById canvas const ctx canvas getContext 2d const bs x 64 y 64 blocksize 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 block of pixels from its x y coordinates const getBlock x y const block for let dy 0 dy bs x dy for let dx 0 dx bs y dx const nx x dx const ny y dy if nx 0 nx canvas width ny 0 ny canvas height const pixel getPixel nx ny block push pixel return block Function to calculate the average color value for a block of pixels const calculateAverageColor block let totalR 0 totalG 0 totalB 0 for let i 0 i block length i totalR block i 0 totalG block i 1 totalB block i 2 const avgR Math round totalR block length const avgG Math round totalG block length const avgB Math round totalB block length return avgR avgG avgB 255 Alpha value is set to 255 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 if x return if y return if pixel return if x 0 x canvas width y 0 y canvas height return Skip pixels outside the canvas 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 blocks const markovChain for let y 0 y canvas height y bs y for let x 0 x canvas width x bs x const currentBlock getBlock x y const avgColor calculateAverageColor currentBlock const neighbors for let dy bs y dy bs y dy bs y for let dx bs x dx bs x dx bs x if dx 0 dy 0 continue Skip current block const nx x dx const ny y dy if nx 0 nx canvas width ny 0 ny canvas height const neighborBlock getBlock nx ny const neighborAvgColor calculateAverageColor neighborBlock neighbors push neighborAvgColor markovChain avgColor toString neighbors Scroll image let offset 0 const scrollSpeed 1 setInterval Shift blocks to the right for let y 0 y canvas height y bs y for let x canvas width bs x x 0 x bs x const block getBlock x bs x y for let dy 0 dy bs y dy for let dx 0 dx bs x dx const pixel block dy bs x dx setPixel x dx y dy pixel Generate new blocks on the left using Markov Chain for let y 0 y canvas height y bs y const lastBlock getBlock 0 y const lastAvgColor calculateAverageColor lastBlock const nextBlock markovChain lastAvgColor toString if nextBlock nextBlock length 0 const randomIndex Math floor Math random nextBlock length for let dy 0 dy bs y dy for let dx 0 dx bs x dx const pixel nextBlock randomIndex dy bs x dx setPixel dx y dy pixel ctx putImageData imageData 0 0 offset scrollSpeed 1000 Adjust interval as needed script body html
pixels index 1 pixel 1 pixels index 2 pixel 2 pixels index 3 pixel 3 Build Markov Chain for blocks const markovChain for let y 0 y canvas height y bs y for let x 0 x canvas width x bs x const currentBlock getBlock x y const avgColor calculateAverageColor currentBlock const neighbors for let dy bs y dy bs y dy bs y for let dx bs x dx bs x dx bs x if dx 0 dy 0 continue Skip current block const nx x dx const ny y dy if nx 0 nx canvas width ny 0 ny canvas height const neighborBlock getBlock nx ny const neighborAvgColor calculateAverageColor neighborBlock neighbors push neighborAvgColor markovChain avgColor toString neighbors Scroll image let offset 0 const scrollSpeed 1 setInterval Shift blocks to the right for let y 0 y canvas height y bs y for let x canvas width bs x x 0 x bs x const block getBlock x bs x y for let dy 0 dy bs y dy for let dx 0 dx bs x dx const pixel block dy bs x dx setPixel x dx y dy pixel Generate new blocks on the left using Markov Chain for let y 0 y canvas height y bs y const lastBlock getBlock 0 y const lastAvgColor calculateAverageColor lastBlock const nextBlock markovChain lastAvgColor toString if nextBlock nextBlock length 0 const randomIndex Math floor Math random nextBlock length for let dy 0 dy bs y dy for let dx 0 dx bs x dx const pixel nextBlock randomIndex dy bs x dx setPixel dx y dy pixel ctx putImageData imageData 0 0 offset scrollSpeed 1000 Adjust interval as needed script body html