/
index.html
99 lines (95 loc) · 3.16 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
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<title>Attractor Seeder</title>
<meta name="title" content="Attractor Seeder" />
<meta
name="description"
content="Mass generate attractors and select your favorite ones to breed them!"
/>
<link rel="stylesheet" href="../style.css" />
</head>
<body>
<div class="main-container">
<h1>Attractor Seeder</h1>
<p>
This tool will let you generate several values combinations for the
variables that control an attractor, and immediatly see what the
attractor looks like. You can easily copy those values afterwards.
<br />
<br />
You can generate
<a
href="http://paulbourke.net/fractals/clifford/"
target="_blank"
rel="noreferrer nofollow"
>Clifford</a
>
or
<a
href="http://paulbourke.net/fractals/peterdejong/"
target="_blank"
rel="noreferrer nofollow"
>De Jong</a
>
attractors.
</p>
<form action="./grid/" id="attractor-config">
<p>
Attractors size (px):
<input type="number" name="size" value="300" /><br />
</p>
<p>
Points per attractor:<input
type="number"
name="points"
value="7000"
/><br />
</p>
<p>
Equations:
<select name="equations" id="attractor-equation">
<option value="Clifford">Clifford</option>
<option value="DeJong">De Jong</option>
</select>
</p>
<p>
<div id="attractor-equation-definition">
x<sub>n+1</sub> = sin(a * y<sub>n</sub>) + c * cos(a *
x<sub>n</sub>)<br />
y<sub>n+1</sub> = sin(b * x<sub>n</sub>) + d * cos(b *
y<sub>n</sub>)
</div>
<br />
<br />
<code>a</code>, <code>b</code>, <code>c</code>, and
<code>d</code>
will be generated randomly with values between -2 and 2.
</p>
<input type="submit" value="Generate ->" />
</form>
</div>
</body>
<script>
let equation = document.getElementById("attractor-equation");
equation.addEventListener("change", () => {
let equationDefinition = document.getElementById(
"attractor-equation-definition"
);
if (equation.value === "Clifford") {
equationDefinition.innerHTML = `
x<sub>n+1</sub> = sin(a * y<sub>n</sub>) + c * cos(a * x<sub>n</sub>)<br/>
y<sub>n+1</sub> = sin(b * x<sub>n</sub>) + d * cos(b * y<sub>n</sub>)`;
} else {
equationDefinition.innerHTML = `
x<sub>n+1</sub> = sin(a * y<sub>n</sub>) - cos(b * x<sub>n</sub>)<br/>
y<sub>n+1</sub> = sin(c * x<sub>n</sub>) - cos(d * y<sub>n</sub>)
`;
}
});
</script>
</html>