Fractals zelf doen:
Drietallige boom

In zijn boek "Fractals. Meetkundige figuren in eindeloze herhaling" beschrijft Prof. Hans Lauwerier (1923 - 1997) een aantal talstelsels. Het tweetallige en het drietallige stelsel zijn te visualiseren in een soort boomstructuur. Hiervoor 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.

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 BOOM3 (pag. 146 van het boek) gebruikt. Dit programma tekent de boomstructuur voor het drietallige getalstelsel (pag. 22). Klik HIER voor een preview.

Onderstaande 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 de verkortingsfactor A in elke stap in de berekening, = 0.45.
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.
Een verschil tussen BASIC en JavaScript is dat een loopteller in BASIC blijft bestaan (met de hoogste waarde van de loop + 1) terwijl de loopteller in JavaScript verdwijnt als de loop is afgelopen. De BASIC-versie maakt er gebruik van (in de loop met K). In de Javascript-versie is een extra regel code nodig.

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 Boom3(), die de resultaten (begin- en eindpunten van de lijnstukken) aflevert in de arrays X[ ] en Y[ ].
• Het axioma begint met het tekenen van drie lijnstukken met lengte A: horizontaal, verdraaid over +120° en verdraaid over -120°.
• Het axioma voegt aan elk lijnstuk drie andere lijnstukken toe: in het verlengde van het beschouwde lijnstuk, verdraaid over +120° en verdraaid over -120°. De lengte van elk lijnstuk wordt in elke rekenstap verkort met de factor A. omdat A < 1, worden de lijnstukjes steeds korter. De lengte per lijnstukje is A^K, waarbij K de rekenstap is, 1 ≤ K ≤ M en 0 ≤ M ≤ P.
• De manier waarop de data in X[ ] en Y[ ] wordt opgeslagen lijkt wat cryptisch, maar er zit een regelmaat in:
  •   X[i] bevat het beginpunt van de drie lijnen, Y[i] bevat het beginpunt van de eerste (verlengde) lijn.
  •   X[i+1] bevat het eindpunt van de eerste (verlengde) lijn. Y[i+1] bevat het eindpunt van de tweede (verdraaide) lijn.
  •   X[i+2] bevat het eindpunt van de twee verdraaide lijnen. Y[i+2] bevat het eindpunt van de derde (verdraaide) lijn.
• De lengte van X[ ] en Y[ ] hangt af van de orde P, maar is dynamisch geïmplementeerd, zodat de beschikbare geheugenruimte in principe bepalend is voor de maximale waarde van P.
  De praktijk is echter iets weerbarstiger.
• Bij de berekening wordt uitgegaan van een eenheidslengte, dat is de lengte van het eerste lijnstuk (= 1). Bij hogere orde wordt dat steeds minder: ½, ¼, ⅛, … Op enig moment wordt de lengte van de lijnstukjes zo klein dat er underflow optreedt: De opeenvolgende punten X[i] en Y[i] gaan samenvallen. SVG kan daar niet goed tegen, waardoor er er geen plot verschijnt.
• In de praktijk kun je gaan tot P = 7. Dat is getest op mijn PC met Windows 11 (64 bits, 8 GB geheugen). Bij P > 7 moet je behoorlijk wat geduld hebben voor de plot verschijnt. Op een tablet (32 bits, 3 GB geheugen) moet je niet hoger gaan dan P = 6.
• Zodra de berekeningen klaar zijn, start SVGlijnen(). Deze function schaalt de coördinaten van de lijnstukken (lees: de hele plot) op naar de 95% van de afmetingen van de SVG-viewport. Daarna wordt de plot gespiegeld in de X-as en wordt de oorsprong van de plot verplaatst van het middelpunt van de viewport (daar rekent BASIC mee) naar de linker bovenhoek (daar rekent SVG mee).
  Vervolgens worden line-tags gemaakt voor elke set coördinaten [(X[i], Y[i]) en (X[i+1], Y[i])], [(X[i], Y[i]) en (X[i+2], Y[i+1])] en [(X[i], Y[i]) en (X[i+2], Y[i+2])]. Elke line-tag wordt toegevoegd aan een string str. Elk blokje van drie lijnstukken wordt steeds aan de innerHTML van de <svg>-tag toegevoegd.
• De function SVGtrailer() zet als laatste een melding boven de plot met daarin de orde P.
• 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 boom3.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: voorb687.zip, 2188 bytes.