Generering av L-system fraktaler med Processing.js

Transkript

1 Generering av L-system fraktaler med Processing.js TNM084 Procedurella Metoder för bilder Carl Claesson, Hemsida:

2 Sammanfattning Denna rapport beskriver hur ett L-system(Lindenmayersystem) för att generera växtliknande fraktaler implementeras i JavaScript och html5 med hjälp av javascriptsbiblioteket Processing.js. Bakgrund Det finns många olika metoder för att skapa visualiseringar och några av de mest växande just nu är de webbaserade metoderna. Det här projektet är därför impementerat med hjälp av två av de senaste tillskottet inom webbutveckling, nämnligen html5 och canvas. Anledningen till att projektet är implementerat med just dessa metoder är för att öka tillgängligheten. Mål Målet med implementationen är att kunna generera växtliknande fraktaler utifrån en viss regel. Regeln som avgör hur fraktalen ska utvecklas ska vara utbytbar genom ett gränssnitt som är någorlunda lätt att förstå. Även andra faktorer ska kunna justeras så som till exempel antal iterationer, storlek och mängden brus.

3 Genomförande En fraktal är ett form av rekursivt mönster som efterliknar sig själv i mindre och mindre skala ju fler gånger som mönstret upprepas. L-systemet är ett system skapat för att kunna skapa växtliknande fraktaler genom att använda sig av en form av ersättningsmetod. För att skapa en fraktal med L-systemet utgår man från en regel, till exempel F[-L][+L]. Regeln används sedan genom att hantera varje symbol i den på olika sätt endligt: F Betyder rita ett streck framåt [ och ] Skapa en ny förgrening som sparar position och vinkel + och - Betyder sväng höger eller vänster enligt en given vinkel L Betyder rita ett löv, alternativt ersätt med regeln Antalet iterationer bestämmer sedan hur den slutgiltiga strukturen för fraktalen kommer att se ut. För varje iteration man genomför ersätter man alltså L med den ursprungliga regeln. Om man väljer antalet iterationer till ett, får man tillbaka regeln igen. Väljer man däremot antalet iterationer till fyra får man en utveckling enligt nedan: Iteration 1: F[-L][+L] Iteration 2: F[-F[-L][+L]][+F[-L][+L]] Iteration 3: F[-F[-F[-L][+L] ][+F[-L][+L] ]][+F[-F[-L][+L] ][+F[-L][+L] ]] Iteration 4: F[-F[-F[-F[-L][+L] ][+F[-L][+L] ] ][+F[-F[-L][+L] ][+F[-L][+L] ] ]][+F[-F[- F[-L][+L] ][+F[-L][+L] ] ][+F[-F[-L][+L] ][+F[-L][+L] ] ]] Efter att fraktalens struktur sedan är genererad går man igenom den och utför givet kommando för varje symbol. För att kunna variera utseendet på fraktalerna som genereras appliceras även brus på postitioner och vinklar. Detta för att skapa ett mer tilltalande resultat.

4 Resultat Implementationen har testats med diverse olika inställningar och jag är nöjd med resultatet. Med lite pill kan man få till allt från buskar till träd eller gräs. Nedan följer ett antal skärmdumpar med olika inställningar. Regel: F[-L][F+L], med ökande antal iterationer Regel: F[-L][F+L], med och utan brus Regel: [-F[-L][+L]][+F[L]], med ökande antal iterationer

5 Regel: F[+L][-L], med ökande antal iterationer Diskussion Det största problemet som har uppståt under projektet har helt klart vart beräkningoch renderingstider. Att generera fraktaler med allt för stort antal iterationer i javascript är inte optimalt. Eftersom fraktalens struktur växer väldigt fort beroende på vilken regel du väljer så kan webbläsaren hänga sig vid relativt lågt antal iterationer. Till en början sparades varje trädfraktal för att ritas ut i varje renderingsloop. Detta blev snabb ohållbart då möjligheten att interagera med applikationen försvann när renderingstiderna sköt i höjden. Så om projektet skulle impemeteras med hjälp av några andra verktyg som klarar av att arbeta snabbare så skulle det vara roligt att bygga ut det så att varje träd sparas. För att sedan kunna modifiera strukturen eller alternativt animera träden.