Fractals zelf doen:
H-fractal met backtracking

In het item Fractals zelf doen: H-fractal wordt een programma beschreven dat een H-fractal berekent en op het scherm zet. Dat programma, BoomH1, is snel, maar vraagt veel geheugen. Dat komt doordat de SVG-code in één keer wordt gegenereerd en alle data die daarvoor nodig is in het geheugen aanwezig is.
Op deze plaats wordt een variant voorgesteld die nauwelijks geheugen vraagt, maar wel traag is. De SVG-code wordt na elke berekening bijgewerkt. De benodigde data worden bij elke berekening opgezocht of gegenereerd.

Neem, alvorens verder te lezen, kennis van het item Fractals zelf doen: H-fractal.

Bron:
Hans Lauwerier: Fractals. Meetkundige figuren in eindeloze herhaling.
5e druk 1992, Uitg. Aramith, Bloemendaal,
ISBN: 90-6834-115-4.

Op deze pagina wordt programma BOOMH2 (pag. 146 van het boek) gebruikt. Dit programma tekent de H-fractal (pag. 13), klik HIER voor een preview (Let op: traag!).

De hier gebruikte methode heet Backtracking. Daarbij wordt bij elk punt gekeken of er nog uitbreidingen aan de boomstructuur nodig zijn. Elke wijziging/uitbreiding wordt meteen in de figuur aangebracht.

De verdere uitleg bevat wat jargon. Dat komt aan de orde op mijn site over fractals.
Belangrijke parameters van het programma zijn: svgW en svgH (afmetingen van de figuur, in het voorbeeld 760 × 570 beeldpunten), P (Orde van de fractal, = 5, = aantal herhalingen van het Axioma dat wordt berekend en getekend), A (de verkortingsfactor in elke stap in de berekening, = 0.5). en SFactor ( een schaalfactor, die wordt gebruikt om de figuur netjes in de viewport te krijgen, = 350).
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 …!

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 BoomH2(), daarbij geholpen door twee functions:
  SVGdatashift() en SVGgraphics(). Het getal vier speelt hier een belangrijke rol. Er worden nl. steeds vier hoekpunten berekend. Die worden opgeslagen in de arrays X1[  ], Y1[  ], X2[  ], Y2[  ], X13[  ], Y3[  ], X4[  ] en Y4[  ].
• Bij de berekening van de punten (X1[J],Y1[J]), …, (X4[J],Y4[J]) wordt gebruik gemaakt van de factoren B en C, waarin de orde van de berekeningsstap en de verkortingsfactor worden meegenomen. B = A^J, waarin J de orde is van de onderhanden berekeningsstap. C = A * B * 1.5, De factor 1.5 verdisconteert de hoogte-breedte verhouding van de beeldpunten op het scherm.
• De function SVGdatashift() verschuift de inhoud van X2[J] naar X1[J], Y2[J] naar Y1[J], X3[J] naar X2[J], enzovoort. Dit is de backtracking.
• De function SVGgraphics() berekent de coördinaten van vier nieuwe punten, waarbij B en C worden gebruikt. Vervolgens wordt SVGlijnen() aangeroepen, die de coördinaten opschaalt naar de grootte van de viewport en de oorsprong van de plot verplaatst vanuit het middelpunt van de plot (zoals in BASIC) naar de linker bovenhoek van de viewport (zoals in SVG). Daarbij wordt ook de Y-as omgedraaid van wijzend naar boven naar wijzend naar beneden.
• SVGlijnen() makt ook <line>-tags aan voor de SVG, die aan de innerHTML van de <svg>-tag wordt toegevoegd. In theorie zou je de plot dus moeten zien groeien, maar de praktijk is echter iets weerbarstiger.
• Doordat de verwerking in de computer te snel is voor de grafische afhandeling in de browser, lijkt het alsof de plot in één keer wordt opgebracht.
• 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.
   
• De orde P in het voorbeeld is 5. Op mijn tablet (32 bits, 3 GB geheugen) is dat het hoogst haalbare. Daarboven is de structuur al zo ingewikkeld dat de browser er op vastloopt.
• Op mijn Windows 11-PC (64 bits, 8 GB geheugen) is P = 6 nog mogelijk. Daarboven komt de browser er niet meer uit.
.
• De schaalfactor SFactor kan niet automatisch worden bepaald en moet daarom handmatig worden ingesteld. Bij lagere orde P,moet SFactor groter worden om de viewport helemaal te vullen.
• De verkortingsfactor A moet kleiner zijn dan 1. Waarden van A in de buurt van 0.6 … 0.7 geven interessante plots.

Gebruiken:

Om met de code te spelen moet je deze downloaden naar je eigen computer en uitpakken. Start boomh1.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: voorb684.zip, 2319 bytes.