<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin: 0px;
overflow: hidden;
}
.stage {
position: absolute;
left: 0px;
top: 0px;
}
</style>
<body>
</body>
<script id="vs" type='x-shader'>
attribute vec2 a_pos;
void main() {
gl_Position = vec4(a_pos, 0.0, 1.0);
}
</script>
<script id="fs" type='x-shader'>
precision mediump float;
uniform float time;
uniform vec2 resolution;
const float pi = 3.141592653589793;
float sdCapsule( vec2 p, vec2 a, vec2 b, float r ) {
vec2 pa = p - a, ba = b - a;
float h = clamp( dot(pa, ba) / dot(ba , ba), 0.0, 1.0 );
return length( pa - ba * h ) - r;
}
float motor(float _min, float _max, float time) {
float t = 0.5 + 0.5 * sin(time);
return mix(_min, _max, t);
}
void rotate_from_origin(vec2 origin, out vec2 target, float r, float angle) {
target.x = origin.x + r * cos(angle);
target.y = origin.y + r * sin(angle);
}
vec2 preserve(vec2 p0, vec2 p1, float len) {
vec2 v = p1 - p0;
vec2 u = normalize(v);
return p0 + len * u;
}
void main( void ) {
vec2 p = ( gl_FragCoord.xy / resolution.xy );
p = 2.0 * p - 1.0;
p.x *= resolution.x / resolution.y;
float t = time * 2.0;
float cx = 0.25;
vec2 p0 = vec2(-cx, 0.0);
vec2 p1 = vec2(-cx, -0.2);
vec2 p2 = vec2(-cx, -0.4);
vec2 p3 = vec2(-cx, 0.2);
vec2 p4 = vec2(-cx, -0.4);
vec2 p5 = vec2(cx, 0.0);
vec2 p6 = vec2(cx, -0.2);
vec2 p7 = vec2(cx, -0.4);
vec2 p8 = vec2(cx, 0.2);
vec2 p9 = vec2(cx, -0.4);
vec2 p10 = vec2(0.0, 0.0);
vec2 p11 = vec2(cx, -0.2);
float angle0 = 0.0;
float angle1 = 0.0;
p0.y = motor(-0.05, 0.05, t * 4.0);
angle0 = motor(pi * 0.15, pi * 0.65, t * 2.0 - pi * 0.5);
angle1 = motor(pi * 0.15, pi * 0.65, t * 2.0 + pi * 0.5);
rotate_from_origin(p0, p1, 0.2, angle0);
rotate_from_origin(p0, p3, 0.2, angle1);
angle0 += motor(0.0, pi * 0.5, t * 2.0 + pi);
angle1 += motor(0.0, pi * 0.5, t * 2.0 + pi + pi);
rotate_from_origin(p1, p2, 0.2, angle0);
rotate_from_origin(p3, p4, 0.2, angle1);
p5.y = motor(-0.05, 0.05, t * 4.0);
angle0 = motor(pi * 0.15, pi * 0.65, t * 2.0 - pi * 0.5);
angle1 = motor(pi * 0.15, pi * 0.65, t * 2.0 + pi * 0.5);
rotate_from_origin(p5, p6, 0.2, angle0);
rotate_from_origin(p5, p8, 0.2, angle1);
angle0 += motor(0.0, pi * 0.5, t * 2.0 + pi);
angle1 += motor(0.0, pi * 0.5, t * 2.0 + pi + pi);
rotate_from_origin(p6, p7, 0.2, angle0);
rotate_from_origin(p8, p9, 0.2, angle1);
p10.y = motor(-0.02, 0.02, t * 4.0 - pi * 0.5);
p11 = preserve(p5, p11, 0.25);
float col = 0.0;
float d = 0.0;
float w = 0.05;
d = sdCapsule(p, p0, p1, w);
d = min(d, sdCapsule(p, p1, p2, w));
d = min(d, sdCapsule(p, p0, p3, w));
d = min(d, sdCapsule(p, p3, p4, w));
d = min(d, sdCapsule(p, p5, p6, w));
d = min(d, sdCapsule(p, p6, p7, w));
d = min(d, sdCapsule(p, p5, p8, w));
d = min(d, sdCapsule(p, p8, p9, w));
d = min(d, sdCapsule(p, p0, p10, w));
d = min(d, sdCapsule(p, p10, p5, w));
d = min(d, sdCapsule(p, p5, p11, w));
col = d;
float c = sin(d * pi * 25.0);
col = smoothstep(0.0, 0.01, d) * c;
vec3 color = mix(vec3(1.0, 1.0, 0.4), vec3(0.0, 0.45, 0.5), col);
gl_FragColor = vec4( color, 1.0 );
}
</script>
<script id="vs-grid" type='x-shader'>
attribute vec2 a_pos;
attribute vec2 a_texCoords;
varying vec2 v_texCoords;
void main() {
v_texCoords = a_texCoords;
gl_Position = vec4(a_pos, 0.0, 1.0);
}
</script>
<script id="fs-grid" type='x-shader'>
precision mediump float;
uniform float time;
uniform sampler2D image;
varying vec2 v_texCoords;
void main() {
vec4 col = texture2D(image, v_texCoords);
col = vec4(col.rgb, 1.0);
gl_FragColor = col;
}
</script>
<script>
var g = document.createElement('canvas').getContext('2d');
g.canvas.width = innerWidth;
g.canvas.height = innerHeight;
g.canvas.className = 'stage';
var gl = document.createElement('canvas').getContext('webgl');
gl.canvas.width = innerWidth;
gl.canvas.height = innerHeight;
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.canvas.className = 'stage';
document.body.appendChild(gl.canvas);
document.body.appendChild(g.canvas);
var render_mod = 0;
var touched = false;
var frameCount = 0, time = 0;
var glo = {};
glo.quad = {};
glo.grid = {};
var lerp = function(a, b, t) {
return a + (b - a) * t;
};
var vec2 = {};
vec2.distance = function(a, b) {
var dx = b[0] - a[0];
var dy = b[1] - a[1];
return Math.sqrt(dx*dx + dy*dy);
};
vec2.add = function(a, b) {
return [ a[0] + b[0], a[1] + b[1] ];
};
vec2.sub = function(a, b) {
return [ a[0] - b[0], a[1] - b[1] ];
};
vec2.normalize = function(v) {
var d = Math.sqrt(v[0]*v[0] + v[1]*v[1]);
return d > 0 ? [ v[0]/d, v[1]/d ] : null;
};
vec2.lerp = function(a, b, t) {
return [ lerp(a[0], b[0], t), lerp(a[1], b[1], t) ];
};
vec2.pointInBezier = function(bezier, t) {
var a = bezier[0], b = bezier[1], c = bezier[2], d = bezier[3];
var ab = vec2.lerp(a, b, t);
var bc = vec2.lerp(b, c, t);
var cd = vec2.lerp(c, d, t);
var abc = vec2.lerp(ab, bc, t);
var bcd = vec2.lerp(bc, cd, t);
return vec2.lerp(abc, bcd, t);
};
var grid = {
points: [],
nx: 2,
ny: 2,
picked_pt: null,
picked_cp: null,
lt: null,
rt: null,
lb: null,
rb: null,
bezier_t: null,
bezier_b: null,
bezier_l: null,
bezier_r: null,
cp_l0: null,
cp_l1: null,
cp_r0: null,
cp_r1: null,
cp_t0: null,
cp_t1: null,
cp_b0: null,
cp_b1: null,
cps: null
};
var initGrid = function(nx, ny) {
grid.nx = nx;
grid.ny = ny;
for(var y = 0; y < grid.ny; y++) {
var fy = 1 - y / (grid.ny - 1) * 2;
for(var x = 0; x < grid.nx; x++) {
var fx = x / (grid.nx - 1) * 2 - 1;
grid.points.push([fx * 0.5, fy * 0.5]);
}
}
grid.lt = grid.points[0];
grid.rt = grid.points[nx - 1];
grid.rb = grid.points[grid.points.length - 1];
grid.lb = grid.points[grid.points.length - nx];
grid.cp_l0 = [grid.lt[0] * 1.1, lerp(grid.lt[1], grid.lb[1], 0.1)];
grid.cp_l1 = [grid.lb[0] * 1.1, lerp(grid.lt[1], grid.lb[1], 0.9)];
grid.cp_r0 = [grid.rt[0] * 1.1, lerp(grid.rt[1], grid.rb[1], 0.1)];
grid.cp_r1 = [grid.rb[0] * 1.1, lerp(grid.rt[1], grid.rb[1], 0.9)];
grid.cp_t0 = [lerp(grid.lt[0], grid.rt[0], 0.1), grid.lt[1] * 1.1];
grid.cp_t1 = [lerp(grid.lt[0], grid.rt[0], 0.9), grid.rt[1] * 1.1];
grid.cp_b0 = [lerp(grid.lb[0], grid.rb[0], 0.1), grid.lb[1] * 1.1];
grid.cp_b1 = [lerp(grid.lb[0], grid.rb[0], 0.9), grid.rb[1] * 1.1];
grid.bezier_t = [grid.lt, grid.cp_t0, grid.cp_t1, grid.rt];
grid.bezier_b = [grid.lb, grid.cp_b0, grid.cp_b1, grid.rb];
grid.bezier_l = [grid.lt, grid.cp_l0, grid.cp_l1, grid.lb];
grid.bezier_r = [grid.rt, grid.cp_r0, grid.cp_r1, grid.rb];
grid.cps = [
grid.cp_l0, grid.cp_l1, grid.cp_r0, grid.cp_r1,
grid.cp_t0, grid.cp_t1, grid.cp_b0, grid.cp_b1
];
updateGridBezier();
};
var drawGrid = function() {
g.clearRect(0, 0, g.canvas.width, g.canvas.height);
var p, i, ix, iy, x, y;
g.globalAlpha = 0.5;
g.beginPath();
for(iy = 0; iy < grid.ny; iy++) {
for(ix = 0; ix < grid.nx; ix++) {
i = iy * grid.nx + ix;
p = grid.points[i];
x = (0.5 + p[0] * 0.5) * g.canvas.width;
y = (0.5 - p[1] * 0.5) * g.canvas.height;
if(ix === 0) {
g.moveTo(x, y);
}
else {
g.lineTo(x, y);
}
}
}
for(ix = 0; ix < grid.nx; ix++) {
for(iy = 0; iy < grid.ny; iy++) {
i = iy * grid.nx + ix;
p = grid.points[i];
x = (0.5 + p[0] * 0.5) * g.canvas.width;
y = (0.5 - p[1] * 0.5) * g.canvas.height;
if(iy === 0) {
g.moveTo(x, y);
}
else {
g.lineTo(x, y);
}
}
}
g.lineWidth = 3;
g.strokeStyle = 'rgba(255, 255, 255, 1)';
g.stroke();
g.lineWidth = 1;
g.strokeStyle = 'rgba(0, 0, 0, 1)';
g.stroke();
g.beginPath();
for(i = 0; i < grid.points.length; i++) {
p = grid.points[i];
x = (0.5 + p[0] * 0.5) * g.canvas.width;
y = (0.5 - p[1] * 0.5) * g.canvas.height;
g.moveTo(x + 3, y);
g.arc(x, y, 3, 0, Math.PI * 2);
}
g.fillStyle = 'rgba(0, 0, 0, 1)';
g.fill();
g.strokeStyle = 'rgba(255, 255, 255, 1)';
g.stroke();
g.fillStyle = 'rgba(255, 0, 0, 1)';
g.beginPath();
for(i = 0; i < grid.cps.length; i++) {
p = grid.cps[i];
x = (0.5 + p[0] * 0.5) * g.canvas.width;
y = (0.5 - p[1] * 0.5) * g.canvas.height;
g.moveTo(x + 3, y);
g.arc(x, y, 3, 0, Math.PI * 2);
}
g.fill();
g.strokeStyle = 'rgba(255, 255, 255, 1)';
g.stroke();
};
var getNearestPoint = function(points, ref, radius) {
var q, i, x, y, dx, dy, d, min_d, res;
x = ref.x / g.canvas.width * 2 - 1;
y = 1 - ref.y / g.canvas.height * 2;
min_d = Number.MAX_VALUE;
for(i = 0; i < points.length; i++) {
q = points[i];
dx = x - q[0];
dy = y - q[1];
d = dx*dx + dy*dy;
if(d < min_d) {
res = q;
min_d = d;
}
}
var r = radius / Math.max(g.canvas.width, g.canvas.height) * 2;
return Math.sqrt(min_d) < r ? res : null;
};
var updateGridLinear = function() {
var q, i, ix, iy, x, y;
for(iy = 0; iy < grid.ny; iy++) {
y = iy / (grid.ny - 1);
var yl = vec2.lerp(grid.lt, grid.lb, y);
var yr = vec2.lerp(grid.rt, grid.rb, y);
for(ix = 0; ix < grid.nx; ix++) {
i = ix + iy * grid.nx;
q = grid.points[i];
x = ix / (grid.nx - 1);
var k = vec2.lerp(yl, yr, x);
q[0] = k[0];
q[1] = k[1];
}
}
};
var updateGridBezier = function() {
var q, i, ix, iy, x, y;
for(iy = 0; iy < grid.ny; iy++) {
y = iy / (grid.ny - 1);
var yl = vec2.pointInBezier(grid.bezier_l, y);
var yr = vec2.pointInBezier(grid.bezier_r, y);
var cp0 = vec2.lerp(grid.cp_t0, grid.cp_b0, y);
var cp1 = vec2.lerp(grid.cp_t1, grid.cp_b1, y);
for(ix = 0; ix < grid.nx; ix++) {
i = ix + iy * grid.nx;
q = grid.points[i];
x = ix / (grid.nx - 1);
var k = vec2.pointInBezier([yl, cp0, cp1, yr], x);
q[0] = k[0];
q[1] = k[1];
}
}
};
var getTouchCoord = function(e) {
var p = { x: 0, y: 0 };
if(e.targetTouches) {
p.x = e.targetTouches[0].pageX;
p.y = e.targetTouches[0].pageY;
}
else {
p.x = e.pageX;
p.y = e.pageY;
}
return p;
};
var touchstart = function(e) {
e.preventDefault();
var p = getTouchCoord(e);
touched = true;
grid.picked_pt = getNearestPoint(grid.points, p, 5);
grid.picked_cp = getNearestPoint(grid.cps, p, 5);
};
var touchend = function(e) {
e.preventDefault();
touched = false;
grid.picked_pt = null;
grid.picked_cp = null;
};
var touchmove = function(e) {
e.preventDefault();
if(touched) {
var p = getTouchCoord(e);
if(grid.picked_pt) {
grid.picked_pt[0] = p.x / g.canvas.width * 2 - 1;
grid.picked_pt[1] = 1 - p.y / g.canvas.height * 2;
if(grid.picked_pt === grid.lt | grid.picked_pt === grid.rt |
grid.picked_pt === grid.lb | grid.picked_pt === grid.rb ) {
updateGridBezier();
}
}
if(grid.picked_cp) {
grid.picked_cp[0] = p.x / g.canvas.width * 2 - 1;
grid.picked_cp[1] = 1 - p.y / g.canvas.height * 2;
updateGridBezier();
}
}
};
var createAndSetupTexture = function(gl) {
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
return texture;
};
var createShaderProgram = function(vs_src, fs_src) {
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, vs_src);
gl.compileShader(vs);
console.log(gl.getShaderInfoLog(vs));
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, fs_src);
gl.compileShader(fs);
console.log(gl.getShaderInfoLog(fs));
var prog = gl.createProgram();
gl.attachShader(prog, vs);
gl.attachShader(prog, fs);
gl.linkProgram(prog);
console.log(gl.getProgramInfoLog(prog));
return {
prog: prog,
a: {},
u: {}
};
};
var getAttribLocations = function(shader, names) {
var name_list = names.split(',').map(function(item) { return item.trim(); });
for(var i in name_list) {
var name = name_list[i];
shader.a[name] = gl.getAttribLocation(shader.prog, name);
}
};
var getUniformLocations = function(shader, names) {
var name_list = names.split(',').map(function(item) { return item.trim(); });
for(var i in name_list) {
var name = name_list[i];
shader.u[name] = gl.getUniformLocation(shader.prog, name);
}
};
var initGL = function() {
var vs_src, fs_src;
// quad related
vs_src = document.querySelector('#vs').textContent;
fs_src = document.querySelector('#fs').textContent;
glo.quad.shader = createShaderProgram(vs_src, fs_src);
getAttribLocations(glo.quad.shader, 'a_pos');
getUniformLocations(glo.quad.shader, 'resolution, time');
glo.quad.vb = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, glo.quad.vb);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]), gl.STATIC_DRAW);
var colorTexture = createAndSetupTexture(gl);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.canvas.width, gl.canvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
var fbo = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTexture, 0);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
glo.fbo = fbo;
glo.image = colorTexture;
// grid related
var i, p, x, y, fx, fy;
glo.grid.verts = new Float32Array(grid.nx * grid.ny * 2);
glo.grid.indices = [];
glo.grid.texCoords = new Float32Array(grid.nx * grid.ny * 2);
for(y = 0; y < grid.ny; y++) {
fy = y / (grid.ny - 1);
for(x = 0; x < grid.nx; x++) {
fx = x / (grid.nx - 1);
i = y * grid.nx + x;
p = grid.points[i];
glo.grid.verts[i * 2 + 0] = p[0];
glo.grid.verts[i * 2 + 1] = p[1];
glo.grid.texCoords[i * 2 + 0] = fx;
glo.grid.texCoords[i * 2 + 1] = fy;
if(x < grid.nx - 1 && y < grid.ny - 1) {
glo.grid.indices.push(i, i + grid.nx, i + grid.nx + 1);
glo.grid.indices.push(i, i + grid.nx + 1, i + 1);
}
}
}
vs_src = document.querySelector('#vs-grid').textContent;
fs_src = document.querySelector('#fs-grid').textContent;
glo.grid.shader = createShaderProgram(vs_src, fs_src);
getAttribLocations(glo.grid.shader, 'a_pos, a_texCoords');
getUniformLocations(glo.grid.shader, 'time, image');
glo.grid.vb = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, glo.grid.vb);
gl.bufferData(gl.ARRAY_BUFFER, glo.grid.verts, gl.STATIC_DRAW);
glo.grid.tb = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, glo.grid.tb);
gl.bufferData(gl.ARRAY_BUFFER, glo.grid.texCoords, gl.STATIC_DRAW);
glo.grid.ib = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, glo.grid.ib);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(glo.grid.indices), gl.STATIC_DRAW);
};
var drawGL = function() {
//-- quad
gl.bindFramebuffer(gl.FRAMEBUFFER, glo.fbo);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(glo.quad.shader.prog);
gl.uniform2f(glo.quad.shader.u.resolution, gl.canvas.width, gl.canvas.height);
gl.uniform1f(glo.quad.shader.u.time, time);
gl.bindBuffer(gl.ARRAY_BUFFER, glo.quad.vb);
gl.vertexAttribPointer(glo.quad.shader.a.a_pos, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(glo.quad.shader.a.a_pos);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
//-- grid
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.useProgram(glo.grid.shader.prog);
gl.uniform1f(glo.grid.shader.u.time, time);
gl.activeTexture(gl.TEXTURE0);
gl.uniform1i(glo.grid.shader.u.image, 0);
gl.bindTexture(gl.TEXTURE_2D, glo.image);
gl.bindBuffer(gl.ARRAY_BUFFER, glo.grid.vb);
gl.bufferData(gl.ARRAY_BUFFER, glo.grid.verts, gl.STREAM_DRAW);
gl.vertexAttribPointer(glo.grid.shader.a.a_pos, 2, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, glo.grid.tb);
gl.vertexAttribPointer(glo.grid.shader.a.a_texCoords, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(glo.grid.shader.a.a_pos);
gl.enableVertexAttribArray(glo.grid.shader.a.a_texCoords);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, glo.grid.ib);
gl.drawElements(gl.TRIANGLES, glo.grid.indices.length, gl.UNSIGNED_SHORT, 0);
};
var draw = function() {
if(render_mod === 0) {
drawGL();
drawGrid();
}
if(render_mod === 1) {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
drawGrid();
}
if(render_mod === 2) {
g.clearRect(0, 0, g.canvas.width, g.canvas.height);
drawGL();
}
};
var update = function() {
time = frameCount / 60;
for(var i = 0; i < grid.points.length; i++) {
var p = grid.points[i];
glo.grid.verts[2 * i + 0] = p[0];
glo.grid.verts[2 * i + 1] = p[1];
}
frameCount++;
};
var loop = function() {
update();
draw();
requestAnimationFrame(loop);
};
window.addEventListener('mousedown', touchstart, false);
window.addEventListener('mouseup', touchend, false);
window.addEventListener('mousemove', touchmove, false);
window.addEventListener('touchstart', touchstart, false);
window.addEventListener('touchend', touchend, false);
window.addEventListener('touchmove', touchmove, false);
window.onkeydown = function(e) {
switch(e.keyCode) {
case 32:
render_mod++;
render_mod = render_mod % 3;
break;
}
};
var init = function() {
initGrid(20, 20);
initGL();
updateGridBezier();
loop();
};
init();
</script>
!
