14
cross-posted from: https://lemmy.world/post/20776659
A quick, naive AI generated Purescript translation (quickly generated that probably doesn’t work but will help get me started later)
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
Don’t get me started on how difficult CSS is with Purescript! I tend to just admit defeat eventually and throw tailwind into the project.