Polynoom-tekenprogramma

Het onderstaande tekenprogramma is opgezet volgens de Elm architectuur (zie: https://guide.elm-lang.org/architecture/). Het “model” bestaat uit de invoerstring met de getallen die door de gebruiker ingevoerd worden. Deze vormen de coëfficienten van de te tekenen polynoom.

In de “view” wordt met behulp van SVG de grafiek van de ingevoerde polynoom getekend. Hiervoor worden SVG-polylines gebruikt: een lijn die gegeven is door een reeks punten. Elk punt is van de vorm "x,y". De punten zijn gescheiden door spaties.

Vraag. Bepaal welke “polyline” de x-as voorstelt, en welke de y-as. Je kunt dit controleren door de kleur van de lijn te veranderen.

Zie https://www.w3schools.com/graphics/svg_polyline.asp als je meer over svg en polyline wilt weten.

Vul in de onderstaande code tussen "-- insert your code here" en "-- compile code" je eigen functie-definities in, voor de functies die je eerder ontwikkeld hebt:

• poly (en eventueel pow)

• funcTuples (en eventueel xList)

• tuplesToPoints

De functie map wordt in meerdere modules gedefinieerd. Je moet daarom in je eigen functies expliciet List.map schrijven.

Vergelijk de resultaten met het eerder gegeven polynoom-tekenprogramma.

import Html exposing (text, div, input, Attribute)
import Browser exposing (sandbox)
import Html.Events exposing (on, keyCode, onInput)
import Html.Attributes exposing(..)
import String exposing(split, fromFloat)
import List exposing (..)
import Maybe
import Svg exposing (..)
import Svg.Attributes exposing (..)

stringsToFloats : List String -> List Float
stringsToFloats ls =
    List.map (\s -> Maybe.withDefault 0 (String.toFloat s)) ls

main = Browser.sandbox { init = init, update = update, view = view }

type alias Model = { content : String }

init : Model
init = { content = "" }

type Msg 
  = Change String

update : Msg -> Model -> Model
update msg model =
  case msg of
    Change newContent ->
        { model | content = newContent }

view model =
  let
    coefs = stringsToFloats (split "," model.content)
    tuples = funcTuples (poly coefs) -100 100 1
    funcPoints = tuplesToPoints tuples
  in 
    div []
     [ input [ placeholder "numbers separated by ,", value model.content, onInput Change ] []
     , svg [ viewBox "0 0 200 200", Svg.Attributes.width "400px" ]
       [ g [ transform "translate(100, 100) scale(1,-1)" ]
           [ polyline [ fill "none", stroke "black", points "0,-100 0,100"] []
           , polyline [ fill "none", stroke "black", points "-100,0 100,0"] [] 
           , polyline [ fill "none", stroke "red", points funcPoints ] []
           ]
       ]
     ]
    
-- insert your code here

poly : List Float -> Float -> Float
poly coefs x = 0

funcTuples : (Float -> Float) -> Float -> Float -> Float -> List (Float, Float)
funcTuples f start stop step = []

tuplesToPoints : List (Float, Float) -> String
tuplesToPoints tuples = ""

-- compile-code