Fractal-Tree-Generator/index.html at main · Fadikk367/Fractal-Tree-Generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
  <title>Fractal Tree Generaotr</title>
</head>
<body>
  <header>
    <h1>
      Fractal Tree Generator
      <span id="version">v1.0.0</span>
    </h1>
    <img src="./assets/info.svg" id="toggle-info-btn" alt="info icon">
  </header>
  <main>
    <aside>
      <section class="controls-section">
        <form name="tree-structure-form">
          <h3 class="form-header">Define main parameters:</h3>
          <label class="range-label">
            Split angle<br />
            <input type="range" name="splitAngle" min="0" max="90" value="20"/>
          </label>
          <label class="range-label">
            Size<br />
            <input type="range" name="branchLength" min="80" max="160" value="120"/>
          </label>
          <label class="range-label">
            Recursion deepth<br />
            <input type="range" name="deepth" min="1" max="13" value="9"/>
          </label>
          <label class="range-label">
            Split angle variance<br />
            <input type="range" name="splitAngleVariance" min="0" max="20" value="0"/>
          </label>
          <label class="range-label">
            Branch length variance<br />
            <input type="range" name="branchLengthVariance" min="0" max="60" value="0"/>
          </label>
          <label class="range-label">
            Branching probability<br />
            <input type="range" name="splitProbability" min="0" max="100" value="100"/>
          </label>
          <label class="range-label">
            Seed
            <input type="number" name="seed">
          </label>
        </form>
      </section>
      <section class="controls-section">
        <form name="treeThemeForm">
          <h3 class="form-header">Style your tree!</h3>
          <label class="range-label">
            Root thickness<br />
            <input type="range" name="rootThickness" min="5" max="20" value="10" id="root-thickness-input"/>
          </label>
          <div class="controls-row">
            <label class="cell-label">
              Leaves<br />
              <input type="checkbox" id="drawLeaves" name="isDrawingLeaves"/>
            </label>
            <label class="cell-label">
              Shadows<br />
              <input type="checkbox" id="drawShadows" name="isDrawingShadows"/>
            </label>
            <label class="cell-label">
              Color<br />
              <input type="color" id="branchColor" name="branchColor"/>
            </label>
          </div>
        </form>
      </section>
      <button id="grow-btn">Watch it grow!</button>
    </aside>
    <div id="content">
      <canvas></canvas>
    </div>
  </main>
  <button id="download-btn">
    <img src="./assets/download.svg" alt="download icon">
    <span>Export to JPEG</span>
  </button>
  <div id="modal">
    <div id="modal-content">
      <button id="close-modal-btn">&times;</button>
      <article>
        <h2>What fractal is?</h2>
        <p>A curve or geometrical figure, each part of which has the same statistical character as the whole. They are useful in modelling structures (such as snowflakes) in which similar patterns recur at progressively smaller scales, and in describing partly random or chaotic phenomena such as crystal growth and galaxy formation.</p>
        <br />
        <figure>
          <img src="./assets/mandelbrots-set.jpg" alt="">
          <figcaption>Mandelbrots set - [1]</figcaption>
        </figure>
        <figure>
          <img src="./assets/fractal-example.jpg" alt="">
          <figcaption>Fractal example - [2]</figcaption>
        </figure>
        <h2>Examples of fractals in nature</h2>
        <br />
        <figure>
          <img src="./assets/Fractal_Broccoli.jpg" alt="">
          <figcaption>Rome Cauliflower - [3]</figcaption>
        </figure>
        <figure>
          <img src="./assets/aloes.jpg" alt="">
          <figcaption>Aloes - [4]</figcaption>
        </figure>
        <figure>
          <img src="./assets/snowflake.jpg" alt="">
          <figcaption>Snowflake - [5]</figcaption>
        </figure>
      </article>

      <article>
        <h2>Performance warnings</h2>
        <p>When recursion deepth is set to high value there migth be issues with fluency when changing other parameters. Therefore drawing leaves and shadows is turned off when playing structure parameters to improve user experience.</p>
      </article>

      <article>
        <h2>Documentation</h2>
        <a id="docs-link"href="https://github.com/Fadikk367/Fractal-Tree-Generator">Link to source code, little documentation and sources</a>
      </article>
    </div>
  </div>
  <script src="./alea.min.js"></script>
  <script src='./main.js'></script>
</body>
</html>