Building a Pixel Art Editor with Elm

Transcript

1. 1.

   Building a Pixel Art Editor with Elm Shuhei Kagawa http://shuheikagawa.com/pixelm

   1
2. 2.

   About Me Shuhei Kagawa !" Frontend Engineer @ Zalando Writing

   JavaScript by day and Elm by night Consuming IPA ! as well as API " Twitter: @shuheikagawa GitHub: @shuhei http://shuheikagawa.com/pixelm 2
3. 3.

   Agenda 1. Pixel Art 2. Pixel Grid - Data Structure

   3. Pixel Grid - Event Handling 4. Animation - Data Structure 5. Animation - JavaScript Interop 6. Animation - Event Handling http://shuheikagawa.com/pixelm 3
4. 4.

   1. Pixel Art http://shuheikagawa.com/pixelm 4

5. 5.

   Check out great works by: • @1041uuu • @waneella •

   @timswast http://shuheikagawa.com/pixelm 5
6. 6.

   This is awesome! http://shuheikagawa.com/pixelm 6

7. 7.

   Let's draw! http://shuheikagawa.com/pixelm 7

8. 8.

   Let's draw! Let's make a tool to draw! http://shuheikagawa.com/pixelm 8

9. 9.

   Pixelm • Web-based drawing tool (16x16) • Elm: 1,700 LOC,

   JavaScript: 150 LOC • Mobile-compatible • Already many tools for desktop, but not many for mobile • Animation support • Export to SVG/GIF/Animated GIF http://shuheikagawa.com/pixelm https://github.com/shuhei/pixelm http://shuheikagawa.com/pixelm 9
10. 10.

    2. Pixel Grid - Data Structure http://shuheikagawa.com/pixelm 10

11. 11.

    Pixel Grid with SVG • elm-lang/svg • <rect>s for pixels

    • <line>s for borders between pixels http://shuheikagawa.com/pixelm 11
12. 12.

    Data Structure for Pixels import Array.Hamt as Array exposing (Array)

    type alias PixelGrid = Array (Array Color) -- ! Straightforward -- " Filled with transparent color at first -- # A bit tedious to get/set a pixel type alias PixelGrid = Dict (Int, Int) Color -- ! getting & setting a pixel are super easy -- ! No need to keep transparent pixels -- # A transparent pixel can be no entry or a transparent color -- # `Nothing` can be a transparent pixel or out of range http://shuheikagawa.com/pixelm 12
13. 13.

    Bucket Tool http://shuheikagawa.com/pixelm 13

14. 14.

    fill : Int -> Int -> a -> Array2 a

    -> Array2 a fill x y to arr2 = let neighbors x y = [ ( x - 1, y ), ( x, y - 1), ( x + 1, y ), ( x, y + 1 ) ] fillRegion a ( x, y ) ( visited, arr2 ) = case get x y arr2 of Nothing -> ( visited, arr2 ) Just c -> if Set.member ( x, y ) visited then ( visited, arr2 ) else if c == a then List.foldl (fillRegion a) ( Set.insert ( x, y ) visited, set x y to arr2 ) (neighbors x y) else ( Set.insert ( x, y ) visited, arr2 ) start a = Tuple.second <| fillRegion a ( x, y ) ( Set.empty, arr2 ) in get x y arr2 |> Maybe.map start |> Maybe.withDefault arr2 http://shuheikagawa.com/pixelm 14
15. 15.

    3. Pixel Grid - Event Handling http://shuheikagawa.com/pixelm 15

16. 16.

    Drawing on Pixels viewPixel : Int -> Int -> Color

    viewPixel col row color = Svg.rect [ Svg.Attributes.width "1" , Svg.Attributes.height "1" , Svg.Attributes.x <| toString (toFloat col) , Svg.Attributes.y <| toString (toFloat row) , Svg.Attributes.fill <| ColorUtil.toColorString color , Svg.Events.onMouseDown <| MouseDown col row , Svg.Events.onMouseMove <| MouseMove col row , Svg.Events.onMouseUp <| MouseUp ] [] This works fine on desktop. http://shuheikagawa.com/pixelm 16
17. 17.

    Drawing on Pixels viewPixel : Int -> Int -> Color

    viewPixel col row color = Svg.rect [ Svg.Attributes.width "1" , Svg.Attributes.height "1" , Svg.Attributes.x <| toString (toFloat col) , Svg.Attributes.y <| toString (toFloat row) , Svg.Attributes.fill <| ColorUtil.toColorString color , Svg.Events.onMouseDown <| MouseDown col row , Svg.Events.onMouseMove <| MouseMove col row , Svg.Events.onMouseUp <| MouseUp , Svg.Events.on "touchstart" <| MouseDown col row -- !ɹtouchmove doesn't work... , Svg.Events.on "touchmove" <| MouseMove col row , Svg.Events.on "touchend" <| MouseUp ] [] http://shuheikagawa.com/pixelm 17
18. 18.

    http://shuheikagawa.com/pixelm 18

19. 19.

    http://shuheikagawa.com/pixelm 19

20. 20.

    Decode event as JSON -- Cannot get data from a

    event Html.Events.onClick msg -- Can get data from a event with JSON decoder! Html.Events.on "click" decoder Html.Events.onWithOptions "click" options decoder http://shuheikagawa.com/pixelm 20
21. 21.

    Relative Touch Position decodeMouseEvent : (( Float, Float ) ->

    msg) -> Json.Decoder msg decodeMouseEvent tagger = let decodeXY xField yField = Json.map2 (,) (Json.field xField Json.float) (Json.field yField Json.float) decodeTouch = Json.at [ "touches", "0" ] <| decodeXY "clientX" "clientY" decodeTarget = Json.field "currentTarget" <| decodeXY "offsetLeft" "offsetTop" in Json.map2 minusPos decodeTouch decodeTarget |> Json.map tagger minusPos : (Float, Float) -> (Float, Float) -> (Float, Float) minusPos ( x0, y0 ) ( x1, y1 ) = ( x0 - x1, y0 - y1 ) http://shuheikagawa.com/pixelm 21
22. 22.

    viewGrid grid = Html.div [ Html.Events.on "mousedown" <| decodeMouseEvent MouseDown

    , Html.Events.on "mousemove" <| decodeMouseEvent MouseMove , Html.Events.on "mouseup" <| Json.succeed MouseUp , Html.Events.on "touchstart" <| decodeTouchEvent MouseDown , Html.Events.on "touchmove" <| decodeTouchEvent MouseMove , Html.Events.on "touchend" <| Json.succeed MouseUp ] [ viewSvg grid ] update msg = case msg of MouseDown screenPos -> ( { model | frames = updateCurrentFrame (toPixelPos screenPos) model } , Cmd.none) -- ... http://shuheikagawa.com/pixelm 22
23. 23.

    http://shuheikagawa.com/pixelm 23

24. 24.

    http://shuheikagawa.com/pixelm 24

25. 25.

    4. Animation - Data Structure http://shuheikagawa.com/pixelm 25

26. 26.

    http://shuheikagawa.com/pixelm 26

27. 27.

    Animation Frames • Always have a selected item (cannot be

    empty) • Get the selected item without Maybe http://shuheikagawa.com/pixelm 27
28. 28.

    Array with a selected item -- ! Duplicated frame data

    type SelectionArray a = SelectionArray a (Array a) -- ! Cannot get the current frame without `Maybe` type SelectionArray a = SelectionArray Int (Array a) -- " type alias SelectionArray a = { previous : Array a , current : a , next : Array a } http://shuheikagawa.com/pixelm 28
29. 29.

    Changing Selection http://shuheikagawa.com/pixelm 29

30. 30.

    5. Animation - JavaScript Interop http://shuheikagawa.com/pixelm 30

31. 31.

    Exporting Images port download : DownloadData -> Cmd msg --

    Skinney/elm-array-exploration/Array.Hamt needs to be converted type alias DownloadData = { grids : List (List (List RGBA)) , format : String } -- elm-lang/core/Color needs to be converted type alias RGBA = { red : Int, green : Int, blue: Int, alpha: Int } http://shuheikagawa.com/pixelm 31
32. 32.

    Exporting Images with JavaScript • SVG: String concatenation • GIF:

    Canvas + blueimp-canvas-to-blob (a polyfill for Canvas.toBlob) • Animated GIF: Canvas + gif.js • File download: FileSaver.js http://shuheikagawa.com/pixelm 32
33. 33.

    http://shuheikagawa.com/pixelm 33

34. 34.

    6. Animation - Event Handling http://shuheikagawa.com/pixelm 34

35. 35.

    Drag & Drop for Swapping Frames • ! Easy with

    HTML5 Drag & Drop API • On mobile devices: ios-html5-drag-drop-shim (also works for Android...) • For passing data, used Model instead of event.dataTransfer http://shuheikagawa.com/pixelm 35
36. 36.

    Drag & Drop with Elm preventDefault : String -> msg

    -> Html.Attribute msg preventDefault eventName msg = Html.Events.onWithOptions eventName { preventDefault = True, stopPropagation = False } (Json.succeed msg) viewFrame : Frame -> Html Msg viewFrame frame = Html.div [ Html.Attributes.draggable "true" , Html.Events.on "dragstart" <| Json.succeed (SelectFrame frame) , preventDefault "ondragenter" NoOp , preventDefault "ondragover" NoOp , preventDefault "ontouchmove" NoOp , preventDefault "drop" <| DropOnFrame frame ] [ viewGrid frame ] http://shuheikagawa.com/pixelm 36
37. 37.

    Double Click Double click/tap shows a modal to: • duplicate

    a frame • delete a frame Easy with dblclick event. But it's not supported on iOS Safari ! http://shuheikagawa.com/pixelm 37
38. 38.

    Can we do this in Elm? element.addEventListener('click', function (event) {

    var el = event.currentTarget; if (el.dataset.clicked === 'true') { // double click!! } else { // single click! } if (el.dataset.timer) { clearTimeout(parseInt(el.dataset.timer, 10)); } el.dataset.timer = setTimeout(function () { delete el.dataset.clicked; }, 500); el.dataset.clicked = 'true'; }); http://shuheikagawa.com/pixelm 38
39. 39.

    http://shuheikagawa.com/pixelm 39

40. 40.

    Let's do it in Elm! supportDoubleClick : Html.Attribute msg supportDoubleClick

    = Html.Attributes.attribute "onclick" """ var el = event.currentTarget; setTimeout(function () { if (el.dataset.timer) { clearTimeout(parseInt(el.dataset.timer, 10)); } el.dataset.timer = setTimeout(function () { delete el.dataset.clicked; }, 500); el.dataset.clicked = 'true'; }); """ <div onclick="var el = event.currentTarget; ...">...</div> http://shuheikagawa.com/pixelm 40
41. 41.

    onSingleOrDoubleClick : msg -> msg -> Html.Attribute msg onSingleOrDoubleClick singleMessage

    doubleMessage = let chooseMessage isDoubleClick = if isDoubleClick then doubleMessage else singleMessage decodeData = Json.at [ "currentTarget", "dataset", "clicked" ] Json.string |> Json.map ((==) "true") decodeClicked = Json.oneOf [ decodeData, Json.succeed False ] in HE.onWithOptions "click" { preventDefault = True, stopPropagation = False } (Json.map chooseMessage decodeClicked) http://shuheikagawa.com/pixelm 41
42. 42.

    button : Html Msg button = Html.button [ supportDoubleClick ,

    onSingleOrDoubleClick OnSingleClick OnDoubleClick ] [ Html.text "Double click me!" ] http://shuheikagawa.com/pixelm 42
43. 43.

    http://shuheikagawa.com/pixelm 43

44. 44.

    A Bug in elm-lang/core Changes on Json.Decode.oneOf are not reflected

    to DOM event handlers. There was a bug on quality check of Json.Decode.oneOf and oneOf decoder was not updated. Probably not many people are not abusing JSON decoders... Html.button [ HE.on "click" <| -- OK Json.succeed (Foo model.something) , HE.on "click" <| -- Not updated when something changes Json.oneOf [ Json.succeed (Foo model.something) ] ] [ Html.text "click me" ] http://shuheikagawa.com/pixelm 44
45. 45.

    Thoughts • It's been super easy to add features with

    Elm • Implementing interaction can be a bit tedious, but totally doable with Elm • With JSON decoders! • Now I can start drawing... http://shuheikagawa.com/pixelm 45
46. 46.

    Thanks! http://shuheikagawa.com/pixelm 46