evancz / elm-graphics Goto Github PK

View Code? Open in Web Editor NEW

55.0 55.0 8.0 36 KB

The graphical building blocks that inspired Elm in the first place

Home Page: http://package.elm-lang.org/packages/evancz/elm-graphics/latest

License: BSD 3-Clause "New" or "Revised" License

Elm 56.86% JavaScript 43.14%

elm-graphics's People

Contributors

Stargazers

Watchers

Forkers

jvoigtlaender mango314 ahinchman1 jeiea kitofr heimdell simonwoolf jmars

elm-graphics's Issues

Allow user to control setting of background on each frame

I notice that unlike most creative coding libs this one always resets the background to white on each frame.

There are some interesting effects to be had from writing frames onto the previous one rather than redrawing. It's less pure, but given it's outside of Elm could we have the ability to do this?

It may also be nice to allow the user to pick the colour used for the background reset.

Text rendering error in combination with `width`

The following program:

import Element exposing (..)
import Text exposing (fromString)

main = 
  fromString "hello" |> centered 
  |> width 200
  |> toHtml

Gives the following error
Uncaught TypeError: Cannot read property 'arity' of undefined

Commenting the width line gets rid of the error.

This error is present for Text Elements. If the Text Element is replaced by a collage, the presence of width does not produce the error anymore.

For example, this works:

import Element exposing (..)
import Collage exposing (..)
import Color exposing (..)

main = 
  collage 20 20 [rect 10 10 |> filled red]
  |> width 200
  |> toHtml

Element.show breaks program when run at initialization time in compiled html

Compiling this program:

import Html exposing (div)
import Html.App exposing (beginnerProgram)
import Element exposing (show, toHtml)

main =
    beginnerProgram
        { model = show "Test"
        , view = \model -> div [] [ toHtml model ]
        , update = \_ model -> model
        }

with Elm 0.17's elm-make and then opening the produced index.html leads to a blank screen instead of displaying the "Test" string.

If one instead moves the show call to inside the view function:

        { model = "Test"
        , view = \model -> div [] [ toHtml (show model) ]

then the program functions correctly.

And even the original program (which fails when compiled to .html) works correctly in elm-reactor, as well as when compiled to .js and called from some separate .html file, as well as if one manually takes the original compiled .html file and moves the <script>...</script> element with the compiled source from inside <head>...</head> to inside <body>...</body>.

writing images from outside to canvas... ctx.drawImage( )

Here is an example I would like to work in Elm

    var width  = 960;
    var height = 500;

    var canvas = document.getElementById('vincent');
    var ctx = canvas.getContext("2d");
    canvas.width  = width;
    canvas.height = height;

    var image = new Image();
    image.src= "starry-night.jpg";
    image.onload = function () { ctx.drawImage(image, 0, 0); }

unfortunately I can't find anything in the Graphics library.

Possibly since "starry-night.jpg" is an image from the outside world... such a function could have type Form -> Maybe Form

I wrote a subscription if you want to see it... I might try writing a NativeJS library for that one thing...

Textured shape infinite loop

Hello,

What happened with this bug?, I am looking the pull request at https://github.com/elm-lang/core/pull/202 but it was not accepted. The proposed solution is nice, except that it uses global caches.
Nowadays I am working in a project that uses Collage intensively, so this bug is critical for me.
I have it fixed for my case but I wonder when this bug is fixed?

Thanks.

getting image data from graphics context

Here is an example I would like to work in Elm

    var width  = 960;
    var height = 500;

    var canvas = document.getElementById('vincent');
    var ctx = canvas.getContext("2d");
    canvas.width  = width;
    canvas.height = height;

    var image = new Image();
    image.src= "starry-night.jpg";
    image.onload = function () { 
        ctx.drawImage(image, 0, 0);
        image = ctx.getImageData(0, 0, width, height);
    }

Graphics has a analogue of ctx.drawImage(...) now I am asking about getting the image data back out.

This is related to #9

Can we call ctx.getImageData(...) from Elm and get back a List Int as the image data returns?

Since I have experimented, I noticed it should be List Color or List List Color (a 2D array). 2D data might be stored as an underlying quadtree. I don't know.

Animated gifs are not animated when subscribing to `AnimationFrame.diffs` on Safari

I have written a small game using elm-graphics and animated gifs for sprites, it works great on Chrome; however on Safari the animated gifs only show the first frame if AnimationFrame.diffs is subscribed to. Note that animated gifs work fine AnimationFrame.diffs is not subscribed to.

To reproduce, you can view https://avh4.github.io/elm-mario/ (a port of the original Elm Mario demo to 0.18) on Chrome and Safari on Mac. On Chrome the Mario sprite is animated when walking left or right; on Safari it is not. I can reproduce this problem on Safari 11 on High Sierra and on iOS, using Elm 0.18 and elm-graphics 1.0.1.

I suspect for some reason the vdom is recreating the images every frame so the animated gifs are getting redrawn.

Cropped image takes place of image if cropped image is first

If you have a cropped image sitting in front of at image in an array that will be passed to collage, the image sitting after the un-cropped image will become the cropped image after a second (which happens to be the time period in which the cropped image is alternating.) The cropped images animation will also be inverted from the cropped image. Perhaps this is because the cropped image is alternating vertically?

view : Model -> Html Msg
view model =
       let
           {state, player, enemies} = model
           {width, height} = model.size
           backgroundCollage = [background]
           enemyCollage = formEnemies enemies
           playerCollage = [make player]
           collageData = backgroundCollage ++ playerCollage ++ enemyCollage -- Enemy image will appear for a second and then it becomes the player image. If you swap player and enemy the bug goes away
       in
           toHtml <|
               container width height middle <|
                   collage gameWidth gameHeight collageData

background =
    toForm <| image gameWidth gameHeight "/assets/background.jpg"

formEnemies enemies =
    map enemyToForm enemies

enemyToForm enemy =
    toForm (image 100 100 "/assets/enemy-sprite.png")
        |> move (enemy.x, enemy.y)

make : Player -> Form
make obj =
    let
        size = 100
        sprite = size * obj.spriteNum
    in
      toForm (croppedImage (0,sprite) size size "/assets/player-sprite.png")
        |> move (obj.x, obj.y)

Provide a measureText for Text.Text

Currently, there is no API to access the width of a Text

It can be bypassed with a Native module:

        { measureText: F2(function(style, text) {
            var context = document.createElement("canvas").getContext("2d");
            context.font = style;
            return context.measureText(text).width;
        })};

But my guess is that it's probably possible to use an existing canvas to measure it, making it more efficient

Thanks for your great work

Runtime error from `Collage.gradient` given "illegal" `Color.linear` gradient

With "elm-lang/core": "4.0.5" and "evancz/elm-graphics": "1.0.0", the following program results in a runtime error:

import Color
import Collage
import Element

grad =
    Color.linear
        ( 0, 60 )
        ( 0, -60 )
        [ ( 0, Color.white )
        , ( 2, Color.black )
        ]

main =
    Element.toHtml <|
        Collage.collage
            120
            120
            [ Collage.gradient grad (Collage.rect 120 120)
            ]

If one replaces the 2 in grad by something between 0 and 1, the program functions correctly.

It's not unlikely that something similar would happen with Color.radial gradients.

Possibility of Element.fromHtml : Int -> Int -> Html Never -> Element

It is clear that the former Html.toElement : Int -> Int -> Html -> Element cannot exist anymore, since the Html type comes with the possibility of attached event handlers that the Element implementation is not anymore prepared to deal with. But since on the other hand it is now possible to express in the form of Html types that definitely no event handlers are attached at all, I want to at least raise here the possibility of having

Html.toElement : Int -> Int -> Html Never -> Element

Element.fromHtml : Int -> Int -> Html Never -> Element

That could alleviate some pains people have from the elm-graphics changes, since at least static html would be embeddable in Elements and Forms for free-form positioning etc.

Aggregating old issues

From https://github.com/elm-lang/core/issues/332

Do not add issues or ideas as comments here. Open a separate issue for that.

A bunch of issues and ideas have come in about Graphics.* over time and I'm trying to aggregate them all in one place.

Issues:

elm/compiler#773 - pixel mismatch

API Ideas:

elm/compiler#683 - quadratic curves in collage
elm/compiler#680 - rounded corners somehow
https://github.com/elm-lang/core/issues/419 - add sprite back

Collage.text does not seem to work

The following code does not output the text as desired:

import Collage exposing (..)
import Element exposing (..)
import Text

main = toHtml (collage 100 100 [ text (Text.fromString "abcde") ])