Skip to content

project 5 submission #8

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

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

project 5 submission #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9f12046
done with the basic stuff!
lucyxiao Nov 5, 2013
9825c4e
extra stuff
lucyxiao Nov 9, 2013
f42a074
page test
lucyxiao Nov 9, 2013
16b7c24
Revert "page test"
lucyxiao Nov 9, 2013
bd24804
finished readme
lucyxiao Nov 9, 2013
df2efda
updated links in readme
lucyxiao Nov 9, 2013
de84d1e
small change
lucyxiao Nov 9, 2013
bf8371a
small change2
lucyxiao Nov 9, 2013
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
363 changes: 35 additions & 328 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 8 additions & 2 deletions part1/vert_wave.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,26 @@
attribute vec2 position;

uniform mat4 u_modelViewPerspective;
uniform float u_time;

varying float height;

void main(void)
{
float height = 0.0;
float s_contrib = sin(position.x*2.0*3.14159 + u_time);
float t_contrib = cos(position.y*2.0*3.14159 + u_time);
height = s_contrib*t_contrib;
gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
}
</script>

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

void main(void)
{
gl_FragColor = vec4(vec3(0.0), 1.0);
gl_FragColor = vec4(0.0, 0.8, 1.0, 1.0) * (height+1.0)/2.0 + vec4(1.0, 0.2, 0.0, 1.0) * (1.0-height)/2.0;
}
</script>

Expand Down
7 changes: 7 additions & 0 deletions part1/vert_wave.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,12 @@
var view = mat4.create();
mat4.lookAt(eye, center, up, view);

var time = 0;

var positionLocation = 0;
var heightLocation = 1;
var u_modelViewPerspectiveLocation;
var u_timeLocation;

(function initializeShader() {
var program;
Expand All @@ -40,6 +43,7 @@
var program = createProgram(context, vs, fs, message);
context.bindAttribLocation(program, positionLocation, "position");
u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective");
u_timeLocation = context.getUniformLocation(program,"u_time");

context.useProgram(program);
})();
Expand Down Expand Up @@ -138,11 +142,14 @@
var mvp = mat4.create();
mat4.multiply(persp, mv, mvp);

time += 0.02;

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

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

window.requestAnimFrame(animate);
Expand Down
84 changes: 84 additions & 0 deletions part1/vert_wave_custom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<html>

<head>
<title>Vertex Wave Simplex</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 id="vs" type="x-shader/x-vertex">
attribute vec2 position;

uniform mat4 u_modelViewPerspective;
uniform float u_time;

varying float height;

vec3 permute(vec3 x) {
x = ((x*34.0)+1.0)*x;
return x - floor(x * (1.0 / 289.0)) * 289.0;
}

float simplexNoise(vec2 v)
{
const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);

vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);

vec2 i1;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;

i = i - floor(i * (1.0 / 289.0)) * 289.0;

vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+ i.x + vec3(0.0, i1.x, 1.0 ));

vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
m = m*m ;
m = m*m ;

vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;

m *= inversesqrt( a0*a0 + h*h );

vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}

void main(void)
{
vec2 simplexVec = vec2(position.x+0.25*u_time, position.y+0.25*u_time);
height = simplexNoise(simplexVec);
gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
}
</script>

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

void main(void)
{
gl_FragColor = vec4(0.0, 0.8, 1.0, 1.0) * (height+1.0)/2.0 + vec4(1.0, 0.2, 0.0, 1.0) * (1.0-height)/2.0;
}
</script>

<script src ="gl-matrix.js" type ="text/javascript"></script>
<script src ="webGLUtility.js" type ="text/javascript"></script>
<script src ="vert_wave.js" type ="text/javascript"></script>
</body>

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

<head>
<title>Vertex Wave Simplex</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 id="vs" type="x-shader/x-vertex">
attribute vec2 position;

uniform mat4 u_modelViewPerspective;
uniform float u_time;

varying float height;

float noise(float x, float y) {
return fract(sin(dot(vec2(x,y) ,vec2(12.9898,78.233))) * 43758.5453);
}

float smoothNoise(float x, float y) {
float corners = (noise(x-1.0, y-1.0) + noise(x+1.0, y-1.0) + noise(x-1.0, y+1.0) + noise(x+1.0, y+1.0)) / 16.0;
float sides = (noise(x-1.0, y) + noise(x+1.0, y) + noise(x, y-1.0) + noise(x, y+1.0)) / 8.0;
float center = noise(x, y) / 4.0;
return corners + sides + center;
}

float interpolate(float a, float b, float t) {
return a * (1.0-t) + b * t;
}

float interpolateNoise(float x, float y) {
float int_x = floor(x);
float fract_x = x - int_x;
float int_y = floor(y);
float fract_y = y - int_y;

float v1 = smoothNoise(int_x, int_y);
float v2 = smoothNoise(int_x+1.0, int_y);
float v3 = smoothNoise(int_x, int_y+1.0);
float v4 = smoothNoise(int_x+1.0, int_y+1.0);

float i1 = interpolate(v1, v2, fract_x);
float i2 = interpolate(v3, v4, fract_x);

return interpolate(i1, i2, fract_y);
}

float perlin(vec2 v) {
float total = 0.0;
float p = 0.9;

for (int i=0; i<4; i++) {
float f = pow(2.0, float(i));
float amp = pow(p, float(i));
total = total + interpolateNoise(v.x * f, v.y * f) * amp;
}

return total;
}

void main(void)
{
vec2 perlinVec = vec2(position.x+0.25*u_time, position.y);
height = perlin(perlinVec) - 1.0;
gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
}
</script>

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

void main(void)
{
gl_FragColor = vec4(0.0, 0.8, 1.0, 1.0) * (height-0.25)/0.5 + vec4(1.0, 0.2, 0.0, 1.0) * (0.75-height)/0.5;
}
</script>

<script src ="gl-matrix.js" type ="text/javascript"></script>
<script src ="webGLUtility.js" type ="text/javascript"></script>
<script src ="vert_wave.js" type ="text/javascript"></script>
</body>

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

<head>
<title>Vertex Wave Simplex</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 id="vs" type="x-shader/x-vertex">
attribute vec2 position;

uniform mat4 u_modelViewPerspective;
uniform float u_time;

varying float height;

vec3 permute(vec3 x) {
x = ((x*34.0)+1.0)*x;
return x - floor(x * (1.0 / 289.0)) * 289.0;
}

float simplexNoise(vec2 v)
{
const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);

vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);

vec2 i1;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;

i = i - floor(i * (1.0 / 289.0)) * 289.0;

vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+ i.x + vec3(0.0, i1.x, 1.0 ));

vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
m = m*m ;
m = m*m ;

vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;

m *= inversesqrt( a0*a0 + h*h );

vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}

void main(void)
{
float s_contrib = simplexNoise(position);
float t_contrib = simplexNoise(vec2(s_contrib,0.5*u_time));
height = s_contrib*t_contrib;
gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
}
</script>

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

void main(void)
{
gl_FragColor = vec4(0.0, 0.8, 1.0, 1.0) * (height+1.0)/2.0 + vec4(1.0, 0.2, 0.0, 1.0) * (1.0-height)/2.0;
}
</script>

<script src ="gl-matrix.js" type ="text/javascript"></script>
<script src ="webGLUtility.js" type ="text/javascript"></script>
<script src ="vert_wave.js" type ="text/javascript"></script>
</body>

</html>
Loading