Fraktaler och mönster
En fraktal kan beskrivas som en kurva som är sönderbruten om och om igen.
Den används ibland som en matematisk modell av företeelser i tillvaron som har denna sönderbrutna form, som t ex kuststräckor, blodkärl eller moln.
Till skillnad från vanliga geometriska figurer är fraktalen skallikformig. Det innebär att om man zoomar in och betraktar en detalj av fraktalen så ser den likadan ut som ursprunget. Nedan en bild av von Kochs kurva
Koch-kurvan:
Ta en linje.
Dela linjen i tre lika stora delar.
Ersätt den mittersta delen med en spets
Upprepa detta på alla delsträckor
Upprepa (iterera) igen och igen tills du är nöjd.
När man skriver kod för fraktaler använd en rekursiv funktion. Mad rekursiv menas att den har referenser till sig själv det vill säga att funktionen anropar sig själv. Viktigt att komma ihåg när man har en rekursiv funktion är att det finns villkor som gör att koden slutar vid visst villkor.
Exempel:
I setup() skapas canvas och bakgrund samt att färg för fyll bestäms.
En funktion skapas som heter boll och som har tre parametrar( x, y, diam ) diam står för diameter. En ellips ritas ut med centrum i x och y med bredd och höjd diam.
Ett villkor if (diam > 5), bara då anropas funktionen.
boll(x, y – diam / 2, diam / 2, diam / 2);
x-värdet är konstant, y-värdet minskas med halva diametern för varje loop, diametern halveras.
Om if-satsens villkor inte uppfylls avslutas loopen med funktionen noLoop()
Sist i funktionen skrivs värden för diam ut i konsolen
function boll(x, y, diam, diam) {
ellipse(x, y, diam, diam);
if (diam > 5) {
boll(x, y - diam / 2, diam / 2, diam / 2);
}
noLoop();
console.log(diam);
}
I draw() aktiveras funktionen och initiala argument läggs in.
Titta på värdena för diam som skrivs ut i konsolen.(förutsatt att du skapat koden själv i p5.js editor) Vad är max och min-värdena? Vad är det som styr att det blir dessa värden?
Fraktaler i två riktningar
Ändra i koden så att mönstret ritas ut vertikalt istället för horisontellt.
Fractal Tree
I nästa program ska ett träd som bygger på fraktaler skapas
Varje gren delar sig i två grenar som roteras en viss vinkel.
De nya grenarna är kortare än föregående grenar.
Tjockleken på grenarna minskas för varje förgrening.
Processen fortgår tills längden på grenarna är är mindre än 4 pixlar. Trädet som skapas kommer att se ut som på bilden.
En variabel med namnet angle skapas. Den ska hålla reda på den vinkel som ska vara när ny gren skapas. I setup() skapas canvas och angle sätts till värdet PI/4 vilket är 45 grader uttryckt i radianer.
let angle;
function setup() {
createCanvas(400, 400);
angle = PI / 4;
}
I draw bestäms bakgrundsfärg. Funktionen translate() används för att flytta origo. Origo på canvasen är normalt i övre vänstra hörnet. Med translate flyttas den här till mitt på nederkanten. När detta är gjort kan trädet ritas ut från koordinaterna x = 0 och y = 0.
function draw() {
background(220);
translate(200, height);
//ingen slutparentes då mer kod ska in i draw()
En rekursiv funktion med namnet gren skapas. Den tar en parameter, len, vilken ska ange startlängden på första grenen.
Tjocklek på linjer som ritas ut bestäms till en femtedel av grenens längd.
En linje ritas ut som stam. Dess längd anges med ett minustecken för att koordinatsystemet på canvasen har negativ y uppåt.
Därefter flyttas origo till stammens högsta punkt.
Runt all kommande kod sätts ett villkor ( if ) som säger att det som står innanför parenteserna bara ska ske så länge längden på grenar är större än 4 pixlar.
Kod för grenar kommer nu att skrivas inom push() och pop(). De två kodorden används när en transformation av stil ska göras endast för elementet i koden mellan dessa två. Efter utförd kod ska inställningarna återgå till det som var före. Läs mer om push och pop på p5.js referenssida.
Näst kommer rotation vinkel radianer, tjocklek på linje ska vara 67% av tidigare tjocklek och funktionen gren anropas (rekursivt) med längd specificerad som 67 % av tidigare längd.
Ytterligare en push och pop används för att rita grenarna på andra sidan trädet. Detta genom att ange en negativ vinkel.
Sist i koden anges noLoop() vilken säger att om grenarnas längs är mindre än 4 pixlar ska programmet stoppas.
function gren(len) {
strokeWeight(len / 5);
line(0, 0, 0, -len);
translate(0, -len);
if (len > 4) {
push()
rotate(angle);
strokeWeight((len / 5) * 0.67);
gren(len * 0.67);
pop()
push()
rotate(-angle)
strokeWeight((len / 5) * 0.67);
gren(len * 0.67);
pop()
}
noLoop();
}
Sist i funktionen draw() anropas nu funktionen gren med argumentet för längd på första grenen
gren(100);
}//slutparentes för draw()
Koden i sin helhet i editorn
Ändra i koden så att annan form på trädet ritas ut. Gällande procentsatsen för längden på grenarna kan bara små förändringar göras. Ett par procent ger stor förändring.
Om noLoop() i funktionen gren tas bort och angle = angle + 0.002 läggs till i draw() fås en animation