diff --git a/public/index.html b/public/index.html index 048946b..5288ba7 100644 --- a/public/index.html +++ b/public/index.html @@ -16,12 +16,24 @@ @@ -38,6 +50,10 @@

Triangle

+
+

Hexagonal

+
+
diff --git a/public/index.html b/public/index.html index 048946b..5288ba7 100644 --- a/public/index.html +++ b/public/index.html @@ -16,12 +16,24 @@ @@ -38,6 +50,10 @@

Triangle

+
+

Hexagonal

+
+
diff --git a/public/style/core.css b/public/style/core.css index 372d35b..f53bed6 100644 --- a/public/style/core.css +++ b/public/style/core.css @@ -1,6 +1,6 @@ html, body { /* margin: 0; */ - /* background: #202020; */ + background: #202020; font-family: Arial, Helvetica, sans-serif; color: #EEEEEE; } diff --git a/public/index.html b/public/index.html index 048946b..5288ba7 100644 --- a/public/index.html +++ b/public/index.html @@ -16,12 +16,24 @@ @@ -38,6 +50,10 @@

Triangle

+
+

Hexagonal

+
+
diff --git a/public/style/core.css b/public/style/core.css index 372d35b..f53bed6 100644 --- a/public/style/core.css +++ b/public/style/core.css @@ -1,6 +1,6 @@ html, body { /* margin: 0; */ - /* background: #202020; */ + background: #202020; font-family: Arial, Helvetica, sans-serif; color: #EEEEEE; } diff --git a/src/FractalSVG.ts b/src/FractalSVG.ts index 87af9c0..4797d41 100644 --- a/src/FractalSVG.ts +++ b/src/FractalSVG.ts @@ -1,48 +1,92 @@ import { Polygon, Point } from "./Polygon"; -function inwardSpiral(input:Polygon, scalar:number, randomizeShrinkRate:number): Polygon +/** + * Concatenates two arrays component wise. + * a[i], b[i+offset] => [a[i], b[i+offset]] + */ +function zip(a:S[], b:T[], offset:number = 0): Array<[S, T]> { - const output = new Polygon(); - - let a:Point; - let b:Point; - let cx: number; - let cy: number; - let rate:number; - for(let i=0;i = []; + const length = a.length; + for(let i=0;i + midPoint(a, b, randomizeScalar(scalar, randomizeShrinkRate, 0, 0.9))); + return new Polygon(...newPoints); +} + +export function createInwardSpiral( + startShape:Polygon, maxiterations:number, shrinkRate:number, randomizeShrinkRate:number, ): Polygon[] { - const cycle:Polygon[] = [input]; + const cycle:Polygon[] = [startShape]; let pNext:Polygon; for(let i=0;i { + return new Polygon(...[ + a, b, center, + ]); + }); + + const corner1 = new Point(sideLength, 0); + const corner2 = new Point(0,0); + const corner3 = new Point(0, sideLength); + const corner4 = new Point(sideLength, sideLength); + + base.push(new Polygon(...[hexagon[0], corner1, hexagon[1]])); + base.push(new Polygon(...[hexagon[2], corner2, hexagon[3]])); + base.push(new Polygon(...[hexagon[3], corner3, hexagon[4]])); + base.push(new Polygon(...[hexagon[5], corner4, hexagon[0]])); + + return base; +} + export function inwardSpiralFractal(shape:Polygon, iterations:number, shrinkRate:number, randomize:number): Polygon[][] { const fractal = [ @@ -119,3 +200,12 @@ ]; return fractal; } + +export function createTriangle(sideLength:number): Polygon +{ + return new Polygon( + new Point(sideLength/2, 0), + new Point(0,sideLength), + new Point(sideLength, sideLength), + ); +} diff --git a/public/index.html b/public/index.html index 048946b..5288ba7 100644 --- a/public/index.html +++ b/public/index.html @@ -16,12 +16,24 @@ @@ -38,6 +50,10 @@

Triangle

+
+

Hexagonal

+
+
diff --git a/public/style/core.css b/public/style/core.css index 372d35b..f53bed6 100644 --- a/public/style/core.css +++ b/public/style/core.css @@ -1,6 +1,6 @@ html, body { /* margin: 0; */ - /* background: #202020; */ + background: #202020; font-family: Arial, Helvetica, sans-serif; color: #EEEEEE; } diff --git a/src/FractalSVG.ts b/src/FractalSVG.ts index 87af9c0..4797d41 100644 --- a/src/FractalSVG.ts +++ b/src/FractalSVG.ts @@ -1,48 +1,92 @@ import { Polygon, Point } from "./Polygon"; -function inwardSpiral(input:Polygon, scalar:number, randomizeShrinkRate:number): Polygon +/** + * Concatenates two arrays component wise. + * a[i], b[i+offset] => [a[i], b[i+offset]] + */ +function zip(a:S[], b:T[], offset:number = 0): Array<[S, T]> { - const output = new Polygon(); - - let a:Point; - let b:Point; - let cx: number; - let cy: number; - let rate:number; - for(let i=0;i = []; + const length = a.length; + for(let i=0;i + midPoint(a, b, randomizeScalar(scalar, randomizeShrinkRate, 0, 0.9))); + return new Polygon(...newPoints); +} + +export function createInwardSpiral( + startShape:Polygon, maxiterations:number, shrinkRate:number, randomizeShrinkRate:number, ): Polygon[] { - const cycle:Polygon[] = [input]; + const cycle:Polygon[] = [startShape]; let pNext:Polygon; for(let i=0;i { + return new Polygon(...[ + a, b, center, + ]); + }); + + const corner1 = new Point(sideLength, 0); + const corner2 = new Point(0,0); + const corner3 = new Point(0, sideLength); + const corner4 = new Point(sideLength, sideLength); + + base.push(new Polygon(...[hexagon[0], corner1, hexagon[1]])); + base.push(new Polygon(...[hexagon[2], corner2, hexagon[3]])); + base.push(new Polygon(...[hexagon[3], corner3, hexagon[4]])); + base.push(new Polygon(...[hexagon[5], corner4, hexagon[0]])); + + return base; +} + export function inwardSpiralFractal(shape:Polygon, iterations:number, shrinkRate:number, randomize:number): Polygon[][] { const fractal = [ @@ -119,3 +200,12 @@ ]; return fractal; } + +export function createTriangle(sideLength:number): Polygon +{ + return new Polygon( + new Point(sideLength/2, 0), + new Point(0,sideLength), + new Point(sideLength, sideLength), + ); +} diff --git a/src/index.ts b/src/index.ts index 83411c0..01f3b46 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,14 +1,4 @@ -import { createSquare, inwardSpiralFractal, fractalToSvg } from "./FractalSVG"; -import { Polygon, Point } from "./Polygon"; - -function createTriangle(sideLength:number): Polygon -{ - return new Polygon( - new Point(sideLength/2, 0), - new Point(0,sideLength), - new Point(sideLength, sideLength), - ); -} +import { createSquare, createTriangle, inwardSpiralFractal, fractalToSvg, createHexagonalBase, createInwardSpiral } from "./FractalSVG"; function pageInit(): void { @@ -31,6 +21,11 @@ const triangleFractal = inwardSpiralFractal(triangle, iterations, 1-0.06, 0); const divTriangle = document.getElementById("triangle") as HTMLDivElement; divTriangle.appendChild(fractalToSvg(triangleFractal, sideLength)); + + const hexagonalBase = createHexagonalBase(sideLength); + const hexagonalFractal = hexagonalBase.map(h => createInwardSpiral(h, iterations, 0.1, 0)); + const divHexagonal = document.getElementById("hexagonal") as HTMLDivElement; + divHexagonal.appendChild(fractalToSvg(hexagonalFractal, sideLength)); } document.addEventListener("DOMContentLoaded", pageInit);