-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
116 lines (109 loc) · 5.2 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
<!DOCTYPE html>
<style type="text/css">
.inner {
position: absolute;
}
html, body {
height: 100%;
margin: 0;
}
</style>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
<meta charset="UTF-8">
<title>Mushroom atlas</title>
<script id="fxhash-snippet">
//---- do not edit the following code (you can indent as you wish)
let alphabet = "123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ"
var fxhash = "oo" + Array(49).fill(0).map(_=>alphabet[(Math.random()*alphabet.length)|0]).join('')
let b58dec = str=>[...str].reduce((p,c)=>p*alphabet.length+alphabet.indexOf(c)|0, 0)
let fxhashTrunc = fxhash.slice(2)
let regex = new RegExp(".{" + ((fxhash.length/4)|0) + "}", 'g')
let hashes = fxhashTrunc.match(regex).map(h => b58dec(h))
let sfc32 = (a, b, c, d) => {
return () => {
a |= 0; b |= 0; c |= 0; d |= 0
var t = (a + b | 0) + d | 0
d = d + 1 | 0
a = b ^ b >>> 9
b = c + (c << 3) | 0
c = c << 21 | c >>> 11
c = c + t | 0
return (t >>> 0) / 4294967296
}
}
var fxrand = sfc32(...hashes)
// call this method to trigger the preview
function fxpreview() {
console.log("fxhash: TRIGGER PREVIEW")
}
//---- /do not edit the following code
</script>
<!-- if you need to import js scripts do it here -->
</head>
<body style="background-color:grey;">
<script language="javascript" type="text/javascript" src="./lib/perlin.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/build/three.js"></script>
<script language="javascript" type="text/javascript" src="./shroom.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/examples/js/shaders/CopyShader.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/examples/js/postprocessing/Pass.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/examples/js/postprocessing/ShaderPass.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/examples/js/controls/OrbitControls.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/examples/js/effects/OutlineEffect.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/examples/js/postprocessing/OutlinePass.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/examples/js/postprocessing/EffectComposer.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/examples/js/shaders/FilmShader.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/examples/js/postprocessing/FilmPass.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/examples/js/postprocessing/RenderPass.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/examples/js/utils/BufferGeometryUtils.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/examples/js/modifiers/SimplifyModifier.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/examples/js/math/ConvexHull.js"></script>
<script language="javascript" type="text/javascript" src="./lib/three/examples/js/geometries/ConvexGeometry.js"></script>
<script language="javascript" type="text/javascript" src="./fungi_vocab.js"></script>
<script language="javascript" type="text/javascript" src="./fungi_name.js"></script>
<script language="javascript" type="text/javascript" src="./text.js"></script>
<script language="javascript" type="text/javascript" src="./mushroom_atlas.js"></script>
<script language="javascript" type="text/javascript" src="./shroom_types.js"></script>
<script language="javascript" type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
fxpreview();
// function fn_onclick() {
// if(!audioContext) {
// engine_run();
// }
// }
// document.body.addEventListener('click', fn_onclick, true);
document.body.onkeyup = function(e){
if(e.keyCode == 83){
renderer.clear();
renderer.setSize( 2048, 2048 );
outline.setSize( 2048, 2048 );
composer2048.render();
renderer.domElement.toBlob(function(blob){
var a = document.createElement('a');
var url = URL.createObjectURL(blob);
a.href = url;
a.download = 'mushroom_atlas_' + shroom_name.replaceAll(' ', '_') + '_' + maID + '.png';
a.click();
}, 'image/png', 1.0);
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.clear();
composer.render();
}
}
</script>
<main>
<div class="outer">
<div class="inner">
<div id="background_image">
</div>
</div>
<div class="inner">
<div id="noise_beast">
</div>
</div>
</div>
</main>
</body>
</html>