Introductie Programmeerparadigma's
Eindopdrachten Elm
De bedoeling is dat zowel docenten als leerlingen voor deze eindopdrachten gaan werken in een on-line ontwikkelomgeving.
Als voorbeeld is hiervoor goloca.org/elmit opgezet. Je kunt in deze omgeving als docent inloggen met als docent1 en als leerling van docent1 als:
- elm0000001
- elm0000002
- elm0000003
- elm0000004
Voor allen geldt als wachtwoord: welkom12.
Je kunt de omgeving bekijken maar geen veranderingen aanbrengen. Je kunt de elm programma's uitvoeren met Ctrl-S.
Algemeen
Je kunt alle voorbeelden bekijken op:
goloca.org:443/examples
Je kunt je code maken door in te loggen op:
goloca.org/elmit
Vraag je docent hoe je inlogt in ICEcoder en hoe je daarin elm code kunt maken.
Je ziet alle bestanden die in het vervolg genoemd worden en met my beginnen als je in ICEcoder ingelogd bent in het mapje met je id staan. Als je een elm bestand geopend hebt, kun je dit in elm uitvoeren met Ctrl-S.
Boxplot
Wat gaan we maken?
We gaan een boxplot maken. Als je niet weet wat een boxplot is lees dan de uitleg op:
http://www.dr-aart.nl/Statistiek-boxplot.html
Start het elm programma boxplotdatadraw.elm. Je ziet het volgende
In het vakje links boven kun je de waardes voor een boxplot invullen. Vul daar de volgende waardes in uit het voorbeeld van Dr. Aart:
7,3,8,6,8,5,4,5,3,6,2,6,9,1,2,7,5,8,7,6 (Let op zet geen spaties na de komma’s).
Druk op Enter en je ziet deze boxplot:
Hoe pakken we het aan?
We gaan het vorige programma in Elm programmeren. Dit doen we met de volgende stappen.
- Maak een recursieve functie mergesort om de lijst te sorteren.
- Maak functie boxplotdata om de gegevens voor een boxplot te bepalen
- Maak functie boxplotdatadraw om op basis van de gegevens van een boxplot een boxplot te tekenen
Maak mergesort functie
Je gaat een recursie functie mergesort maken. Deze functie mergesort heeft als invoer een lijst en als uitvoer een gesorteerde lijst. Je gebruikt de functie mergesort later om de gegevens voor een boxplot te bepalen. Start het elm programma mergesort.elm. Vul in het vakje links boven het volgende in:
7,3,8,6,8,5,4,5,3,6,2,6,9,1,2,7,5,8,7,6
Als uitkomst zie je nu een gesorteerde lijst.
Start het elm programma mymergesort.elm dat je gekregen hebt. Elm geeft als foutmelding dat de functie mergesort ontbreekt. Dat klopt want dat is nu juist de functie die je zelf moet schrijven.
Voeg de functie mergesort toe aan mymergesort.elm. Op de site elm-lang.org vind je bij Examples een voorbeeld van een mergesort functie.
Je moet deze als volgt aanpassen:
- Verander de naam van de functie split in divide
Bekijk ook de functies checkedStringToFloat en listStringToListFloat.
De functie checkedStringToFloat heeft als input een String en geeft als output een Float terug. Als de String niet omgezet kan worden geeft de functie 0 terug.
De functie listStringToListFloat heeft als input een List van Strings en geeft als output een List van Floats terug. Daarbij maakt de functie gebruik van de standaard elm functie map. Deze functie past een functie die als parameter meegegeven wordt toe op alle elementen in een als parameter meegegeven List. In dit geval is dit de functie checkedStringToFloat.
Maak boxplotdata
Je gaat een functie boxplotdata maken. Deze functie boxplotdata heeft als invoer een String met getallen gescheiden door komma’s en als uitvoer een List van Floats met getallen gescheiden door komma’s op basis waarvan je een boxplot kunt tekenen. Je gebruikt de functie boxplotdata later om een boxplot te tekenen.
Start het elm programma boxplotdata.elm. Vul in het vakje links boven het volgende in:
7,3,8,6,8,5,4,5,3,6,2,6,9,1,2,7,5,8,7,6
Als uitkomst zie je nu een lijst met de gegevens voor de boxplot. Hierin staan achtereenvolgens:
- kleinste getal
- eerste quartiel
- tweede quartiel (mediaan)
- derde quartiel
- grootste getal
Start het elm programma myboxplotdata.elm dat je gekregen hebt. Elm geeft als foutmelding dat de functie boxplotdata ontbreekt. Dat klopt want dat is nu juist de functie die je zelf moet schrijven.
Voeg de functie boxplotdata toe aan myboxplotdata.elm. Deze functie boxplotdata heeft als invoer een String en als uitvoer een lijst van Floats op basis waarvan je een boxplot kunt tekenen. In deze lijst staan achtereenvolgens het kleinste getal, het eerste kwartiel, het tweede kwartiel(mediaan), het derde kwartiel en het grootste getal.
Je kunt dit als volgt aanpakken. Maak met split een lijst van de String die je als invoer krijgt. Zet deze lijst van Strings om naar een lijst van Floats en sorteer deze lijst. Maak van deze lijst een Array. Je kunt nu op basis van dit Array de kleinste een de grootste bepalen. Schrijf aparte functies om op basis van het Array het eerste, tweede en derde kwartiel te bepalen. Zet de resultaten in een lijst van Floats en geef deze terug.
Maak boxplotdatadraw
Kopieer je bestand myboxplotdata.elm naar myboxplotdatadraw.elm.
Voeg bovenaan in myboxplotdatadraw.elm het volgende toe:
import Svg exposing (..)
import Svg.Attributes exposing (..)
Vervang in boxplotdatadraw.elm:
view model =
div []
[ input [onKeyDown KeyDown, onInput Input] []
, div [] [ text (toString model.outputData) ]
]
door:
view model =
let
a = Array.fromList model.outputData
kl = withDefault 0 (Array.get 0 a)
k1 = withDefault 0 (Array.get 1 a)
k2 = withDefault 0 (Array.get 2 a)
k3 = withDefault 0 (Array.get 3 a)
gr = withDefault 0 (Array.get 4 a)
s = 200/(gr-kl)
h = 12
line1 = pointsListToString [kl*s, 100, k1*s, 100]
box1 = pointsListToString [k1*s, 100-(s*((gr-kl)/h)), k2*s, 100-(s*((gr-kl)/h)), k2*s, 100+(s*((gr-kl)/h)), k1*s, 100+(s*((gr-kl)/h)), k1*s, 100-(s*((gr-kl)/h))]
box2 = pointsListToString [k2*s, 100-(s*((gr-kl)/h)), k3*s, 100-(s*((gr-kl)/h)), k3*s, 100+(s*((gr-kl)/h)), k2*s, 100+(s*((gr-kl)/h)), k2*s, 100-(s*((gr-kl)/h))]
line2 = pointsListToString [k3*s, 100, gr*s , 100]
in
div []
[ input [onKeyDown KeyDown, onInput Input] []
, div [] [ Html.text ("kl: " ++ toString kl) ]
, div [] [ Html.text ("q1: " ++ toString k1) ]
, div [] [ Html.text ("q2: " ++ toString k2) ]
, div [] [ Html.text ("q3: " ++ toString k3) ]
, div [] [ Html.text ("gr: " ++ toString gr) ]
, svg [ viewBox "0 0 500 400", width "800px" ]
[
polyline [ fill "none", stroke "black", points line1 ] [],
polyline [ fill "none", stroke "black", points box1 ] [],
polyline [ fill "none", stroke "black", points box2 ] [],
polyline [ fill "none", stroke "black", points line2 ] []
]
]
Uitleg
De gegevens voor de boxplot staan in model. outputData. Deze gegevens worden hier uit gehaald en in de volgende Floats gezet:
- kl, kleinste
- k1, eerste quartiel
- k2, tweede quartiel
- k3, derde quartiel
- gr, grootste
Deze Floats worden gebruikt om binnen een svg tag de volgende polylines aan te maken:
Zie https://www.w3schools.com/graphics/svg_polyline.asp als je meer over svg en polyline wilt weten.
Polynoom
Wat gaan we maken?
Start het elm programma powfuncpointsdraw.elm. Je ziet het volgende:
In het vakje links onder kun je de a, b en c invullen voor functies van de vorm:
y = ax2 + bx + c
Vul in het vakje links onder 5 in en druk op Enter.
Je ziet nu de grafiek voor de functie y=5 voor -100 =< x =< 100.
Vul in het vakje links onder 1,0 in en druk op Enter.
Je zie nu de grafiek voor de functie y=x voor -100 =< x =< 100.
Vul in het vakje links onder 1,2 in en druk op Enter.
Je zie nu de grafiek voor de functie y=x+2 voor -100 =< x =< 100.
Vul in het vakje links onder 1,0,0 in en druk op Enter.
Je zie nu de grafiek voor de functie y=x2 voor -100 =< x =< 100.
Vul in het vakje links onder 1,0,-4 in en druk op Enter.
Je zie nu de grafiek voor de functie y=x2-4 voor -100 =< x =< 100.
Vul in het vakje links onder 1,2,-4 in en druk op Enter.
Je zie nu de grafiek voor de functie y=x2+2x-4 voor -100 =< x =< 100.
Vul nog wat andere waardes in voor a, b en c in en kijk wat er gebeurt. Als je een half wilt invullen moet dat met 0.5 en een tiende met 0.1.
Vul vier getallen in en kijk wat er gebeurt.
Hoe pakken we het aan?
We gaan het vorige programma in Elm programmeren. Dit doen we met de volgende stappen.
- Maak een recursieve functie pow die een macht berekent
- Maak een recursieve functie powfunc die de waarde van y berekent voor de waarde van x.
- Maak een recursieve functie powfuncpoints die de waarden van y berekend met powfunc voor -10 <= x <= 10
- Gebruik het resultaat van powfuncpoints om een grafiek te tekenen voor -100 <= x <= 100
Maak pow
Je gaat een recursie functie pow maken. Deze functie pow heeft als invoer twee getallen g en m en geeft als uitvoer gm. Je gebruikt de functie pow later om functies te bereken van de vorm y = ax2 + bx + c. Daarom is de functie pow goed genoeg als je voor m alleen gehele positieve getallen mag gebruiken. De functie pow heeft als uitkomst een getal dat gm weergeeft.
Start het elm programma pow.elm. Vul in het vakje 2,3 in. Je vraagt nu om 23 te berekenen en het resultaat is 8. Vul nog wat meer waarden voor g en m in en check de uitkomst.
Start het elm programma mypow.elm dat je gekregen hebt. Elm geeft als foutmelding dat de functie pow ontbreekt. Dat klopt want dat is nu juist de functie die jij zelf moet schrijven.
Voeg de functie pow toe aan mypow.elm volgens de volgende omschijving. Pow heeft als invoer twee getallen g en m. Daarvan is g het grondtal en m de macht. Pow geeft als resultaat gm terug.
Gebruik daarbij recursie volgens dit schema:
Maak powfunc
Je gaat een recursieve functie powfunc maken voor functies van de vorm y = ax2 + bx + c. Deze functie powfunc heeft als invoer een waarde voor x en een lijst met de waarden voor a, b en c. In deze lijst zijn a, b en c opgeslagen als Floats. De functie powfunc heeft als uitkomst een getal dat de waarde van y weergeeft.
Start het elm programma powfunc.elm. De test in dit programma werkt met een vaste waarde voor x die 2 is. Vul in het vakje 2,3 in. Dit staat voor y=2x+3. Als x dus 2 is, komt hier 7 uit. Vul nog wat meer waarden voor a,b en c in en check de uitkomst.
Start het elm programma mypowfunc.elm dat je gekregen hebt. Elm geeft als foutmelding dat de functie powfunc ontbreekt. Dat klopt want dat is nu juist de functie die jij zelf moet schrijven.
Voeg de functie powfunc toe aan mypowfunc.elm volgens de volgende omschijving. Powfunc heeft als invoer een getal x en een lijst van Floats l. Daarvan is x de waarde van x en bevat l de waarden van a, b en c voor een functie van de vorm y = ax2 + bx + c. Powfunc geeft als resultaat de uitkomst terug van y voor de functie y = ax2 + bx + c waarbij x, a, b en c zijn ingevuld.
Gebruik daarbij recursie volgens dit schema:
Maak powfuncpoints
Je gaat een recursieve functie powfuncpoints maken om een List van Floats met x en y waarden voor functies van de vorm y = ax2 + bx + c te maken. Deze functie powfuncpoints heeft als invoer drie getallen c, s en e en een lijst met de waarden voor a, b en c. In deze lijst zijn a, b en c opgeslagen als Floats. De getallen c, s en e zijn achtereenvolgens de beginwaarde voor x, de stap waarmee x wordt opgehoogd en de eindwaarde van x. De functie powfuncpoints heeft als uitkomst een List van Floats met x en y waarden voor een bepaalde range van x.
Start het elm programma powfuncpoints.elm. De test in dit programma werkt met vaste waarden voor c, s en e. Deze waarden zijn -10, 1 en 10. Vul in het vakje 2,3 in. Dit staat voor y=2x+3. Je krijgt nu een lijst met waardes voor x en y voor -10 <= x <= 10.. Vul nog wat meer waarden voor a,b en c in en check de uitkomst.
Start het elm programma mypowfuncpoint.elm dat je gekregen hebt. Elm geeft als foutmelding dat de functie powfuncpoints ontbreekt. Dat klopt want dat is nu juist de functie die jij zelf moet schrijven.
Voeg de functie powfuncpoints toe aan mypowfuncpoints.elm volgens de volgende omschijving. Powfuncpoints heeft als invoer drie getallen c, s en e en een lijst met de waarden voor a, b en c. In deze lijst zijn a, b en c opgeslagen als Strings. De getallen c, s en e zijn achtereenvolgens de beginwaarde voor x, de stap waarmee x wordt opgehoogd en de eindwaarde van x. De functie powfuncpoints heeft als uitkomst een String met paren van x en y waarden met de door c, e en s opgegeven range van x.
Gebruik daarbij recursie volgens dit schema:
Maak powfuncpointsdraw
Kopieer je bestand mypowfuncpoints.elm naar mypowfuncpointsdraw.elm.
Voeg bovenaan in mypowfuncpointsdraw.elm het volgende toe:
import Svg exposing (..)
import Svg.Attributes exposing (..)
Vervang in mypowfuncpointsdraw.elm:
view model =
div []
[ input [onKeyDown KeyDown, onInput Input] []
, div [] [ text ("Result: " ++ model.outputData) ]
]
door:
view model =
div []
[ input [onKeyDown KeyDown, onInput Input] []
, svg [ viewBox "0 0 200 200", width "400px" ]
[ g [ transform "translate(100, 100) scale(1,-1)" ]
[ polyline [ fill "none", stroke "black", points model.outputData] []
, polyline [ fill "none", stroke "black", points(pointsListToString (powfuncpoints -100 1 100 [0]))] []
, polyline [ fill "none", stroke "black", points "0,-100 0,100"] []
]
]
]
Pas powfuncpointsTest zo aan dat de test gaat voor -100 <= x <= 100.
Uitleg
In het view model maak je een svg tag. Binnen deze svg tag maak je een polyline aan met als punten de uitkomst van:
model | outputData = powfuncpointsTest model.inputData
De andere twee polylines zijn de x-as en de y-as.
Zie https://www.w3schools.com/graphics/svg_polyline.asp als je meer over svg en polyline wilt weten.
ijskristallen
Wat gaan we maken?
We gaan een eigen ijskristal maken:
Zoek op het internet plaatjes van ijskristallen zodat je weet hoe deze er uit zien.
Start het elm programma ijskristal.elm. Je ziet het volgende:
Links boven kun je selecteren hoeveel maal het ijskristal verdeeld moet worden. Selecteer daar 4. Je ziet het volgende:
Hoe pakken we het aan?
Open het elm bestand myijskristal.elm. Deze code staat in het view model daarvan.
path =
[ koch startP1 startP2 model.passes []
, koch startP2 startP3 model.passes []
, koch startP3 startP1 model.passes []
]
In deze regel worden de punten voor de tekening in een lijst gezet. Dit gebeurt door 3 lijnen te bepalen en deze verder te bewerken zoals je hier ziet:
Daarvoor wordt de functie koch aangeroepen met als parameters:
- Het startpunt van de lijn
- Het eindpunt van de lijn
- Het aantal stappen waarin de lijn bewerkt wordt
- De lijst van punten die tot en met deze stap bepaald zijn
In kock worden de drie nieuwe punten p1, p2 en p3 berekend om de lijn kunnen te tekenen.
Het begin en het eind punt heten binnen koch a en b. Het begin en eindpunt worden als parameters meegegeven.
Als het aantal stappen niet meer dan 1 is geeft de functie koch het volgende terug:
a :: p1 :: p2 :: p3 :: b :: points
Als het aantal stappen meer dan 1 is roept roep de functie koch zichzelf 4 keer aan met als te bewerken lijnen:
- De lijn tussen de punten a en p1
- De lijn tussen de puntern p1 en p2
- De lijn tussen de punten p2 en p3
- De lijn tussen de punten p3 en b
Bij deze aanroepen verlaagt koch het aantal stappen met 1. Alle resulterende lijsten van deze 4 aanroepen zet koch in een gezamenlijke lijst en geeft deze terug.
Opdracht
Maak je eigen ijskristal door de code van myijskristal.elm aan te passen.
