-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
175 lines (165 loc) · 8.68 KB
/
index.html
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html>
<head>
<title>Fractal Inferno</title>
<link rel='stylesheet' type='text/css' href='index.css'>
<script src='scripts/jquery-3.2.0.min.js'></script>
<meta charset="UTF-8">
<meta name="description" content="Undoubtedly the Most Mesmerizing Online Fractal Flame Generator!">
<meta name="keywords" content="JavaScript, fractal, fractals, flame, flam3, ifs, julia, fractal flame, alogrithm, chaos, generator, free, open source, online, web">
<meta name="author" content="Tariq Soliman">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class='scrollbar'>
<canvas id='canvas'></canvas>
<div id='leftpanel'>
<div id='helptoggle'>Help</div>
<div id='help' class='scrollbar'>
<h2 style='margin-top:0;'>Basic</h2>
<p style='text-align: center;'>Select some functions under <b>RANDOM</b></p>
<p style='text-align: center;'>Click <b>NEW</b></p>
<p style='text-align: center; margin-bottom: 2px;'>Wait</p>
<p style='text-align: center; font-size: 10px; margin-top: 0px;'>(if nothing shows up after a few seconds, click <b>New</b> again)</p>
<p style='text-align: center;'>Click <b>RENDER</b></p>
<p style='text-align: center;'>Right-Click 'Save image as' to save</b></p>
<h2>In-Depth</h2>
<p>A fractal is a mathematical set that exhibits a repeating pattern at every scale. There are several ways of drawing a fractal.
One of them is by playing the Chaos Game. The Chaos Game is played as follows:
<p class='indented1'>
0. Create N functions
</p>
<p class='indented1'>
1. Select a random point (x,y)
</p>
<p class='indented1'>
2. Select one of your functions at random
</p>
<p class='indented1'>
3. Apply your point to that function and get a new point (x,y)
</p>
<p class='indented1'>
4. Plot your new point
</p>
<p class='indented1'>
5. Go to step 2
</p>
Fractal flames generate fractals in much the same way. Fractal Inferno is a Fractal Flame generator.</p>
<h3>Top Left Corner</h3>
<p class='indented1'>Points</p>
<p class='indented2'>
How may loops the Chaos Game has iterated through. The higher the value, the higher the detail in the final render.
Over 1.0e+8 points usually yields a fairly high level of detail.
</p>
<h3>Top Right Corner</h3>
<p>Random</p>
<p class='indented1'>
Choose a set of functions to randomly generate a fractal from. Updates Custom with those functions upon hitting New.
</p>
<p>Custom</p>
<p class='indented1'>+</p>
<p class='indented2'>
Add functions.
</p>
<p class='indented1'>F</p>
<p class='indented2'>
weight: 0 to 1. The weights of all functions should add up to 1.
</p>
<p class='indented2'>
R,G,B: Each value is a 0 to 1 rgb value to color this function.
</p>
<p class='indented1'>c</p>
<p class='indented2'>
a,b,c,d,e,f: a,b,c is the shear, rotation, and scale for the x-axis and d,e,f is for y. Values best between -1.5 and 1.5.
</p>
<p class='indented1'>v</p>
<p class='indented2'>
A function and its weight. Weights should add up to 1 be don't have to.
</p>
<h3>Bottom Right Corner</h3>
<p class='indented1'>final func</p>
<p class='indented2'>
Which of the above functions to always call at the end of each Chaos game loop. The first function is 0, second is 1 and
so on. Leave blank for none.
</p>
<p class='indented1'>final color</p>
<p class='indented2'>
Like final func but takes the functions color instead.
</p>
<p class='indented1'>width</p>
<p class='indented2'>
Change the canvas' width. Default window width.
</p>
<p class='indented1'>height</p>
<p class='indented2'>
Change the canvas' Height. Default window height.
</p>
<p class='indented1'>zoom</p>
<p class='indented2'>
Zoom in to the center of the fractal zoom times.
</p>
<p class='indented1'>rotation</p>
<p class='indented2'>
How many times you want the fractal rotated about the center.
</p>
<p class='indented1'>mirror x</p>
<p class='indented2'>
Toggle on and off mirroring the fractal across the x-axis.
</p>
<p class='indented1'>mirror y</p>
<p class='indented2'>
Toggle on and off mirroring the fractal across the y-axis.
</p>
<p class='indented1'>NEW</p>
<p class='indented2'>
Begin a new game.
</p>
<h3>Bottom Left Corner</h3>
<p class='indented1'>hue shift</p>
<p class='indented2'>
Value to add to the hue of each HSL color in the final image. Between -360 and 360.
</p>
<p class='indented1'>sat shift</p>
<p class='indented2'>
Positive value to increase saturation and negative to decrease. Best at around 2.
</p>
<p class='indented1'>light shift</p>
<p class='indented2'>
Like sat shift but for lightness. Best at around 1.
</p>
<p class='indented1'>freq thresh</p>
<p class='indented2'>
Moves the alpha threshold. At 1, only the highest frequency point is fully opaque.
At 2, all points higher than half the max frequency are opaque. Default is 10.
</p>
<p class='indented1'>gamma</p>
<p class='indented2'>
Roughly a non-linear lightness. Default is 2.2.
</p>
<p class='indented1'>RENDER</p>
<p class='indented2'>
Take the currently plotted points, apply final changes and draw them.
</p>
<p class='indented1'>CONTINUE</p>
<p class='indented2'>
Keep iterating the chaos game with the same functions after rendering.
</p>
<h3>Saving</h3>
<p class='indented1'>Save the outputted image simply by: Right Clicking and Save As</p>
<hr>
<p style='text-align: center;'>
<a href='https://github.com/tariqksoliman/Fractal-Inferno' style='color: #E6E6E6;'>GitHub</a>
</p>
<p style='text-align: center;'>Tariq Soliman</p>
</div>
</div>
<div id='rightpanel'></div>
<div id='title'>Fractal Inferno</div>
<div id='renderingbar'></div>
<div id='tutorial'>To begin, select a few functions on the right and hit New!</div>
</body>
<footer>
<script src='scripts/FractalInferno.js'></script>
<script src='scripts/UserInterface.js'></script>
<script src='scripts/main.js'></script>
</footer>
</html>