import { Endomorphism } from 'fp-ts/function' ; import * as R from 'fp-ts/Reader' ; type Color = { readonly red : number ; readonly green : number ; readonly blue : number ; } ; type Point = { readonly x : number ; readonly y : number ; } ; type Image < A > = R . Reader < Point , A > ; const color = ( red , green , blue ) : Color => ( { red , green , blue } ) ; const BLACK = color ( 0 , 0 , 0 ) ; const WHITE = color ( 255 , 255 , 255 ) ; const brightness = ( color ) : number => ( color . red + color . green + color . blue ) / 3 ; export const grayscale = ( c ) : Color => { const n = brightness ( c ) ; return color ( n , n , n ) ; } ; export const invert = ( c ) : Color => color ( 255 - c . red , 255 - c . green , 255 - c . red ) ; export const threshold = ( c ) : Color => brightness ( c ) < 100 ? BLACK : WHITE ; main ( R . map ( ( c ) => c ) ) ; function main ( f ) { const canvas = document . getElementById ( 'canvas' ) as any ; const ctx = canvas . getContext ( '2d' ) as any ; const bird = document . getElementById ( 'bird' ) as any ; bird . onload = function ( ) { console . log ( 'hello' ) ; function getImage ( imageData ) { const data = imageData . data ; return ( loc ) => { const pos = loc . x * 4 + loc . y * 632 * 4 ; return color ( data [ pos ] , data [ pos + 1 ] , data [ pos + 2 ] ) ; } ; } function setImage ( imageData , image ) { const data = imageData . data ; for ( let x = 0 ; x < 632 ; x ++ ) { for ( let y = 0 ; y < 421 ; y ++ ) { const pos = x * 4 + y * 632 * 4 ; const { red , green , blue } = image ( { x , y } ) ; data [ pos ] = red ; data [ pos + 1 ] = green ; data [ pos + 2 ] = blue ; } } ctx . putImageData ( imageData , 0 , 0 ) ; } ctx . drawImage ( bird , 0 , 0 ) ; const imageData = ctx . getImageData ( 0 , 0 , 632 , 421 ) ; setImage ( imageData , f ( getImage ( imageData ) ) ) ; } ; }