Skip to content

Commit

Permalink
Add categories in modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@emlyn
emlyn committed Oct 13, 2024
1 parent 96fb22a commit 75690d2
Show file tree
Hide file tree
Showing 5 changed files with 174 additions and 95 deletions.
59 changes: 0 additions & 59 deletions docs/categories.html
View file

This file was deleted.

159 changes: 155 additions & 4 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
height: 100%;
/* padding: 10vh; */
background: #888;
overflow-y: scroll;
}

.modal .content {
Expand Down Expand Up @@ -169,6 +170,156 @@ <h1>PowerPoint Fractal Art</h1>
a wide range of fractal images can be created, from regular mathematical shapes,
to natural objects, to weird abstract images and even representations of 3D shapes.
</p>
<div class="category">
<h2>Triangles</h2>
<p>Fractals with triangular symmetry, such as the Sierpiński Triangle and variations.</p>
<img src="assets/fractals/triangles/sierpinski_600.png" height="80" onclick="gotoSlide(0)">
<img src="assets/fractals/triangles/rectangles_600.png" height="80" onclick="gotoSlide(1)">
<img src="assets/fractals/triangles/rotated-rectangles_600.png" height="80" onclick="gotoSlide(2)">
<img src="assets/fractals/triangles/coloured-rectangles_600.png" height="80" onclick="gotoSlide(3)">
<img src="assets/fractals/triangles/shaded_600.png" height="80" onclick="gotoSlide(4)">
<img src="assets/fractals/triangles/rgb_600.png" height="80" onclick="gotoSlide(5)">
<img src="assets/fractals/triangles/circles_600.png" height="80" onclick="gotoSlide(6)">
<img src="assets/fractals/triangles/cmy_600.png" height="80" onclick="gotoSlide(7)">
<img src="assets/fractals/triangles/triflake_600.png" height="80" onclick="gotoSlide(8)">
<img src="assets/fractals/triangles/triflake-shaded_600.png" height="80" onclick="gotoSlide(9)">
<img src="assets/fractals/triangles/triflake-rotated-shaded_600.png" height="80" onclick="gotoSlide(10)">
<img src="assets/fractals/triangles/dust_600.png" height="80" onclick="gotoSlide(11)">
<img src="assets/fractals/triangles/lightning_600.png" height="80" onclick="gotoSlide(12)">
</div>
<div class="category">
<h2>Squares</h2>
<p>Fractals with square symmetry, such as the Sierpiński Carpet and variations.</p>
<img src="assets/fractals/squares/sierpinski_600.png" height="80" onclick="gotoSlide(13)">
<img src="assets/fractals/squares/gradient_600.png" height="80" onclick="gotoSlide(14)">
<img src="assets/fractals/squares/outline_600.png" height="80" onclick="gotoSlide(15)">
<img src="assets/fractals/squares/coloured-outline_600.png" height="80" onclick="gotoSlide(16)">
<img src="assets/fractals/squares/diagonals_600.png" height="80" onclick="gotoSlide(17)">
<img src="assets/fractals/squares/coloured-diagonals_600.png" height="80" onclick="gotoSlide(18)">
<img src="assets/fractals/squares/inverted_600.png" height="80" onclick="gotoSlide(19)">
<img src="assets/fractals/squares/vicsek_600.png" height="80" onclick="gotoSlide(20)">
<img src="assets/fractals/squares/vicsek-coloured_600.png" height="80" onclick="gotoSlide(21)">
<img src="assets/fractals/squares/vicsek-circle_600.png" height="80" onclick="gotoSlide(22)">
<img src="assets/fractals/squares/vicsek-diagonal_600.png" height="80" onclick="gotoSlide(23)">
<img src="assets/fractals/squares/h_600.png" height="80" onclick="gotoSlide(24)">
<img src="assets/fractals/squares/castle_600.png" height="80" onclick="gotoSlide(25)">
<img src="assets/fractals/squares/cross_600.png" height="80" onclick="gotoSlide(26)">
<img src="assets/fractals/squares/swiss_600.png" height="80" onclick="gotoSlide(27)">
<img src="assets/fractals/squares/forest_600.png" height="80" onclick="gotoSlide(28)">
<img src="assets/fractals/squares/copper_600.png" height="80" onclick="gotoSlide(29)">
<img src="assets/fractals/squares/distorted_600.png" height="80" onclick="gotoSlide(30)">
<img src="assets/fractals/squares/dots_600.png" height="80" onclick="gotoSlide(31)">
<img src="assets/fractals/squares/window_600.png" height="80" onclick="gotoSlide(32)">
<img src="assets/fractals/squares/degraded_600.png" height="80" onclick="gotoSlide(33)">
</div>
<div class="category">
<h2>Pentagons</h2>
<p>Fractals with pentagonal symmetry.</p>
<img src="assets/fractals/pentagons/pentaflake_600.png" height="80" onclick="gotoSlide(34)">
<img src="assets/fractals/pentagons/sierpinski_600.png" height="80" onclick="gotoSlide(35)">
<img src="assets/fractals/pentagons/rotated-pentaflake_600.png" height="80" onclick="gotoSlide(36)">
<img src="assets/fractals/pentagons/rotated-sierpinski_600.png" height="80" onclick="gotoSlide(37)">
<img src="assets/fractals/pentagons/pentaflake-gap_600.png" height="80" onclick="gotoSlide(38)">
<img src="assets/fractals/pentagons/star_600.png" height="80" onclick="gotoSlide(39)">
<img src="assets/fractals/pentagons/twist_600.png" height="80" onclick="gotoSlide(40)">
<img src="assets/fractals/pentagons/microbe_600.png" height="80" onclick="gotoSlide(41)">
</div>
<div class="category">
<h2>Hexagons</h2>
<p>Fractals with hexagonal symmetry, such as the Koch Snowflake.</p>
<img src="assets/fractals/hexagons/sierpinski_600.png" height="80" onclick="gotoSlide(42)">
<img src="assets/fractals/hexagons/sierpinski-shaded_600.png" height="80" onclick="gotoSlide(43)">
<img src="assets/fractals/hexagons/sierpinski-coloured_600.png" height="80" onclick="gotoSlide(44)">
<img src="assets/fractals/hexagons/sierpinski-rotated_600.png" height="80" onclick="gotoSlide(45)">
<img src="assets/fractals/hexagons/sierpinski-rotated-shaded_600.png" height="80" onclick="gotoSlide(46)">
<img src="assets/fractals/hexagons/koch_600.png" height="80" onclick="gotoSlide(47)">
<img src="assets/fractals/hexagons/exploding_600.png" height="80" onclick="gotoSlide(48)">
<img src="assets/fractals/hexagons/exploded_600.png" height="80" onclick="gotoSlide(49)">
<img src="assets/fractals/hexagons/snowflake_600.png" height="80" onclick="gotoSlide(50)">
<img src="assets/fractals/hexagons/hexaflake_600.png" height="80" onclick="gotoSlide(51)">
<img src="assets/fractals/hexagons/hexaflake-rotated_600.png" height="80" onclick="gotoSlide(52)">
<img src="assets/fractals/hexagons/hexaflake-shaded_600.png" height="80" onclick="gotoSlide(53)">
<img src="assets/fractals/hexagons/hexaflake-shaded2_600.png" height="80" onclick="gotoSlide(54)">
<img src="assets/fractals/hexagons/hexaflake-shaded3_600.png" height="80" onclick="gotoSlide(55)">
<img src="assets/fractals/hexagons/hexaflake-coloured_600.png" height="80" onclick="gotoSlide(56)">
<img src="assets/fractals/hexagons/hexaflake-coloured2_600.png" height="80" onclick="gotoSlide(57)">
<img src="assets/fractals/hexagons/hexaflake-cell_600.png" height="80" onclick="gotoSlide(58)">
</div>
<div class="category">
<h2>Linear</h2>
<p>Fractals where all repeats appear on a straight line, with no rotation (&quot;fractalness&quot; is one-dimensional).</p>
<img src="assets/fractals/linear/barcode_600.png" height="80" onclick="gotoSlide(59)">
<img src="assets/fractals/linear/french-cantor_600.png" height="80" onclick="gotoSlide(60)">
<img src="assets/fractals/linear/palette_600.png" height="80" onclick="gotoSlide(61)">
<img src="assets/fractals/linear/powerlines_600.png" height="80" onclick="gotoSlide(62)">
<img src="assets/fractals/linear/dots_600.png" height="80" onclick="gotoSlide(63)">
<img src="assets/fractals/linear/circles_600.png" height="80" onclick="gotoSlide(64)">
<img src="assets/fractals/linear/bubbles_600.png" height="80" onclick="gotoSlide(65)">
<img src="assets/fractals/linear/shard_600.png" height="80" onclick="gotoSlide(66)">
<img src="assets/fractals/linear/jagged_600.png" height="80" onclick="gotoSlide(67)">
<img src="assets/fractals/linear/metal_600.png" height="80" onclick="gotoSlide(68)">
<img src="assets/fractals/linear/ukraine_600.png" height="80" onclick="gotoSlide(69)">
</div>
<div class="category">
<h2>Curves</h2>
<p>Fractal curves (such as the Koch Curve and the Dragon Curve).</p>
<img src="assets/fractals/curves/koch_600.png" height="80" onclick="gotoSlide(70)">
<img src="assets/fractals/curves/square_600.png" height="80" onclick="gotoSlide(71)">
<img src="assets/fractals/curves/dragon_600.png" height="80" onclick="gotoSlide(72)">
<img src="assets/fractals/curves/golden_600.png" height="80" onclick="gotoSlide(73)">
<img src="assets/fractals/curves/pythagoras_600.png" height="80" onclick="gotoSlide(74)">
<img src="assets/fractals/curves/levy-c_600.png" height="80" onclick="gotoSlide(75)">
<img src="assets/fractals/curves/levy-c-coloured_600.png" height="80" onclick="gotoSlide(76)">
</div>
<div class="category">
<h2>Plants</h2>
<p>Fractal plants (such as leaves and trees).</p>
<img src="assets/fractals/plants/pythagoras-tree_600.png" height="80" onclick="gotoSlide(77)">
<img src="assets/fractals/plants/tree_600.png" height="80" onclick="gotoSlide(78)">
<img src="assets/fractals/plants/pine_600.png" height="80" onclick="gotoSlide(79)">
<img src="assets/fractals/plants/fern_600.png" height="80" onclick="gotoSlide(80)">
<img src="assets/fractals/plants/cabbage_600.png" height="80" onclick="gotoSlide(81)">
<img src="assets/fractals/plants/flower_600.png" height="80" onclick="gotoSlide(82)">
<img src="assets/fractals/plants/bamboo_600.png" height="80" onclick="gotoSlide(83)">
<img src="assets/fractals/plants/mushrooms1_600.png" height="80" onclick="gotoSlide(84)">
<img src="assets/fractals/plants/mushrooms2_600.png" height="80" onclick="gotoSlide(85)">
</div>
<div class="category">
<h2>Nature</h2>
<p>Other things from nature that are not plants.</p>
<img src="assets/fractals/nature/cloud_600.png" height="80" onclick="gotoSlide(86)">
<img src="assets/fractals/nature/centipede_600.png" height="80" onclick="gotoSlide(87)">
<img src="assets/fractals/nature/mountainscape_600.png" height="80" onclick="gotoSlide(88)">
</div>
<div class="category">
<h2>Spirals</h2>
<p>Spiral fractals.</p>
<img src="assets/fractals/spirals/rainbow_600.png" height="80" onclick="gotoSlide(89)">
<img src="assets/fractals/spirals/vortex_600.png" height="80" onclick="gotoSlide(90)">
<img src="assets/fractals/spirals/fire_600.png" height="80" onclick="gotoSlide(91)">
<img src="assets/fractals/spirals/blossom_600.png" height="80" onclick="gotoSlide(92)">
</div>
<div class="category">
<h2>Abstract</h2>
<p>Abstract shapes that don&#39;t fit into any of the other categories.</p>
<img src="assets/fractals/abstract/abstract1_600.png" height="80" onclick="gotoSlide(93)">
<img src="assets/fractals/abstract/abstract2_600.png" height="80" onclick="gotoSlide(94)">
<img src="assets/fractals/abstract/abstract3_600.png" height="80" onclick="gotoSlide(95)">
<img src="assets/fractals/abstract/abstract4_600.png" height="80" onclick="gotoSlide(96)">
<img src="assets/fractals/abstract/abstract6_600.png" height="80" onclick="gotoSlide(97)">
<img src="assets/fractals/abstract/heart_600.png" height="80" onclick="gotoSlide(98)">
</div>
<div class="category">
<h2>3D</h2>
<p>Three dimensional fractals</p>
<img src="assets/fractals/3d/menger-fake_600.png" height="80" onclick="gotoSlide(99)">
<img src="assets/fractals/3d/menger-grey_600.png" height="80" onclick="gotoSlide(100)">
<img src="assets/fractals/3d/menger-rgb_600.png" height="80" onclick="gotoSlide(101)">
<img src="assets/fractals/3d/cross-menger_600.png" height="80" onclick="gotoSlide(102)">
<img src="assets/fractals/3d/tetrix_600.png" height="80" onclick="gotoSlide(103)">
<img src="assets/fractals/3d/mosely-snowflake_600.png" height="80" onclick="gotoSlide(104)">
<img src="assets/fractals/3d/sm-snowflake_600.png" height="80" onclick="gotoSlide(105)">
</div>
</div>
</div>
<div class="slides">
Expand Down Expand Up @@ -1616,8 +1767,8 @@ <h2 class="name">Sierpiński-Menger Snowflake</h2>
alt="Sierpiński-Menger Snowflake" title="Sierpiński-Menger Snowflake">
</div>
</div>
<a class="prev" onclick="nextSlide()" title="Previous fractal (←)">❮</a>
<a class="next" onclick="prevSlide()" title="Next fractal (→)">❯</a>
<a class="prev" onclick="prevSlide()" title="Previous fractal (←)">❮</a>
<a class="next" onclick="nextSlide()" title="Next fractal (→)">❯</a>
</div>

<script>
Expand All @@ -1628,7 +1779,7 @@ <h2 class="name">Sierpiński-Menger Snowflake</h2>

const nextSlide = () => showSlide(++slideIndex);
const prevSlide = () => showSlide(--slideIndex);
const gotoSlide = n => showSlide(slideIndex = n);
const gotoSlide = n => { closeModal(); showSlide(slideIndex = n) };

function init() {
slides = document.getElementsByClassName("slide");
Expand Down Expand Up @@ -1659,7 +1810,7 @@ <h2 class="name">Sierpiński-Menger Snowflake</h2>

function handleKey(e) {
e ||= window.event;
console.log(event);
console.log(e);
switch (e.key) {
case "ArrowLeft":
if (state !== 'intro') {
Expand Down
23 changes: 0 additions & 23 deletions resources/templates/categories.html
View file

This file was deleted.

Loading

0 comments on commit 75690d2

Please sign in to comment.