Garciat
1/12/2016 - 10:19 PM
charge.html
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style>
html, body {
height: 100%;
margin: 0;
}
</style>
<script id="shader-fs" type="x-shader/x-fragment">
precision highp float;
uniform float u_time;
uniform vec2 u_resolution;
void main(void)
{
vec2 coord = gl_FragCoord.xy;
vec2 p = coord / u_resolution;
vec2 wave1 = vec2(coord.x, u_resolution.y/2.0 + 100.0 * cos(20.0 * p.x * cos(u_time * 0.2)) * sin(3.0 * u_time));
vec2 wave2 = vec2(coord.x, u_resolution.y/2.0 + 150.0 * cos(20.0 * p.x + 2.0 * u_time) * pow(p.x * 10.0 * sin(u_time), 2.0) / 32.0 - (coord.x - u_resolution.x * 0.75) / 8.0 * cos(u_time * 0.5));
vec2 wave3 = vec2(coord.x, u_resolution.y/4.0 + 40.0 * cos(10.0 * p.x + u_time));
vec2 wave4 = vec2(coord.x, u_resolution.y/1.5 + 10.0 * cos(10.0 * p.x + u_time));
vec3 color = vec3(0.0, 0.0, 0.0);
float pix = 8.0;
coord = floor(coord / pix) * pix;
{
float d = distance(wave1, coord);
float c = 50.0 / (d * d);
color += clamp(vec3(c * cos(u_time), c * sin(u_time), 0.0) * 0.7, 0.0, 1.0);
}
{
float d = distance(wave2, coord);
float c = clamp(50.0 / (d * d), 0.0, 1.0);
color += vec3(c, 0.0, c * sin(u_time));
}
{
float d = distance(wave3, coord);
float c = clamp(100.0 / (d * d) * sin(u_time), 0.0, 1.0);
color += vec3(c, c, c) * 0.5;
}
{
float d = distance(wave3, coord);
float c = clamp(u_resolution.y / (d) * sin(u_time * 0.1), 0.0, 1.0);
color -= vec3(c, c, c) * 0.1;
}
float poop = 20.0;
vec2 meow = floor(coord / poop);
float sig = clamp((meow.x + meow.y) / poop / poop, 0.0, 1.0);
vec3 sigv = vec3(sig, sig*sig, cos(sig));
color += sin(sigv * 1.0 * u_time) / 4.0;
gl_FragColor = vec4(color, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec2 a_position;
void main(void)
{
gl_Position = vec4(a_position, 1.0, 1.0);
}
</script>
<script>
'use strict';
let gl;
function initGL(canvas) {
try {
gl = canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
} catch(e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
}
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var shader;
if (shaderScript.type === "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, shaderScript.textContent);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
let shaderProgram;
let u_time, u_resolution;
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);
u_time = gl.getUniformLocation(shaderProgram, 'u_time');
u_resolution = gl.getUniformLocation(shaderProgram, 'u_resolution');
gl.uniform2f(u_resolution, gl.canvas.clientWidth, gl.canvas.clientHeight);
}
function initBuffers() {
let buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
var vertices = [
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
-1.0, 1.0,
1.0, -1.0,
1.0, 1.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
let a_position = gl.getAttribLocation(shaderProgram, 'a_position');
gl.enableVertexAttribArray(a_position);
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
}
let dx = 0.0;
function drawScene(time) {
gl.uniform1f(u_time, time / 1000);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
function webGLStart(canvas) {
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
initGL(canvas);
initShaders();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
initBuffers();
}
function canvasClicked() {
toggleFullScreen();
}
function windowResized() {
let canvas = document.getElementById('canvas');
webGLStart(canvas);
}
function loop(time) {
drawScene(time);
requestAnimationFrame(loop);
}
function main() {
let canvas = document.getElementById('canvas');
canvas.addEventListener('click', canvasClicked);
webGLStart(canvas);
loop();
}
window.addEventListener('load', main);
window.addEventListener('resize', windowResized);
</script>
<script>
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
</script>
</head>
<body>
<canvas id="canvas" style="position:absolute;top:0;left:0"></canvas>
</body>
</html>