Fractals zelf doen:
Alternerende boom van Pythagoras met kleuren

In zijn boek "Fractals. Meetkundige figuren in eindeloze herhaling" beschrijft Prof. Hans Lauwerier (1923 - 1997) een aantal fractals. Hierbij zijn programmaatjes beschikbaar die zijn geschreven in een variant van BASIC, die vandaag de dag niet meer wordt gebruikt. Omdat de code te leuk is om te worden vergeten heb ik die omgezet in JavaScript.

Op deze pagina wordt programma PYTHB3 (pag. 150 van het boek) gebruikt. Dit programma tekent een variant op de "scheve" boom van Pythagoras (pag. 61). Klik HIER voor een preview.

Onderstaande uitleg bevat wat jargon. Dat komt aan de orde op mijn site over fractals.
Net als bij het programma PYTHB2 maakt PYTHB3 gebruik van backtracking. Dat betekent dat de rekentijd lang kan worden bij hogere orde van de figuur.
Belangrijke parameters van het programma zijn: svgW en svgH (afmetingen van de figuur, in het voorbeeld 760 × 570 beeldpunten) en EPS (Drempelwaarde, = 0.04). Deze parameters kun je wijzigen om de invloed op de uitkomst te onderzoeken. Maar probeer ook eens om op andere plaatsen in de code te wijzigen …! Doe bijvoorbeeld eens iets met P.
De "scheefheid" van de boom is hard geprogrammeerd als π / 6 radialen. De richting van de groei is afwisselend linksom en rechtsom.

Het oorspronkelijke BASIC-programma gebruikt 'default-initialisatie' van variabelen. Als er geen waarde is toegekend wordt er een nul in gezet. De kracht van BASIC is onder meer dat je je bijna volledig kunt concentreren op het probleem. Dat geeft korte programma's.
De JavaScript-versie vraagt meer inspanning, onder andere doordat JavaScript standaard geen voorzieningen heeft om te plotten. Zaken als het initialiseren van variabelen, het passend maken van de figuur in de viewport en het daadwerkelijk zichtbaar maken van de figuur moet je zelf regelen, waar BASIC dat doet met een enkele opdracht.

Het JavaScript-programma is als volgt opgebouwd:

• De function SVGleader() zet de (openings-)<svg>-tag in elkaar. De variabelen svgW en svgH bepalen de grootte van de plot.
• Vervolgens gaat het programma rekenen. Dat doet de function Pythb3(), die de resultaten (hoekpunten van de vierkanten) aflevert in de arrays X[ ] en Y[ ].
• De variabeleDIFF is bepaald door de afstand tussen twee opeenvolgende hoekpunten en wordt vergeleken met de drempelwaarde EPS, en is daarmee bepalend voor de orde van de boom.
• DIFF. Als die kleiner is dan 0.1 is de kleur groen (bladeren), anders bruin (stam en takken). Dit wordt bijgehouden in de array cols[ ].
• De lengte van de arrays X[ ], Y[ ] en cols[ ] hangt af van de drempelwaarde EPS, en is altijd een zesvoud + 4. Het is dynamisch geïmplementeerd, zodat de beschikbare geheugenruimte in principe bepalend is voor de minimale waarde van EPS.
  De praktijk is echter iets weerbarstiger.
• Om de rekentijd niet te lang te maken, moet je niet lager gaan dan EPS = 0.02. Bij lagere waarden van EPS gaat de resolutie van het scherm ook een rol spelen, dan worden de vierkantjes zo klein dat het stippen worden op het scherm. Een en ander is getest op mijn Windows-PC (64-bits, 8 GB geheugen, beeldscherm 1920 × 1080) en op mijn tablet (Android, 32-bits, 3 GB geheugen, beeldscherm 1280 × 800). Bij lagere waarden van EPS loopt de plot dicht.
• Zodra de berekeningen klaar zijn, start SVGlijnen(). Deze function schaalt de hoekpunten van de vierkanten (lees: de hele plot) op naar de 95% van de afmetingen van de SVG-viewport. Daarbij wordt de plot gespiegeld in de X-as. Tevens wordt, om wat extra ruimte te maken rond de plot, de schaalfactor gedeeld door 1.1. Tenslotte wordt de oorsprong van de plot verplaatst van de oorsprong van de viewport (daar rekent BASIC mee) naar de linker bovenhoek (daar rekent SVG mee).
• De function SVGtrailer() zet als laatste een melding boven de plot met daarin de parameter EPS.
• Bovengenoemde JavaScript-functions worden achter elkaar uitgevoerd door de function toonFiguur(), die automatisch wordt gestart bij het laden van de pagina, via window.onload.
• Merk op dat het programma geen enkele voorziening heeft om fouten op te vangen.

Gebruiken:

Om met de code te spelen moet je deze downloaden naar je eigen computer en uitpakken. Start pythb3.htm door er op te klikken, gebruik zo nodig een lokale webserver. Je hebt meteen een werkend programma.
Raadpleeg het item Een workflow voor het ontwikkelen van JavaScript, in het bijzonder de opmerkingen over hoe je lokaal kunt werken (dus zonder steeds te hoeven uploaden naar de servers van je webhost).
Vereiste schermgrootte is 800 × 710 pixels. De toepassing op deze site maakt SVG-code aan, die wordt getoond door de inhoud van een <svg>-tag aan te passen.

Downloaden:
 
Druk op de knop:  File: voorb704.zip, 2773 bytes.