-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork.html
270 lines (234 loc) · 10.2 KB
/
work.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
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="assets/fonts/Playfair/stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="assets/fonts/Calibre/stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="shortcut icon" type="image/png" href="assets/images/favicon.png"/>
<head>
<title>Work</title>
</head>
<body>
<div id="loadingLine"></div>
<div class="bar top"></div>
<div class="bar bottom"></div>
<div class="container">
<div id="nav">
<div id="name">
<img src="assets/images/wong-chinese.png"/>
<span>BRYAN WONG</span>
</div>
<div class="links">
<div class="link">
<a href="/">HOME</a>
</div>
</div>
</div>
<div class="wrapper main ">
<div id="container">
<div id="instructions">
<span>CLICK AND HOLD</span>
</div>
</div>
<div class="line"></div>
<div class="arrow">
<img src="assets/images/arrow.png"/>
</div>
</div>
<div class="work">
<div class="project">
<div class="domImage">
<img src="assets/images/fruits.png"/>
</div>
<header>PHARM PHRESH</header>
<p>Pharm Phresh is the juiciest music launchpad on the internet. Users can create beats or watch the fruits dance to Nice Feeling's "Fresh." We built the application with Three.js and implemented the loops/sounds with the Web Audio API. I also wrote some custom shaders in GLSL to achieve a pixelation and wavified effect in the music video. Role: project lead and developer. <span class="bold">FWA of the day 01/04/17.</span></p>
<div class="links">
<a target="_blank" href="http://fruits.dance">SITE</a>
<a target="_blank" href="https://medium.com/@bryanw0ng/pharm-phresh-62a526d8564">CASE</a>
<a target="_blank" href="https://thefwa.com/cases/pharm-phresh">FWA</a>
</div>
</div>
<div class="project">
<div class="domImage">
<img src="assets/images/lahacks.svg"/>
</div>
<header>LA Hacks</header>
<p>I worked on design/development for lahacks.com. Users create an account and apply for the hackathon using our custom application form. We used React/Redux to implement the user application form and an internal system for admins to grade applications. The full site is available below.</p>
<div class="links">
<a target="_blank" href="http://lahacks.com">SITE</a>
</div>
</div>
<div class="project">
<div class="domImage">
<img src="assets/images/playground.png"/>
</div>
<header>PLAYGROUND</header>
<p>This is where I put all my WebGL sketches/experiments. Topics covered in here include: shape generation using Perlin noise/fractal brownian motion, particle systems, image distortion, procedurally-generated terrain, music visualization, instancing and morph targets.</p>
<div class="links">
<a target="_blank" href="http://wongbryan.github.io/playground">DEMOS</a>
</div>
</div>
<div class="project">
<div class="domImage">
<img src="assets/images/pixels.png"/>
</div>
<header>PIXEL SHADER</header>
<p>I recently wrote a pixel shader for the Three.js library. The shader is used for post processing scenes and is written in GLSL. I also included an example of its use.</p>
<div class="links">
<a target="_blank" href="https://threejs.org/examples/?q=post#webgl_postprocessing_pixel">REPO</a>
<a target="_blank" href="http://wongbryan.github.io/playground/pixel.html">EXAMPLE</a>
</div>
</div>
<div class="project">
<div class="domImage">
<img src="assets/images/square.png"/>
</div>
<header>MUSIC VISUALIZER</header>
<p>Simple music visualizer/particle system. The particles morph into different objects when you click on them and react to the music as it plays. To morph the objects, I fed an array of vertex positions and morph targets to a vertex shader and interpolated the vertex positions. I then updated the morph targets each time the object changed shapes.</p>
<div class="links">
<a target="_blank" href="http://wongbryan.github.io/playground/88.html">PT. 1</a>
<a target="_blank" href="http://wongbryan.github.io/playground/morph.html">PT. 2</a>
</div>
</div>
<div class="project">
<div class="domImage">
<img src="assets/images/acm.png"/>
</div>
<header>ACM Design</header>
<p>ACM is the largest computer science organization at UCLA. As a designer for ACM, I worked on developing its brand and crafting a styleguide for things like the website, banners and other ACM-related assets.</p>
<div class="links">
<a target="_blank" href="https://uclaacm.github.io/Styleguide/">GUIDE</a>
</div>
</div>
<div class="project">
<div class="domImage">
<img src="assets/images/fish2.png"/>
</div>
<header>PORTFOLIO TEMPLATE</header>
<p>Creative Labs hosted a portfolio building workshop in which we taught beginner web developers how to build their own portfolio site. I built a simple template for them to use, where they can put their personal proejcts.</p>
<div class="links">
<a target="_blank" href="http://wongbryan.github.io/portfolio-template">SITE</a>
</div>
</div>
<div class="project">
<div class="domImage">
<img src="assets/images/punpun2.png"/>
</div>
<header>JOHN MCNEIL STUDIO</header>
<p>As a web developer at John McNeil Studio, I worked on the Annex's home page and a 360 VR experience for CA Technologies. We used Threejs to build the experience.</p>
<div class="links">
<a target="_blank" href="http://theannex.io/">SITE</a>
</div>
</div>
<div class="project">
<div class="domImage">
<img src="assets/images/heart.png"/>
</div>
<header>XIN XIN XIN</header>
<p>Birthday present I made for my mom. "Xin" means "heart" in Chinese, and there are three because my mom has three sons. Each "heart" character shows a memory/quote I have of her when you click on it. I used Threejs to import the "heart" character model, then wrote some cool-looking fragment shaders for each heart. Some of the fragment shaders are from Shadertoy (not by me).</p>
<div class="links">
<a target="_blank" href="http://wongbryan.github.io/0831">DEMO</a>
</div>
</div>
<div class="project">
<div class="domImage">
<img src="assets/images/papaya.png"/>
</div>
<header>CREATIVE LABS WEBSITE</header>
<p>Creative Labs is an organization at UCLA that brings creatives together. Each quarter we have a series of projects (web, VR, mobile apps, etc.) that are open for anyone to work on. I did the website and branding book this year. Why do they both look like fruit catalogs? No one knows. The website again uses Threejs to set up a WebGL scene, and the wavy cloth is rendered by displacing vertices with some Perlin noise and fractal brownian motion.</p>
<div class="links">
<a target="_blank" href="http://uclacreatives.github.io">SITE</a>
<a target="_blank" href="https://www.behance.net/gallery/57438157/Creative-Labs-Brand-Identity?">BOOK</a>
</div>
</div>
<div class="project">
<div class="domImage">
<img src="assets/images/atom.png"/>
</div>
<header>PHYSICAL STATES</header>
<p>I worked on a molecule visualizer using Threejs. We immerse the user in a space filled with certain molecules floating around. The idea was to represent different substances with different environments. This was my first project with 3D graphics, so many of the effects are achieved pretty inefficiently. Now that I understand how the graphics pipeline works, I would do many of the same effects on the GPU to avoid bottlenecks.</p>
<div class="links">
<a target="_blank" href="http://physicalstates.io">DEMO</a>
</div>
</div>
<div class="project">
<div class="domImage">
<img src="assets/images/punpun.png"/>
</div>
<header>A DAY IN LA</header>
<p>This is an interactive narrative set in Los Angeles. The user goes through different scenes in LA, such as Santa Monica beach, a rooftop bar and Hollywood.</p>
<div class="links">
<a target="_blank" href="https://uclacreativelabs.github.io/a-day-in-la/">DEMO</a>
</div>
</div>
<div class="project">
<div class="domImage">
<img src="assets/images/hoofprint.png"/>
</div>
<header>THE HOOFPRINT</header>
<p>News magazine I worked on in high school!</p>
<div class="links">
<a target="_blank" href="https://www.behance.net/gallery/49769431/The-Hoofprint">GALLERY</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="vsh" id="vertexShader">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script type="fsh" id="fragmentShader">
uniform sampler2D texture;
uniform sampler2D noise;
uniform float magnitude;
uniform float time;
uniform float speed;
uniform vec2 scale;
uniform vec2 mouse;
uniform vec2 resolution;
varying vec2 vUv;
void main(){
vec2 st = gl_FragCoord.xy/resolution;
/*get displacement w perlin noise*/
vec4 map = texture2D(noise, vUv + time*speed*.01);
map -= 0.5;
/*add sin movement to displacement for slight wave effect*/
map.xy *= sin(vUv.y*100.+time*speed);
map.xy *= scale * .8 * magnitude;
/*distortion from mouse*/
float radius = .05;
float dist = length(st-mouse);
float inCircle = step(dist, radius);
float extraDistort = (radius-dist)*inCircle*.5;
map += extraDistort;
vec4 color = texture2D(texture, vec2(vUv.x - map.x, vUv.y - map.y));
gl_FragColor = color;
}
</script>
<script src="bower_components/three.js/build/three.min.js"></script>
<script src="bower_components/three.js/examples/js/controls/OrbitControls.js"></script>
<script src="js/data.js"></script>
<script src="js/render.js"></script>
<script src="js/ui.js"></script>
<script>
init();
window.addEventListener('load', function(){
var line = document.getElementById('loadingLine');
var bars = document.getElementsByClassName('bar');
var top = bars[0], bottom = bars[1];
top.classList.add('openTop');
bottom.classList.add('openBottom');
line.style.transform = "translate(-50%, -50%) scaleX(1)";
setTimeout(function(){
line.style.display = "none";
}, 700);
})
initImage('robot');
animate();
</script>
</html>