SVG 06¶

Reeksen maken met range met stapgrootte¶

We zagen reeds dat we met range reeksen konden maken. De eerste parameter van de functie range() gaf de startwaarde aan, de tweede parameter van de functie range() gaf de stop-waarde aan. Er is echter ook een derde parameter die de stapgrootte aangeeft. Een voorbeeld:

for x in range(0,100, 10):
    for y in range(0, 100, 10):
        print(x, y)

Voer dit programma uit, en bekijk de uitvoer.

Opgave 26¶

Pas je programma uit opgave 25 aan, zodanig dat cirkels getekend worden op een regelmatige afstand van elkaar met behulp van de range functie met 3 parameters: range(0, 300, 30) voor cx, range(0, 200, 20) voor cy.

Lijsten in lijsten¶

Lijsten in Python kunnen ook weer andere lijsten bevatten:

landen = [["België", 165880, 11.5], "Nederland", 188876, 17.4]

Bovenstaande lijst bevat twee lijsten, en deze lijsten bevatten telkens drie elementen: een string, een integer en een float.

Je mag lijsten ook over meerdere regels splitsen, zoals in dit voorbeeld:

landen = [
    ["België", 165880, 11.5],
    ["Nederland", 188876, 17.4],
]

Bij gebruik van een “for-loop” kan je de elementen uit je sublijst rechtstreeks toekennen aan variabelen in de loop-constructie zelf:

for naam, besmettingen, inwoners in landen:
    print(naam, besmettingen, inwoners)

Opgave 27¶

Pas je programma uit opgave 26 aan, zodanig dat cirkels voor ieder land getekend worden, waarbij de straal van de cirkel het aantal inwoners van het land representeert. Gebruik de voorlaatste en laatste elementen uit de lijst als x- en y-coördinaten van je cirkels:

landen = [
    ["België", 165880, 11.5, 100, 125],
    ["Nederland", 188876, 17.4, 200, 125],
    ["Duitsland", 335679, 83.2, 300, 125],
]

Kleuren in SVG¶

Tot nu toe gebruikte we de namen van kleuren om de SVG-elementen in te kleuren:

<circle cx="300" cy="125" r="83.2" fill="red"/>

Aangezien het aantal namen voor kleuren beperkt is, kan je ook op een andere manier kleuren uitdrukken. In SVG kan je de functie rgb() gebruiken, die je als parameters kleurwaarden voor rood, groen en blauw dient door te geven. Onderstaand voorbeeld toont achtereenvolgens een rode, groene, blauwe en gele cirkel (combinatie van rood en groen):

<circle​ cx​="0" cy​="125" r="50" fill="rgb(255,0,0)"​/>
<circle​ cx​= ​ "100"​ ​ cy​ = ​ "125"​ ​ r ​ = ​ "50"​ ​ fill​ = ​ "rgb(0,255,0)"​ ​ />
<circle​ cx​= ​ "200"​ ​ cy​ = ​ "125"​ ​ r ​ = ​ "50"​ ​ fill​ = ​ "rgb(0,0,255)"​ ​ />
<circle​ cx​= ​ "300"​ ​ cy​ = ​ "125"​ ​ r ​ = ​ "50"​ ​ fill​ = ​ "rgb(255,255,0)"​ ​ />

In het bovenstaande voorbeeld werd telkens de waarde 255 gebruikt: Dit is de maximale kleurintensiteit, met andere woorden de meest heldere versie van de kleur. Lagere waardes geven minder intensiteit. 0 komt overeen met zwart. In onderstaand voorbeeld zien we achtereenvolgens een zeer heldere rode cirkel, een heldere cirkel, een donkerrode cirkel en een zwarte cirkel:

<​ circle​ ​ cx​ = ​ "0"​ ​ cy​ = ​ "125"​ ​ r ​ = ​ "50"​ ​ fill​ = ​ "rgb(255,0,0)"​ ​ />
<​ circle​ ​ cx​ = ​ "100"​ ​ cy​ = ​ "125"​ ​ r ​ = ​ "50"​ ​ fill​ = ​ "rgb(200,0,0)"​ ​ />
<​ circle​ ​ cx​ = ​ "200"​ ​ cy​ = ​ "125"​ ​ r ​ = ​ "50"​ ​ fill​ = ​ "rgb(60,0,0)"​ ​ />
<​ circle​ ​ cx​ = ​ "300"​ ​ cy​ = ​ "125"​ ​ r ​ = ​ "50"​ ​ fill​ = ​ "rgb(0,0,0)"​ ​ />

Opgave 28¶

Pas je programma uit opgave 27 aan, zodanig dat de kleur van de cirkels het aantal besmettingen in het land representeert:

landen = [
    ["België", 165880, 11.5, 100, 125],
    ["Nederland", 188876, 17.4, 200, 125],
    ["Duitsland", 335679, 83.2, 300, 125],
]

Tekst in SVG¶

SVG laat ook toe om tekst te tonen in je tekening. Onderstaande code toont de tekst “COVID-19” op coördinaten (20, 35):

<text x="20" y="35" class="small">COVID-19</text>

Opgave 29¶

Pas je programma uit opgave 28 aan, zodanig dat de namen van de landen bij de cirkels getoond worden.

Transparantie¶

Verder kan je ook transparante figuren gebruiken door de rgba() functie te gebruiken. Hierbij geeft de laatste parameter de transparantie aan. Onderstaand voorbeeld toont een half-transparante cirkel:

<circle cx="0" cy="125" r="50" fill="rgba(255,0,0,0.5)">

Onderstaand voorbeeld toont een bijna volkomen doorzichtige cirkel:

<circle cx="0" cy="125" r="50" fill="rgba(255,0,0,0.1)">

Opgave 30¶

Pas je programma uit opgave 29 aan, zodanig dat de cirkels half-transparant getoond worden. Dit maakt overlappende cirkels makkelijker zichtbaar.

Opgave 31¶

In onderstaande lijst werden de x- en y-coördinaten bijgewerkt. Gebruik deze coördinaten om de positie van de cirkels te bepalen. Voeg Japan en Angola toe aan de lijst en verifieer dat de plot overeenkomt met je verwachtingen:

landen = [
    ["België", 165880, 11.5, 50.51, 4.21],
    ["Nederland", 188876, 17.4, 52.22, 4.53],
    ["Duitsland", 335679, 83.2, 52.31, 13.23],
]