-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (99 loc) · 5.94 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
<!DOCTYPE html>
<html>
<head>
<title>Symmetry in Chaos</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body { color: white; font-family: Arial, sans-serif; }
.canvas { margin: auto; display: block; }
.params { display: grid; grid-template-columns: 5em 3em auto; margin: 30px; margin-top: 0;}
.logo { flex: 0 0 24px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='white' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;}
.header { flex-grow: 1; text-align: center; margin: 0px;}
.headerbar { display: flex; margin: 30px; margin-bottom: 10px;}
</style>
</head>
<body style="background-color: #000;">
<div class="headerbar">
<h3 class="header">Symmetry in Chaos</h3><a href="https://github.com/sophonet/symmetryinchaos" class="logo"></a>
</div>
<!-- Parameter-->
<div id="params" class="params">
<div>dataset</div><div></div> <select name="dataset" id="dataset"></select>
<div>lambda</div><output id="lambdavalue" for="lambda"></output> <input style="width: 100%" type="range" id="lambda" name="lambda" min="-20.0" max="20.0" step="0.01">
<div>alpha</div><output id="alphavalue"></output><input style="width: 100%" type="range" id="alpha" name="alpha" min="-20.0" max="20.0" step="0.01">
<div>beta</div><output id="betavalue"></output><input style="width: 100%" type="range" id="beta" name="beta" min="-20.0" max="20.0" step="0.01">
<div>gamma</div><output id="gammavalue"></output><input style="width: 100%" type="range" id="gamma" name="gamma" min="-20.0" max="20.0" step="0.01">
<div>delta</div><output id="deltavalue"></output><input style="width: 100%" type="range" id="delta" name="delta" min="-20.0" max="20.0" step="0.01">
<div>omega</div><output id="omegavalue"></output><input style="width: 100%" type="range" id="omega" name="omega" min="-20.0" max="20.0" step="0.01">
<div>n</div><output id="nvalue"></output><input style="width: 100%" type="range" id="n" name="n" min="3" max="40">
<div>p</div><output id="pvalue"></output><input style="width: 100%" type="range" id="p" name="p" min="0" max="40">
<div>extent</div><output id="extentvalue"></output><input style="width: 100%" type="range" id="extent" name="extent" min="0" max="10" step="0.1">
</div>
<!-- Create the canvas that the C++ code will draw into -->
<canvas id="canvas" oncontextmenu="event.preventDefault()" class="canvas"></canvas>
<!-- Allow the C++ to access the canvas element -->
<script type='text/javascript'>
var Module = {
canvas: (function() { return document.getElementById('canvas'); })(),
// Quick hack to wait until SDL surface has been prepared inside main()
onRuntimeInitialized: (function() {
setTimeout(() => {
select_dataset();
},500)})
};
</script>
<!-- Add the javascript glue code (index.js) as generated by Emscripten -->
<script src="index.js"></script>
<script language="javascript">
var symmetry_datasets = null;
const parameters = ["lambda", "alpha", "beta", "gamma", "delta", "omega", "n", "p", "extent"];
dropdown = document.getElementById('dataset')
dropdown.addEventListener("change", select_dataset, false);
parameters.forEach(parameter => {
document.getElementById(parameter).addEventListener("input", change_parameters, false);
});
function update_labels(params) {
parameters.forEach(parameter => {
document.getElementById(parameter+"value").value = params[parameter];
})
}
function change_parameters() {
const dataset = symmetry_datasets[dropdown.value];
const params = { palette: dataset.palette };
parameters.forEach(parameter => {
params[parameter] = +document.getElementById(parameter).value;
});
update_labels(params);
try {
Module.ccall('launch', null, ['string'],[JSON.stringify(params)]);
}
catch(error) {
console.log("Error: " + error);
}
};
function select_dataset() {
const dataset = symmetry_datasets[dropdown.value];
parameters.forEach(parameter => {
document.getElementById(parameter).value = dataset[parameter];
});
update_labels(dataset);
Module.ccall('launch', null, ['string'],[JSON.stringify(dataset)]);
};
function set_datasets(datasets) {
symmetry_datasets = datasets;
dropdown = document.getElementById('dataset')
for(var dataset in datasets) {
var opt = document.createElement('option');
opt.value = dataset;
opt.innerHTML = dataset;
dropdown.appendChild(opt);
}
}
fetch("datasets.json")
.then(res => res.json())
.then(datasets => set_datasets(datasets))
.catch(error => console.log(error));
</script>
</body>
</html>