Skip to content

Instantly share code, notes, and snippets.

@merttoka

merttoka/index.html

Created October 26, 2016 19:55
Show Gist options
  • Save merttoka/b7469cea680b73863e47dd849d2c5e84 to your computer and use it in GitHub Desktop.
Save merttoka/b7469cea680b73863e47dd849d2c5e84 to your computer and use it in GitHub Desktop.
Download ZIP
MAT200C HW4
Raw
index.html
<html>
<script src = "https://rawgit.com/wolftype/200c/gh-pages/js/gfx_v02.js"></script>
<script type="text/javascript">
var app = new GFX.App();
var model;
/// On Initialization of the WebGL Application (this happens once)
app.onInit = function(){
this.scene.color = [0.85,0.85,0.85,1.0];
var vertices = new Float32Array( [
0.404509,-0.866025,-0.293893, 0.154508,-0.866025,-0.475528, -0.154509,-0.866025,-0.475528, -0.404509,-0.866025,-0.293893, -0.500000,-0.866025,0.000000, -0.404509,-0.866025,0.293893, -0.154508,-0.866025,0.475528, 0.154509,-0.866025,0.475528, 0.404509,-0.866025,0.293893, 0.500000,-0.866025,0.000000, 0.700629,-0.500000,-0.509037, 0.267617,-0.500000,-0.823639, -0.267617,-0.500000,-0.823639, -0.700629,-0.500000,-0.509037, -0.866026,-0.500000,0.000000, -0.700629,-0.500000,0.509037, -0.267617,-0.500000,0.823639, 0.267617,-0.500000,0.823639, 0.700629,-0.500000,0.509037, 0.866025,-0.500000,0.000000, 0.809017,0.000000,-0.587785, 0.309017,0.000000,-0.951057, -0.309017,0.000000,-0.951057, -0.809017,0.000000,-0.587785, -1.000000,0.000000,0.000000, -0.809017,0.000000,0.587785, -0.309017,0.000000,0.951057, 0.309017,0.000000,0.951057, 0.809017,0.000000,0.587785, 1.000000,0.000000,0.000000, 0.700629,0.500000,-0.509037, 0.267617,0.500000,-0.823639, -0.267617,0.500000,-0.823639, -0.700629,0.500000,-0.509037, -0.866026,0.500000,0.000000, -0.700629,0.500000,0.509037, -0.267617,0.500000,0.823639, 0.267617,0.500000,0.823639, 0.700629,0.500000,0.509037, 0.866025,0.500000,0.000000, 0.404509,0.866025,-0.293893, 0.154508,0.866025,-0.475528, -0.154509,0.866025,-0.475528, -0.404509,0.866025,-0.293893, -0.500000,0.866025,0.000000, -0.404509,0.866025,0.293893, -0.154508,0.866025,0.475528, 0.154509,0.866025,0.475528, 0.404509,0.866025,0.293893, 0.500000,0.866025,0.000000, 0.000000,-1.000000,0.000000, 0.000000,1.000000,0.000000
]);
var texCoord = new Float32Array([
0.000000,0.166667, 0.100000,0.166667, 0.200000,0.166667, 0.300000,0.166667, 0.400000,0.166667, 0.500000,0.166667, 0.600000,0.166667, 0.700000,0.166667, 0.800000,0.166667, 0.900000,0.166667, 1.000000,0.166667, 0.000000,0.333333, 0.100000,0.333333, 0.200000,0.333333, 0.300000,0.333333, 0.400000,0.333333, 0.500000,0.333333, 0.600000,0.333333, 0.700000,0.333333, 0.800000,0.333333, 0.900000,0.333333, 1.000000,0.333333, 0.000000,0.500000, 0.100000,0.500000, 0.200000,0.500000, 0.300000,0.500000, 0.400000,0.500000, 0.500000,0.500000, 0.600000,0.500000, 0.700000,0.500000, 0.800000,0.500000, 0.900000,0.500000, 1.000000,0.500000, 0.000000,0.666667, 0.100000,0.666667, 0.200000,0.666667, 0.300000,0.666667, 0.400000,0.666667, 0.500000,0.666667, 0.600000,0.666667, 0.700000,0.666667, 0.800000,0.666667, 0.900000,0.666667, 1.000000,0.666667, 0.000000,0.833333, 0.100000,0.833333, 0.200000,0.833333, 0.300000,0.833333, 0.400000,0.833333, 0.500000,0.833333, 0.600000,0.833333, 0.700000,0.833333, 0.800000,0.833333, 0.900000,0.833333, 1.000000,0.833333, 0.050000,0.000000, 0.150000,0.000000, 0.250000,0.000000, 0.350000,0.000000, 0.450000,0.000000, 0.550000,0.000000, 0.650000,0.000000, 0.750000,0.000000, 0.850000,0.000000, 0.950000,0.000000, 0.050000,1.000000, 0.150000,1.000000, 0.250000,1.000000, 0.350000,1.000000, 0.450000,1.000000, 0.550000,1.000000, 0.650000,1.000000, 0.750000,1.000000, 0.850000,1.000000, 0.950000,1.000000
]);
var indices = new Uint16Array([
1,2,11, 11,2,12, 2,3,12, 12,3,13, 3,4,13, 13,4,14, 4,5,14, 14,5,15, 5,6,15, 15,6,16, 6,7,16, 16,7,17, 7,8,17, 17,8,18, 8,9,18, 18,9,19, 9,10,19, 19,10,20, 10,1,20, 20,1,11, 11,12,21, 21,12,22, 12,13,22, 22,13,23, 13,14,23, 23,14,24, 14,15,24, 24,15,25, 15,16,25, 25,16,26, 16,17,26, 26,17,27, 17,18,27, 27,18,28, 18,19,28, 28,19,29, 19,20,29, 29,20,30, 20,11,30, 30,11,21, 21,22,31, 31,22,32, 22,23,32, 32,23,33, 23,24,33, 33,24,34, 24,25,34, 34,25,35, 25,26,35, 35,26,36, 26,27,36, 36,27,37, 27,28,37, 37,28,38, 28,29,38, 38,29,39, 29,30,39, 39,30,40, 30,21,40, 40,21,31, 31,32,41, 41,32,42, 32,33,42, 42,33,43, 33,34,43, 43,34,44, 34,35,44, 44,35,45, 35,36,45, 45,36,46, 36,37,46, 46,37,47, 37,38,47, 47,38,48, 38,39,48, 48,39,49, 39,40,49, 49,40,50, 40,31,50, 50,31,41, 2,1,51, 3,2,51, 4,3,51, 5,4,51, 6,5,51, 7,6,51, 8,7,51, 9,8,51, 10,9,51, 1,10,51, 41,42,52, 42,43,52, 43,44,52, 44,45,52, 45,46,52, 46,47,52, 47,48,52, 48,49,52, 49,50,52, 50,41,52
]);
// to start indices from 0
for(var i = 0; i < indices.length; i++){
indices[i]--;
}
model = new GFX.Mesh();
model.load(vertices, indices);
model.loadUV(texCoord);
}
// Render the scene
app.onRender = function() {
var scene = this.scene;
//begin scene render, send matrices over to shader uniform
scene.begin();
//Send Time Variable over to GPU
scene.shader.setUniformFloat("u_time", scene.time );
scene.matrix.translate(0,-.5,0);
for (var i =0;i < 15; ++i){
var t = i/15;
scene.matrix.push();
scene.matrix.translate((t-.6)*5,
(t-.5)*1.5,
(t-.5)*2);
scene.matrix.rotate(t*Math.sin(scene.time)*5, 0,0,1);
scene.matrix.scale(.2,.2,.2);
scene.matrix.push();
scene.matrix.translate((t-.5)*4,
(t-.5)*3,
(t-.5)*2);
scene.matrix.push();
scene.shader.setUniformFloat("selector", -1.+t);
scene.matrix.rotate((1-t)*Math.sin(scene.time)*5, 0,0,1);
scene.matrix.scale(1-t,1-t,1-t);
scene.draw(model);
scene.matrix.pop();
scene.matrix.push();
scene.shader.setUniformFloat("selector", 1.-t);
scene.matrix.rotate(t*Math.cos(scene.time)*5, 0,0,1);
scene.matrix.scale(t,t,t);
scene.draw(model);
scene.matrix.pop();
scene.matrix.pop();
scene.matrix.pop();
}
scene.end();
}
</script>
<!-- VERTEX SHADER -->
<script id="gfxvert" type="text/glsl">
#ifdef GL_ES
precision mediump float;
#endif
attribute vec3 position; //Position
attribute vec2 uv; //Texture;
uniform mat4 model; //Model Matrix
uniform mat4 view; //View Matrix
uniform mat4 projection; //Projection Matrix
varying vec2 vuv; //Texture Coordiante to Output to Fragment Shader
void main() {
vuv = uv;
gl_Position = projection * view * model * vec4(position, 1.0);
}
</script>
<!-- FRAGMENT SHADER -->
<script id="gfxfrag" type="text/glsl">
#ifdef GL_ES
precision mediump float;
#endif
uniform float selector;
varying vec2 vuv;
void main() {
vec2 st = vuv;
vec3 color = vec3(st.x*0.5+.45+selector/3.);
gl_FragColor = vec4(color, 1.0);
}
</script>
<body onload=app.start()>
<canvas id="gfxcanvas" width=960 height=500> No <code> canvas </code> tag support </canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment