Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

submission #5

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

submission #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4aa0355
ok
Nov 3, 2014
d50d965
video
Nov 3, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
373 changes: 23 additions & 350 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

283 changes: 283 additions & 0 deletions center_wave.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,283 @@
<html>

<head>
<title>Vertex Wave</title>
<meta charset ="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <!-- Use Chrome Frame in IE -->
</head>

<body>
<div id="message" style="position:absolute;top:100px"></div> <!-- Pixel offset to avoid FPS counter -->
<canvas id="canvas" style="border: none;" width="1024" height="768" tabindex="1"></canvas>
<script src ="js/lib/gl-matrix.js" type ="text/javascript"></script>
<script src ="js/webGLUtility.js" type ="text/javascript"></script>
<script src="js/lib/dat.gui.min.js" type="text/javascript"></script>

<script id="vs" type="x-shader/x-vertex">
attribute vec2 position;

uniform mat4 u_modelViewPerspective;
uniform float u_time;

uniform vec4 u_highCol;
uniform vec4 u_lowCol;

uniform vec4 u_center;

varying vec4 fragColor;

void main(void)
{
// NOTE : according to the WebGL standard, 0.0f is not accepted

float dist = length(position - vec2(0.5,0.5));
float s_contrib = sin(u_time*dist*.1);
float t_contrib = cos(u_time*dist*.1);

float height = s_contrib*t_contrib*dist;

// NOTE : gl_Position is always a vec4
gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
fragColor = mix(u_lowCol,u_highCol, height);
}
</script>

<script id="fs" type="x-shader/x-fragment">
precision mediump float;

uniform vec4 u_color;

varying vec4 fragColor;

void main(void)
{
// NOTE : gl_FragColor is always a vec4
gl_FragColor = fragColor;
}
</script>

<script>
// Globals
var positionLocation = 0;
var heightLocation = 1;
var u_modelViewPerspectiveLocation;
var u_heightLocation;
var u_color;
var u_highColLocation;
var u_lowColLocation;
var u_centerLocation;

var frame = 0.0;
var dt = 0.1;

var heights;
var numberOfIndices;

var eye = [2.0, 1.0, 3.0];
var center = [0.0, 0.0, 0.0];
var up = [0.0, 0.0, 1.0];

var highCol = [1.0,1.0,0.0,1.0];
var lowCol = [1.0,0.0,1.0,1.0];

var NUM_WIDTH_PTS = 32;
var NUM_HEIGHT_PTS = 32;

var message;
var canvas;
var context;

var persp = mat4.create();
var view = mat4.create();

//color gui
var colorControl;

var ColorPair = function(){
this.highCol = [0,1,1,1];
this.lowCol = [1,0,1,1];
};

// Function called when the window is loaded
window.onload = function() {

colorControl = new ColorPair();

// Add GUI component
var gui = new dat.GUI();

gui.addColor(colorControl, 'highCol').onChange(function()
{
for (var i = 0; i < 4; ++i) {
highCol[i] = colorControl.highCol[i]/255.0;
}
});

gui.addColor(colorControl, 'lowCol').onChange(function()
{
for (var i = 0; i < 4; ++i) {
lowCol[i] = colorControl.lowCol[i]/255.0;
}
});


init();

animate();
};

function log(msg) {
setTimeout(function() {
throw new Error(msg);
}, 0);
}

function init() {
message = document.getElementById("message");
canvas = document.getElementById("canvas");
context = createWebGLContext(canvas, message);

if (!context) {
return;
}

// SET UP WEBGL CONTEXT
context.viewport(0, 0, canvas.width, canvas.height);
context.clearColor(1.0, 1.0, 1.0, 1.0);
context.enable(context.DEPTH_TEST);

mat4.perspective(45.0, 0.5, 0.1, 100.0, persp);

mat4.lookAt(eye, center, up, view);

initializeShader();
initializeGrid();
}


function animate(){
// Update
frame += dt;
var model = mat4.create();
mat4.identity(model);
mat4.translate(model, [-0.5, -0.5, 0.0]);
var mv = mat4.create();
mat4.multiply(view, model, mv);
var mvp = mat4.create();
mat4.multiply(persp, mv, mvp);

// Render
context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);

context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
context.uniform1f(u_heightLocation, frame);
context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);

context.uniform4fv(u_highColLocation, highCol);
context.uniform4fv(u_lowColLocation, lowCol);

context.uniform4fv(u_centerLocation, [0,0,0,0]);

window.requestAnimFrame(animate);
}

function initializeShader() {
var program;
var vs = getShaderSource(document.getElementById("vs"));
var fs = getShaderSource(document.getElementById("fs"));

var program = createProgram(context, vs, fs, message);
context.bindAttribLocation(program, positionLocation, "position");
u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective");
u_heightLocation = context.getUniformLocation(program,"u_time");

u_colorLocation = context.getUniformLocation(program, "u_color");
u_highColLocation = context.getUniformLocation(program, "u_highCol");
u_lowColLocation = context.getUniformLocation(program, "u_lowCol");

u_centerLocation = context.getUniformLocation(program, "u_center");

context.useProgram(program);
}

function initializeGrid() {
function uploadMesh(positions, heights, indices) {
// Positions
var positionsName = context.createBuffer();
context.bindBuffer(context.ARRAY_BUFFER, positionsName);
context.bufferData(context.ARRAY_BUFFER, positions, context.STREAM_DRAW);
context.vertexAttribPointer(positionLocation, 2, context.FLOAT, false, 0, 0);
context.enableVertexAttribArray(positionLocation);

if (heights){
// Heights
var heightsName = context.createBuffer();
context.bindBuffer(context.ARRAY_BUFFER, heightsName);
context.bufferData(context.ARRAY_BUFFER, heights.length *
heights.BYTES_PER_ELEMENT, context.STATIC_DRAW);
context.vertexAttribPointer(heightLocation, 1, context.FLOAT, false, 0, 0);
context.enableVertexAttribArray(heightLocation);
}

// Indices
var indicesName = context.createBuffer();
context.bindBuffer(context.ELEMENT_ARRAY_BUFFER, indicesName);
context.bufferData(context.ELEMENT_ARRAY_BUFFER, indices, context.STATIC_DRAW);
}

var WIDTH_DIVISIONS = NUM_WIDTH_PTS - 1;
var HEIGHT_DIVISIONS = NUM_HEIGHT_PTS - 1;

var numberOfPositions = NUM_WIDTH_PTS * NUM_HEIGHT_PTS;

var positions = new Float32Array(2 * numberOfPositions);
var indices = new Uint16Array(2 * ((NUM_HEIGHT_PTS * (NUM_WIDTH_PTS - 1)) +
(NUM_WIDTH_PTS * (NUM_HEIGHT_PTS - 1))));

var positionsIndex = 0;
var indicesIndex = 0;
var length;

for (var j = 0; j < NUM_WIDTH_PTS; ++j){
positions[positionsIndex++] = j /(NUM_WIDTH_PTS - 1);
positions[positionsIndex++] = 0.0;

if (j>=1){
length = positionsIndex / 2;
indices[indicesIndex++] = length - 2;
indices[indicesIndex++] = length - 1;
}
}

for (var i = 0; i < HEIGHT_DIVISIONS; ++i){
var v = (i + 1) / (NUM_HEIGHT_PTS - 1);
positions[positionsIndex++] = 0.0;
positions[positionsIndex++] = v;

length = (positionsIndex / 2);
indices[indicesIndex++] = length - 1;
indices[indicesIndex++] = length - 1 - NUM_WIDTH_PTS;

for (var k = 0; k < WIDTH_DIVISIONS; ++k){
positions[positionsIndex++] = (k + 1) / (NUM_WIDTH_PTS - 1);
positions[positionsIndex++] = v;

length = positionsIndex / 2;
var new_pt = length - 1;
indices[indicesIndex++] = new_pt - 1; // Previous side
indices[indicesIndex++] = new_pt;

indices[indicesIndex++] = new_pt - NUM_WIDTH_PTS; // Previous bottom
indices[indicesIndex++] = new_pt;
}
}

uploadMesh(positions, heights, indices);
numberOfIndices = indices.length;
}

</script>

</body>

</html>
Binary file added day.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading