-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
119 lines (98 loc) · 2.99 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
<html>
<head>
<link rel="shortcut icon" href="https://prideout.net/assets/favicon.png">
<title>par_streamlines</title>
</head>
<body>
<style>
body {
background-color: #f0f0f0;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
canvas, #streamlines-img {
width: 300px;
height: 150px;
}
</style>
<p>
Click any canvas to convert it into an image.
</p>
<canvas id="gradient-0"></canvas><hr>
<canvas id="wireframe-0"></canvas><hr>
<canvas id="gradient-1"></canvas><hr>
<canvas id="closed-0"></canvas><hr>
<canvas id="endcap-0"></canvas>
<canvas id="endcap-1"></canvas><hr>
<canvas id="noisy-0"></canvas>
<canvas id="noisy-1"></canvas><hr>
<canvas id="streamlines-0"></canvas>
<canvas id="streamlines-1"></canvas><hr>
<canvas id="curves-0"></canvas>
<canvas id="curves-1"></canvas>
<canvas id="curves-2"></canvas><hr>
<script src="streamlines.js"></script>
<script>
function isScrolledIntoView(el) {
const rect = el.getBoundingClientRect();
const elemTop = rect.top;
const elemBottom = rect.bottom;
// Only completely visible elements return true:
const visible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
// Partially visible elements return true:
//const visible = elemTop < window.innerHeight && elemBottom >= 0;
return visible;
}
const wasm = Streamlines();
const demo_map = {
"wireframe": 0,
"gradient": 1,
"closed": 2,
"endcap": 3,
"noisy": 4,
"streamlines": 5,
"curves": 6,
};
document.addEventListener("click", (evt) => {
const el = evt.target;
if (el && el.tagName == "CANVAS") {
var imgurl = el.toDataURL("image/png");
var imgel = document.createElement("img");
imgel.src = imgurl;
imgel.style.border = "solid 2px blue";
var anchorel = document.createElement("a");
anchorel.href = imgurl;
anchorel.download = el.id + ".png";
anchorel.innerText = "download";
el.parentNode.replaceChild(anchorel, el);
anchorel.click();
anchorel.parentNode.replaceChild(imgel, anchorel);
}
});
function invoke_fallback() {
const els = [...document.getElementsByTagName("canvas")];
els.forEach((canvas, canvas_index) => {
var imgel = document.createElement("img");
imgel.src = "images/" + canvas.id + ".png";
canvas.parentNode.replaceChild(imgel, canvas);
});
}
function start_all_demos() {
const els = [...document.getElementsByTagName("canvas")];
const ids = els.map(el => el.id)
ids.forEach((canvas_id, canvas_index) => {
const variant = parseInt(canvas_id.split("-")[1]);
const demo_type = demo_map[canvas_id.split("-")[0]];
wasm._start(demo_type, canvas_index, variant);
});
const draw = () => {
ids.forEach((canvas_id, canvas_index) => {
const el = els[canvas_index];
wasm._draw(canvas_index, isScrolledIntoView(el));
});
window.requestAnimationFrame(draw);
};
draw();
}
</script>
</body>
</html>