-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
237 lines (225 loc) · 8.4 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<META name="keywords" content="Quazi, TowerClimb, Tower Climb, game, gamedev, indie, engineer, engineering, programming, Kevin Bergamin">
<title>Quazi (Homepage)</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<div id="wrap">
<h1>Quazi</h1>
<br>
I'm Quazi, an indie game developer with a mechanical engineering degree. You may know me as one of the creators of the game "TowerClimb". This is my website, yes, it intentionally has a Web 1.0 <b>aesthetic</b>.
<img src="/images/testimg.gif" alt="zardo" class="displayed" id="med_img">
Gotta have a cheesy gif on the homepage, right? Anyway I'm hoping to slowly add various interactive demos, cool math/physics visualizations, artistic toys, and summaries of little things I've learned over the years to this site. This is meant to be a place to display some of my coding experiments and jot down bits of knowledge in an informal way. Enjoy!
<br>
<br>
<script src="js/QZMath.js"></script>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script type="x-shader/x-vertex" id="vertexShader">
/*uniform float delta;
varying vec2 vUv;
#define PI 3.1415926535897932384626433832795
void main()
{
vUv = uv;
vec3 p = position;
p.x += sin(vUv.x*PI*2.0*2.0+delta) * 10.0;
p.y += cos(vUv.x*PI*2.0*2.0-delta) * 10.0;
//p.z += cos(vUv.x*PI*2.0+delta) * 10.0;
vec4 modelViewPosition = modelViewMatrix * vec4(p, 1.0);
gl_Position = projectionMatrix * modelViewPosition;
}*/
uniform float delta;
#define PHONG
varying vec3 vViewPosition;
#ifndef FLAT_SHADED
varying vec3 vNormal;
#endif
#include <common>
#include <uv_pars_vertex>
#include <uv2_pars_vertex>
#include <displacementmap_pars_vertex>
#include <envmap_pars_vertex>
#include <color_pars_vertex>
#include <fog_pars_vertex>
#include <morphtarget_pars_vertex>
#include <skinning_pars_vertex>
#include <shadowmap_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>
void main() {
#include <uv_vertex>
#include <uv2_vertex>
#include <color_vertex>
#include <beginnormal_vertex>
#include <morphnormal_vertex>
#include <skinbase_vertex>
#include <skinnormal_vertex>
#include <defaultnormal_vertex>
#ifndef FLAT_SHADED
vNormal = normalize( transformedNormal );
#endif
#include <begin_vertex>
#include <morphtarget_vertex>
#include <skinning_vertex>
#include <displacementmap_vertex>
transformed.x += sin(uv.x*PI*2.0*2.0+delta) * 10.0;
transformed.y += cos(uv.x*PI*2.0*2.0-delta) * 10.0;
#include <project_vertex>
#include <logdepthbuf_vertex>
#include <clipping_planes_vertex>
vViewPosition = - mvPosition.xyz;
#include <worldpos_vertex>
#include <envmap_vertex>
#include <shadowmap_vertex>
#include <fog_vertex>
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
/*uniform float delta;
varying float vOpacity;
varying vec2 vUv;
#define PI 3.1415926535897932384626433832795
void main() {
float r = sin(vUv.x*PI*2.0+delta);
float g =cos(vUv.y*PI*2.0+delta);
float b =sin(vUv.y*PI*2.0-delta);
vec3 rgb = vec3(r, g, b);
gl_FragColor = vec4(rgb, 1.0);
}*/
uniform float delta;
#define PHONG
uniform vec3 diffuse;
uniform vec3 emissive;
uniform vec3 specular;
uniform float shininess;
uniform float opacity;
#include <common>
#include <packing>
#include <dithering_pars_fragment>
#include <color_pars_fragment>
#include <uv_pars_fragment>
#include <uv2_pars_fragment>
#include <map_pars_fragment>
#include <alphamap_pars_fragment>
#include <aomap_pars_fragment>
#include <lightmap_pars_fragment>
#include <emissivemap_pars_fragment>
#include <envmap_pars_fragment>
#include <gradientmap_pars_fragment>
#include <fog_pars_fragment>
#include <bsdfs>
#include <lights_pars>
#include <lights_phong_pars_fragment>
#include <shadowmap_pars_fragment>
#include <bumpmap_pars_fragment>
#include <normalmap_pars_fragment>
#include <specularmap_pars_fragment>
#include <logdepthbuf_pars_fragment>
#include <clipping_planes_pars_fragment>
void main() {
#include <clipping_planes_fragment>
vec4 diffuseColor = vec4( diffuse, opacity );
ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
vec3 totalEmissiveRadiance = emissive;
#include <logdepthbuf_fragment>
#include <map_fragment>
#include <color_fragment>
#include <alphamap_fragment>
#include <alphatest_fragment>
#include <specularmap_fragment>
#include <normal_fragment>
#include <emissivemap_fragment>
#include <lights_phong_fragment>
#include <lights_template>
#include <aomap_fragment>
vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance;
#include <envmap_fragment>
gl_FragColor = vec4( outgoingLight, diffuseColor.a );
#include <tonemapping_fragment>
#include <encodings_fragment>
#include <fog_fragment>
#include <premultiplied_alpha_fragment>
#include <dithering_fragment>
}
</script>
<script src="js/woobly_torus.js"></script>
<div id="cent_text">
The site may look Web 1.0, but I'm going to be using lots of Web 3.0 features. Make sure you have a modern browser!
</div>
<br>
<br>
<hr>
<h2>Site Navigation</h2>
<a href="https://montreal.ubisoft.com/en/drecon-data-driven-responsive-control-of-physics-based-characters/">DReCon</a>, research I worked on concerning physics and RL, published at SIGGRAPH Asia.
<br>
<a href="WaveEq/index.html">real-time wave tracing</a>, interactive simulation of light at wavelength scale.
<br>
<a href="verlet/index.html">verlet physics</a>, interactive 3D physics using verlet integration and projection to solve constraints.
<br>
<a href="orbits/index.html">orbital mechanics</a>, basics of orbital mechanics.
<br>
<a href="matrixvis/index.html">3x3 matrix visualization</a>, visualization of matrix transforming unit cube/ standard basis.
<br>
<a href="jacobi/index.html">2x2 jacobi algorithm</a>, basics of jacobi algorithm for real symmetric 2x2 matrix diagonalization with a little interactive example.
<br>
<a href="jacobi3/index.html">3x3 jacobi algorithm</a>, interactive example of jacobi algorithm for diagonalizing real symmetric 3x3 matrices.
<br>
<a href="dogdream/index.html">dreaming of a dog</a>, visualization of a convolutional autoencoder overfitting to a single image.
<br>
<h2>Email</h2>
qz.human@gmail.com
<br>
<h2>Useful Links</h2>
<a href="https://twitter.com/_Quazi_">Twitter</a>, my twitter page.
<br>
<a href="http://store.steampowered.com/app/396640/">TowerClimb</a>, Steam page for the roguelike platformer made by my brother and I.
<br>
<a href="http://gamejolt.com/@Quazi">GameJolt</a>, my GameJolt page with some of my past games.
<br>
<a href="https://www.shadertoy.com/user/Quazi">Shadertoy</a>, my Shadertoy page with some interesting things to look at.
<br>
<a href="http://www.davioware.com/">Davioware</a>, link to my brother's website.
<br>
<a href="http://gamejolt.com/@Davioware">GameJolt</a>, link to my brother's gamejolt page.
<h2>Cool Websites</h2>
<a href="http://www.iquilezles.org/">Inigo Quilez</a>, awesome source of information on demoscene and CG programming.
<br>
<a href="http://woodgears.ca/">Matthias Wandel</a>, an awesome woodworker / tinkerer, check out his youtube channel too!
<br>
<a href="http://theorangeduck.com/">Daniel Holden</a>, machine learning and graphics programming tricks.
<br>
<a href="https://blog.tuxedolabs.com/">Dennis Gustafsson</a>, great posts about graphics and physics topics.
<br>
<a href="http://www.karlsims.com/">Karl Sims</a>, some very cool programming / math experiments.
<br>
<a href="https://threejs.org/">three.js</a>, a great WebGL javascript library, used extensively on this site.
<br>
<a href="http://www.ulillillia.us/">ulillillia</a>, an interesting read.
<br>
<a href="https://en.wikipedia.org/">Wikipedia</a>, good for finding info on anything (bet you didn't know about this).
<br>
<a href="https://thebookofshaders.com/">The Book of Shaders</a>, cool shader tricks
<br>
<a href="https://www.aori.u-tokyo.ac.jp/project/3D/index.html">
3D-CT of Deep Sea Creatures</a>, cool dataset
<br>
<a href="http://www.sci.utah.edu/cibc-software/cibc-datasets.html">
human/animal CT datasets</a>, cool dataset
<br>
<br>
<hr>
<div id="copyright_text">
© 2018.
<br>
<br>
<a href="https://commons.wikimedia.org/wiki/File:Zentralfriedhof_Vienna_-_Boltzmann.JPG" style="font-size: 85%;">1. Boltzmann via wikimedia</a>
</div>
</div>
</BODY>
</HTML>