Skip to content

Commit

Permalink
make 2d images (can abstract later)
Browse files Browse the repository at this point in the history
  • Loading branch information
@BrianHicks
BrianHicks committed Jan 6, 2020
1 parent 663f8e4 commit 2d3dda7
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 39 deletions.
3 changes: 2 additions & 1 deletion elm.json
View file
Expand Up @@ -13,7 +13,8 @@
"elm/html": "1.0.0",
"elm/svg": "1.0.1",
"elm-community/list-extra": "8.2.2",
"rtfeldman/elm-css": "16.0.1"
"rtfeldman/elm-css": "16.0.1",
"tesk9/palette": "2.0.0"
},
"indirect": {
"Skinney/murmur3": "2.0.8",
Expand Down
33 changes: 21 additions & 12 deletions src/Image.elm
View file
@@ -1,16 +1,17 @@
module Image exposing (Image, crop, fromRowsAndColumns, rotate, view, windows)

import Array exposing (Array)
import Css exposing (Color)
import Color.Transparent as Color exposing (Color)
import Css
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes exposing (css)
import Html.Styled.Attributes as Attrs exposing (css, style)
import Set


type Image a
type Image
= Image
{ -- rows x columns
items : Array (Array a)
items : Array (Array Color)
, width : Int
, height : Int
}
Expand All @@ -27,7 +28,7 @@ If the sizes of the column arrays (the inner ones) don't match up, you'll get a
`MoreThanOneWidth` error back from this function.
-}
fromRowsAndColumns : List (List a) -> Result FromRowsAndColumnsProblem (Image a)
fromRowsAndColumns : List (List Color) -> Result FromRowsAndColumnsProblem Image
fromRowsAndColumns rowsAndColumns =
let
arrayified =
Expand Down Expand Up @@ -60,7 +61,7 @@ fromRowsAndColumns rowsAndColumns =
{-| Zoom in on a portion of a grid. If the row and column constraints are out
of bounds, this function returns `Nothing`.
-}
crop : { row : Int, column : Int, width : Int, height : Int } -> Image a -> Maybe (Image a)
crop : { row : Int, column : Int, width : Int, height : Int } -> Image -> Maybe Image
crop rect (Image grid) =
if rect.row > grid.height || rect.column > grid.width then
Nothing
Expand All @@ -78,7 +79,7 @@ crop rect (Image grid) =

{-| Rotate a grid 90° clockwise.
-}
rotate : Image a -> Image a
rotate : Image -> Image
rotate ((Image { width, height }) as grid) =
let
newItems =
Expand All @@ -98,7 +99,7 @@ rotate ((Image { width, height }) as grid) =
}


column : Int -> Image a -> Maybe (Array a)
column : Int -> Image -> Maybe (Array Color)
column colNum (Image { items, height }) =
List.range 0 (height - 1)
|> List.foldl
Expand All @@ -117,7 +118,7 @@ column colNum (Image { items, height }) =

{-| Get a number of windows over the given grid data. This is for WCF.
-}
windows : { width : Int, height : Int } -> Image a -> List (Image a)
windows : { width : Int, height : Int } -> Image -> List Image
windows sizes ((Image { width, height }) as grid) =
let
columns =
Expand Down Expand Up @@ -145,11 +146,19 @@ windows sizes ((Image { width, height }) as grid) =

{-| TODO: could probably do this with CSS grids but I'm not sure how.
-}
view : (a -> Html msg) -> Image a -> Html msg
view viewItem (Image { items }) =
view : Image -> Html msg
view (Image { items }) =
items
|> Array.map
(Array.map (\item -> Html.td [] [ viewItem item ])
(Array.map
(\color ->
Html.td
[ style "background-color" (Color.toRGBAString color)
, Attrs.width 5
, Attrs.height 5
]
[]
)
>> Array.toList
>> Html.tr []
)
Expand Down
67 changes: 41 additions & 26 deletions src/Main.elm
View file
@@ -1,38 +1,53 @@
module Main exposing (..)

import Browser
import Color.Transparent as Color
import Css
import Html as RootHtml
import Html.Styled as Html
import Html.Styled.Attributes exposing (css)
import Image exposing (Image)


boxes : Image String
boxes =
case
Image.fromRowsAndColumns
[ [ "┌", "─", "─", "┐" ]
, [ "│", "┌", "┐", "│" ]
, [ "│", "└", "┘", "│" ]
, [ "└", "─", "─", "┘" ]
]
of
Ok grid ->
grid
recurse : Image
recurse =
let
-- Transparent
t =
Color.fromRGBA { red = 0, green = 0, blue = 0, alpha = Color.transparent }

Err problem ->
Debug.todo (Debug.toString problem)
-- White
w =
Color.fromRGBA { red = 255, green = 255, blue = 255, alpha = Color.opaque }

-- Green
g =
Color.fromRGBA { red = 62, green = 192, blue = 108, alpha = Color.opaque }

letters : Image String
letters =
-- Key (black)
k =
Color.fromRGBA { red = 43, green = 45, blue = 45, alpha = Color.opaque }
in
case
Image.fromRowsAndColumns
[ [ "a", "b", "c", "d" ]
, [ "e", "f", "g", "h" ]
, [ "i", "j", "k", "l" ]
, [ "m", "n", "o", "p" ]
[ List.repeat 14 t
, [ t, k, k, k, k, k, k, k, k, k, k, k, k, t ]
, [ t, k, t, t, t, t, t, t, t, t, t, t, k, t ]
, [ t, k, t, k, k, k, k, k, k, k, k, t, k, t ]
, [ t, k, t, k, k, k, k, k, k, k, k, t, k, t ]
, [ t, k, t, g, k, g, k, g, k, k, k, t, k, t ]
, [ t, k, t, k, k, k, k, k, k, k, k, t, k, t ]
, [ t, k, t, k, g, g, k, g, g, k, k, t, k, t ]
, [ t, k, t, k, k, k, k, k, k, k, k, t, k, t ]
, [ t, k, t, k, k, k, k, k, k, k, k, t, k, t ]
, [ t, k, t, t, t, t, t, t, t, t, t, t, k, t ]
, [ t, k, k, k, k, k, k, k, k, k, k, k, k, t ]
, [ t, t, t, t, t, k, k, k, k, t, t, t, t, t ]
, [ t, t, k, k, k, k, k, k, k, k, k, k, t, t ]
, [ t, k, k, k, w, k, w, k, w, k, w, k, k, t ]
, [ t, k, k, w, k, w, k, w, k, w, k, k, k, t ]
, [ t, k, k, k, k, k, k, k, k, k, k, k, k, t ]
, List.repeat 14 t
]
of
Ok grid ->
Expand All @@ -48,11 +63,11 @@ main =
Html.div []
[ Html.h1 [] [ Html.text "Wave Function Collapse" ]
, Html.h2 [] [ Html.text "Source Image" ]
, Image.view Html.text letters
, Image.view recurse
, Html.h2 [] [ Html.text "Windows" ]
, letters
|> Image.windows { width = 2, height = 2 }
|> List.map (Image.view Html.text)
|> List.map (List.singleton >> Html.div [ css [ Css.border3 (Css.px 1) Css.solid (Css.hex "000") ] ])
|> Html.section [ css [ Css.displayFlex ] ]
, recurse
|> Image.windows { width = 3, height = 3 }
|> List.map Image.view
|> List.map (List.singleton >> Html.div [ css [ Css.border3 (Css.px 1) Css.solid (Css.hex "000"), Css.display Css.inlineBlock ] ])
|> Html.section []
]

0 comments on commit 2d3dda7

Please sign in to comment.