-
-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathindex.html
125 lines (119 loc) · 6.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>• Atomize •</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="Description" content="GPGPU elastic-viscuous particles simulation.
WebGL - Three.js">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0"/>
<meta name="theme-color" content="#020406"/>
<meta property="og:image" content="https://github.com/sciecode/sciecode.github.io/raw/master/assets/images/logo.png">
<meta property="og:site_name" content="ScieCode">
<meta property="og:type" content="object">
<meta property="og:title" content="• Atomize •">
<meta property="og:url" content="https://sciecode.github.io/">
<meta property="og:description" content="GPGPU elastic-viscuous particles simulation.
WebGL - Three.js">
<link rel="stylesheet" type="text/css" href="assets/css/waves.css">
<script src="vendor/mobile-detect.min.js"></script>
<script src="vendor/WebGL.js"></script>
</head>
<body class="starting hid">
<div id="video-container"></div>
<h1 id="brand" class="brandPos brandInit nodelay"><span>•</span> Atomize <span>•</span></h1>
<div id="quality" class="inactive delay">
<div class="dropbtn">
<div id="quality_label">Quality:</div>
<div class="options">
<span id="quality_value">low <span class="pn">65k</span><span class="caret"></span></span>
<ul id="quality_list">
<li><a class="qualities selected" href="javascript:void(0)" data-quality="0">low</a></li>
<li><a class="qualities" href="javascript:void(0)" data-quality="1">medium</a></li>
<li><a class="qualities" href="javascript:void(0)" data-quality="2">high</a></li>
<li><a class="qualities" href="javascript:void(0)" data-quality="3">ultra</a></li>
</ul>
</div>
</div>
</div>
<div id="footer" class="inactive delay">
<h4 class="footers">ScieCode / </h4>
<a id="github" class="footers" target="_blank" rel="noopener" href="https://github.com/sciecode/sciecode.github.io"></a>
<a id="twitter" class="footers" target="_blank" rel="me" href="https://twitter.com/sciecode"></a>
<a id="mastodon" class="footers" target="_blank" rel="me" href="https://mastodon.gamedev.place/@sciecode"></a>
</div>
<div id="settings_menu" class="menu_inactive inactive delay">
<div class="upper_menu hover_menu"></div>
<div class="middle_menu hover_menu"></div>
<div class="lower_menu hover_menu"></div>
</div>
<div id="settings" class="init_settings">
<h3 class="settings_header">Settings</h3>
<div class="settings_options">
<ul>
<li class="settings_items selected_item radius_item">
<h3>Sphere Radius</h3><span id="rad_title_value">30</span>
<p>This property controls the size of the mouse sphere. The result of these changes are only noticeable after interacting with the waveform. </p>
<h4 class="rad_range">Radius:<span id="rad_value">30</span></h4>
<div id="ball_sphere">
<div id="ball_sphere_inside"></div>
</div>
<div class="div_slider">
<span class="vert_span">
<input type="range" id="rad_slider" class="rad_slider" min="10" max="50" value="30" />
</span>
</div>
</li>
<li class="settings_items viscosity_item">
<h3>Fluid Viscosity</h3><span id="vis_title_value">12</span>
<p>This property determines how resistant to velocity changes is the fluid. A higher viscosity will result in a slower moving particle system - like honey. A lower viscosity, though, will result in a faster moving system - like water. </p>
<h4 class="vis_range">Viscosity:<span id="vis_value">12</span></h4>
<div class="vis_div_slider">
<span class="horz_span">
<input type="range" id="vis_slider" class="vis_slider" min="5" max="30" value="12" />
</span>
</div>
<div id="fluid_ball"></div>
<div id="fluid_box"></div>
</li>
<li class="settings_items elasticity_item">
<h3>Elastic Intensity</h3><span id="ela_title_value">15</span>
<p>This property controls how strong is the force pulling the particles back to the waveform. A higher value can accumulate enough speed to overshoot the waveform and create a sligshot effect. </p>
<h4 class="ela_range">Elasticity:<span id="ela_value">15</span></h4>
<div class="ela_div_slider">
<span class="horz_span">
<input type="range" id="ela_slider" class="ela_slider" min="5" max="50" value="15" />
</span>
</div>
</li>
<li class="settings_items color1_item">
<h3>Gradient Colors</h3><span id="color1_value"></span><span id="color2_value"></span>
<div class="color_div_slider">
<span class="horz_color_span">
<input type="range" id="color1_slider" class="color_slider" min="0" max="359" value="199" />
<div id="color1_box"></div>
</span>
<span class="horz_color_span">
<input type="range" id="color2_slider" class="color_slider" min="0" max="359" value="125" />
<div id="color2_box"></div>
</span>
</div>
</li>
<li class="settings_items motion_blur_item">
<h3>Motion Blur</h3><span id="motion_blur_title_value">Enabled</span>
<p>This option slightly blurs and leaves a trail behind moving object. Helps to display a more realistic and believable image, especially for devices running at a low framerate.</p>
<h4 class="mb_range">Motion Blur:<span id="mb_value">Enabled</span></h4>
</li>
</ul>
</div>
</div>
<div id="overlay">
<h2 id="experience">Experiment</h2>
<h4 id="intro"><span class="bold">Atomize</span> was conceptualized to simulate elastic systems under the effect of viscuous fluids. <br /> <br /> This means we want you to have fun with some <span class="bold">particles</span>.</h4>
<h4 id="st_notice" class="hidden bold">Hardware Acceleration not enabled or GPU not available.</h4>
<h4 id="st_steps" class="hidden">Try enabling GPU rendering under your browser.</h4>
<h4 id="st_btn">start experience</h4>
</div>
<script src="build/Atomize.min.js"></script>
</body>
</html>