Flood fill - image transition effect in 16 lines of pure JS

module Main where

import Prelude
import Effect (Effect)
import Effect.Aff (launchAff_)
import Effect.Aff.Timer (setInterval)
import Effect.DOM (window)
import Web.HTML (document)
import Web.HTML.Document (getElementById)
import Web.HTML.Element (Element, toElement)
import Web.HTML.HTMLCanvasElement (getContext2D, getCanvasElementById)
import Web.HTML.Canvas.Image (newImage, getWidth, getHeight, setSrc)
import Web.HTML.Canvas.CanvasRenderingContext2D (CanvasRenderingContext2D, drawImage)
import Web.HTML.Types (CanvasElement, Image)
import Web.DOM.Node.Types (Node)

foreign import requestAnimationFrame :: (Effect Unit -> Effect Unit) -> Effect Unit

-- Loads the image and begins the animation
startAnimation :: Effect Unit
startAnimation = do
  img <- newImage
  setSrc img "example1.jpg"
  canvas <- getCanvasElementById "myCanvas"
  context <- getContext2D canvas

  -- We defer animation start until the image is loaded
  imgOnLoad img (beginAnimation context img)

-- Sets the image `onload` handler, safely deferring canvas drawing until the image is ready
imgOnLoad :: Image -> Effect Unit -> Effect Unit
imgOnLoad img action = do
  foreignOnload img action

foreign import foreignOnload :: Image -> Effect Unit -> Effect Unit

-- Initializes the animation loop
beginAnimation :: CanvasRenderingContext2D -> Image -> Effect Unit
beginAnimation context img = do
  imageWidth <- getWidth img
  imageHeight <- getHeight img
  let row = imageHeight
  requestAnimationFrame (animate context img row imageWidth imageHeight)

-- Animates drawing row by row
animate :: CanvasRenderingContext2D -> Image -> Int -> Int -> Int -> Effect Unit
animate context img row imageWidth imageHeight = do
  drawImage context img 0 row imageWidth 1 0 0 imageWidth row
  let nextRow = if row > 0 then row - 1 else imageHeight
  requestAnimationFrame (animate context img nextRow imageWidth imageHeight)

main :: Effect Unit
main = do
  startAnimation

Not at my computer but I generated a rough chatGPT translation that I’m sure doesn’t compile to get me started later if I want to attempt this with the safety of Purescript.

Ps. Yes, I know Purescript generated by chatGPT generally sucks and is filled with hallucinations.

I'm guessing that somebody will manage to emulate the effect using a very stretched image and pure CSS