-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (135 loc) · 7.72 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>brain4D</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/gh-fork-ribbon.css" />
<link rel="stylesheet" type="text/css" href="css/brain4D.css" />
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/gl-matrix-min.js"></script>
<script type="text/javascript" src="js/ucsv-min.js"></script>
<script type="text/javascript" src="js/brain4D.js"></script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
uniform vec2 screenSize; // screen size in pixel
varying vec4 realPos; // real (unprojected) particle position
varying float projSize; // projected particle size
varying vec2 projPos; // projected particle position
void main(void) {
// == 1. color and alpha ==
float red = 1.0;
float blue = 1.0;
float green = 1.0;
float alpha = max(0.0, 1.0 - abs(realPos[3])) / (1.0 + 0.5 * max(0.0, -realPos[2]));
if (realPos[3] > 0.0) {
blue = 1.0 - realPos[3];
green = 1.0 - realPos[3];
} else {
red = 1.0 + realPos[3];
green = 1.0 + realPos[3];
}
// == 2. circle borders + sharpness ==
// position in the particle square
vec2 pos = mod(gl_FragCoord.xy - (vec2(1.0) + projPos) * screenSize / 2.0 + vec2(projSize / 2.0), vec2(projSize)) - vec2(projSize / 2.0);
// distance from the particle center
float dist_squared = dot(pos, pos);
// point alpha interpolation + sharpness distances
float e1 = projSize / (2.0 + 5.0 * realPos[2] * realPos[2]);
float e2 = projSize / 2.0;
// fading of circle borders
float fade = 1.0 - smoothstep(e1 * e1, e2 * e2, dist_squared);
// == 3. final color ==
gl_FragColor = vec4(red, green, blue, fade * alpha);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec4 aVertexPosition; // input: particle position before movement/scaling
uniform mat4 rotMatrix; // rotation matrix (real position)
uniform vec4 transVec; // translation matrix (real position)
uniform mat4 projMatrix; // projection matrix (real to projected)
uniform float pointSize; // point size of projection
varying vec4 realPos; // real (unprojected) particle position
varying float projSize; // projected particle size
varying vec2 projPos; // projected particle position
void main(void) {
// == 1. calculate real (unprojected) position ==
// we cannot use simple matrix multiplication because our real position has 4 (instead of 3) dimensions
realPos = rotMatrix * aVertexPosition + transVec;
// == 2. project particle ==
gl_Position = projMatrix * vec4(vec3(realPos), 1.0);
projPos = gl_Position.xy;
// == 3. particle size ==
projSize = max(0.0, pointSize / (4.0 - realPos[2]));
gl_PointSize = projSize;
}
</script>
</head>
<body>
<div id="container">
<div id="browserMessage" class="message">
<div>
<h2>Incompatible browser</h2>
<p>Your browser is not compatible with this web application. Use the recent version of a modern, mainstream browser (e.g. <a href="https://www.google.com/chrome">Chrome</a> or <a href="https://www.mozilla.org/firefox">Firefox</a>) and activate JavaScript to use this application. Please also ensure that you use a fully functional graphic driver.</p>
</div>
</div>
<div id="loadMessage" class="message">
<div>
<h2>Load application</h2>
<p>Please wait a moment...</p>
</div>
</div>
<div id="main">
<div id="crosshair"></div>
<canvas id="glcanvas"></canvas>
</div>
<div id="sidebar">
<div>
<div id="tools">
<h1><span class="logoB">b</span><span class="logoR">r</span><span class="logoA">a</span><span class="logoI">i</span><span class="logoN">n</span><span class="logo4">4</span><span class="logoD">D</span></h1>
<p class="slogan">nice 4D scatterplot</p>
<div class="panel">
<h2>controls</h2>
<p class="buttonHeader">mode (<img src="img/key1.png" alt="keyboard 1" />, <img src="img/key2.png" alt="keyboard 2" />, <img src="img/key3.png" alt="keyboard 3" />)</p>
<ul class="buttonList">
<li class="switcher mode1 button button-3">Move</li><li class="switcher mode2 button button-3">Rotate</li><li class="switcher mode3 button button-3">Scale</li>
</ul>
<p class="buttonHeader">w rotation axis (<img src="img/mouse2.png" alt="middle mouse key" />)</p>
<ul class="buttonList">
<li class="switcher axis0 button button-3">X</li><li class="switcher axis1 button button-3">Y</li><li class="switcher axis2 button button-3">Z</li>
</ul>
<p class="buttonHeader">view</p>
<ul class="buttonList">
<li id="resetButton" class="button button-1">Reset (<img src="img/keyR.png" alt="keyboard r" />)</li>
</ul>
</div>
<div class="panel">
<h2>data</h2>
<p>Load prepared data:</p>
<select id="datasets"></select>
<p id="prepared_description"></p>
<span class="or">OR</span>
<div id="dropzone">Drop a CSV file here</div>
</div>
<div class="panel">
<h2>instructions</h2>
<img id="controls" src="img/controls.png" alt="description of controls and visual representation" />
</div>
</div>
<div id="legalPlaceholder"></div>
<div id="legal">
<p>Coded by <a href="http://crepererum.net/" target="_blank">crepererum</a></p>
<p>using <a href="http://glmatrix.net/" target="_blank">glMatrix</a>, <a href="http://www.uselesscode.org/javascript/csv/" target="_blank">Ucsv.js</a>, <a href="http://necolas.github.com/normalize.css/" target="_blank">normalize.css</a> and <a href="http://modernizr.com/" target="_blank">Modernizr</a></p>
</div>
</div>
</div>
<div id="clear"></div>
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon" style="background:black;">
<a href="https://github.com/crepererum/brain4D" target="_blank">Fork me on GitHub!</a>
</div>
</div>
</div>
</body>
</html>