import { imagePromise } from "@thi.ng/pixel/canvas" ; import { RGB565 } from "@thi.ng/pixel/format/rgb565" ; import { intBufferFromImage } from "@thi.ng/pixel/int" ; import { canvas , setAt } from "@thi.ng/text-canvas/canvas" ; import { formatCanvas } from "@thi.ng/text-canvas/format" ; import { FMT_HTML565 } from "@thi.ng/text-format/html" ; import IMG from "./test.png" ; const W = 64 ; const H = 48 ; ( async ( ) => { const el = document . getElementById ( "app" ) ! ; const img = await imagePromise ( IMG ) ; const iw = img . width ; const ih = img . height ; const buf = intBufferFromImage ( img , RGB565 ) ; const c = canvas ( W , H , 0xffff ) ; const fmt = FMT_HTML565 ( ) ; const char = "▓" . charCodeAt ( 0 ) ; let start = 0 ; const update = ( time ) => { if ( ! start ) start = time ; const t = ( time - start ) * 0.001 ; for ( let y = 0 ; y < H ; y ++ ) { const v = y / H ; for ( let x = 0 ; x < W ; x ++ ) { const u = x / W ; const uu = ( u + 0.1 * Math . cos ( u + 20 * v - 8 * t ) ) * iw ; const vv = ( v + 0.1 * Math . sin ( v + 20 * u + 8 * t ) ) * ih ; setAt ( c , x , y , char , buf . getAt ( uu , vv ) || 0xffff ) ; } } el . innerHTML = formatCanvas ( c , fmt ) ; requestAnimationFrame ( update ) ; } ; requestAnimationFrame ( update ) ; } ) ( ) ;