coderofsalvation/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello Shader</title>
    <script type="text/javascript" src="https://unpkg.com/glslCanvas"></script>
    <style>
        body {
            background: #101515;
            margin:0;
        }
        #glslCanvas {
            position: absolute;
            top: 50%;
            left: 50%;
        }
        .bg {
            position:relative;
            height:100vh;
            overflow:hidden;
            background-color:#000;
        }
    </style>
</head>
<body>
    <div class="bg">
        <canvas id="glslCanvas" data-fragment="
    #ifdef GL_ES
        precision mediump float;
    #endif

    uniform vec2 u_resolution;
    uniform vec2 u_mouse;
    uniform float u_time;

    uniform sampler2D u_tex0; // data/moon.jpg
    uniform vec2 u_tex0Resolution;

    uniform sampler2D u_buffer0;
    uniform sampler2D u_buffer1;

    vec2 scale(vec2 st, float s) {
        return (st-.5)*s+.5;
    }

    vec2 ratio(in vec2 st, in vec2 s) {
        return mix( vec2((st.x*s.x/s.y)-(s.x*.5-s.y*.5)/s.y,st.y),
                    vec2(st.x,st.y*(s.y/s.x)-(s.y*.5-s.x*.5)/s.x),
                    step(s.x,s.y));
    }

    float circleSDF(vec2 st) {
        return length(st - 0.5) * 2.0;
    }

    vec2 sphereCoords(vec2 _st, float _scale){
        float maxFactor = sin(1.570796327);
        vec2 uv = vec2(0.0);
        vec2 xy = 2.0 * _st.xy - 1.0;
        float d = length(xy);
        if (d < (2.0-maxFactor)){
            d = length(xy * maxFactor);
            float z = sqrt(1.0 - d * d);
            float r = atan(d, z) / 3.1415926535 * _scale;
            float phi = atan(xy.y, xy.x);
            uv.x = r * cos(phi) + 0.5;
            uv.y = r * sin(phi) + 0.5;
        } else {
            uv = _st.xy;
        }
        return uv;
    }

    vec4 sphereTexture(in sampler2D _tex, in vec2 _uv, float _time) {
        vec2 st = sphereCoords(_uv, 1.0);
        float aspect = u_tex0Resolution.y/u_tex0Resolution.x;
        st.x = fract(st.x * aspect + _time);
        return texture2D(_tex, st);
    }

    void main() {
        vec2 uv = gl_FragCoord.xy / u_resolution.xy;
        vec3 diff = vec3( vec2(1.0) / u_resolution.xy, 0.0);
        vec2 mouse_uv = u_mouse.xy / u_resolution.xy;
        float mouse_pointer = smoothstep(1.5, 0.5, length((mouse_uv - uv) * u_resolution) );

    #if defined( BUFFER_0 )
        // Ping
        vec4 center = texture2D(u_buffer1, uv);
        float top = texture2D(u_buffer1, uv - diff.zy).r;
        float left = texture2D(u_buffer1, uv - diff.xz).r;
        float right = texture2D(u_buffer1, uv + diff.xz).r;
        float bottom = texture2D(u_buffer1, uv + diff.zy).r;

        float red = -(center.g - 0.5) * 2.0 + (top + left + right + bottom - 2.0);
        red += mouse_pointer; // mouse
        red *= 0.98; // damping
        red *= step(0.1, u_time); // hacky way of clearing the buffer
        red = 0.5 + red * 0.5;
        red = clamp(red, 0., 1.);
        gl_FragColor = vec4(red, center.r, 0.0, 0.0);

    #elif defined( BUFFER_1 )
        // Pong
        // Note: in this example you can get away with only one buffer...
        //       still is good to show off how easy is to make another buffer
        vec4 ping = texture2D(u_buffer0, uv, 0.0);
        if (u_time < 1.) {
            ping = vec4(vec3(20.5), 1.);
        }
        gl_FragColor = ping;

    #else
        // Main Buffer
        vec4 ripples = texture2D(u_buffer1, uv);
        float offset = ripples.r - 0.5;

        vec2 st = gl_FragCoord.xy/u_resolution.xy;
        st = scale(st, 2.0);
        st = ratio(st, u_resolution);

        st += offset;
        vec4 color = sphereTexture(u_tex0, st, u_time * 0.01);
        float radius = 1.0 - circleSDF(st);
        color.rgb *= smoothstep(0.001, 0.02, radius);
        color.rgb += (ripples.r - .5) * 2.;

        gl_FragColor = color;

    #endif

    }
    " width="320" height="200"></canvas>
    </div>
</body>
<script>
    var canvas = document.getElementById("glslCanvas");
    var sandbox = new GlslCanvas(canvas);
    var texCounter = 0;
    var sandbox_content = "";
    var sandbox_title = "";
    var sandbox_author = "";
    var sandbox_thumbnail = "";
    var quality = 10; // 1 = normal
    canvas.width = window.innerWidth / quality;
    canvas.height = window.innerHeight / quality;
    canvas.style.transform = 'translate(-50%,-50%) scale('+quality+')';
</script>
</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Hello Shader</title>
	<script type="text/javascript" src="https://unpkg.com/glslCanvas"></script>
	<style>
	body {
	background: #101515;
	margin:0;
	}
	#glslCanvas {
	position: absolute;
	top: 50%;
	left: 50%;
	}
	.bg {
	position:relative;
	height:100vh;
	overflow:hidden;
	background-color:#000;
	}
	</style>
	</head>
	<body>
	<div class="bg">
	<canvas id="glslCanvas" data-fragment="
	#ifdef GL_ES
	precision mediump float;
	#endif

	uniform vec2 u_resolution;
	uniform vec2 u_mouse;
	uniform float u_time;

	uniform sampler2D u_tex0; // data/moon.jpg
	uniform vec2 u_tex0Resolution;

	uniform sampler2D u_buffer0;
	uniform sampler2D u_buffer1;

	vec2 scale(vec2 st, float s) {
	return (st-.5)*s+.5;
	}

	vec2 ratio(in vec2 st, in vec2 s) {
	return mix( vec2((st.xs.x/s.y)-(s.x.5-s.y*.5)/s.y,st.y),
	vec2(st.x,st.y(s.y/s.x)-(s.y.5-s.x*.5)/s.x),
	step(s.x,s.y));
	}

	float circleSDF(vec2 st) {
	return length(st - 0.5) * 2.0;
	}

	vec2 sphereCoords(vec2 _st, float _scale){
	float maxFactor = sin(1.570796327);
	vec2 uv = vec2(0.0);
	vec2 xy = 2.0 * _st.xy - 1.0;
	float d = length(xy);
	if (d < (2.0-maxFactor)){
	d = length(xy * maxFactor);
	float z = sqrt(1.0 - d * d);
	float r = atan(d, z) / 3.1415926535 * _scale;
	float phi = atan(xy.y, xy.x);
	uv.x = r * cos(phi) + 0.5;
	uv.y = r * sin(phi) + 0.5;
	} else {
	uv = _st.xy;
	}
	return uv;
	}

	vec4 sphereTexture(in sampler2D _tex, in vec2 _uv, float _time) {
	vec2 st = sphereCoords(_uv, 1.0);
	float aspect = u_tex0Resolution.y/u_tex0Resolution.x;
	st.x = fract(st.x * aspect + _time);
	return texture2D(_tex, st);
	}

	void main() {
	vec2 uv = gl_FragCoord.xy / u_resolution.xy;
	vec3 diff = vec3( vec2(1.0) / u_resolution.xy, 0.0);
	vec2 mouse_uv = u_mouse.xy / u_resolution.xy;
	float mouse_pointer = smoothstep(1.5, 0.5, length((mouse_uv - uv) * u_resolution) );

	#if defined( BUFFER_0 )
	// Ping
	vec4 center = texture2D(u_buffer1, uv);
	float top = texture2D(u_buffer1, uv - diff.zy).r;
	float left = texture2D(u_buffer1, uv - diff.xz).r;
	float right = texture2D(u_buffer1, uv + diff.xz).r;
	float bottom = texture2D(u_buffer1, uv + diff.zy).r;

	float red = -(center.g - 0.5) * 2.0 + (top + left + right + bottom - 2.0);
	red += mouse_pointer; // mouse
	red *= 0.98; // damping
	red *= step(0.1, u_time); // hacky way of clearing the buffer
	red = 0.5 + red * 0.5;
	red = clamp(red, 0., 1.);
	gl_FragColor = vec4(red, center.r, 0.0, 0.0);

	#elif defined( BUFFER_1 )
	// Pong
	// Note: in this example you can get away with only one buffer...
	// still is good to show off how easy is to make another buffer
	vec4 ping = texture2D(u_buffer0, uv, 0.0);
	if (u_time < 1.) {
	ping = vec4(vec3(20.5), 1.);
	}
	gl_FragColor = ping;

	#else
	// Main Buffer
	vec4 ripples = texture2D(u_buffer1, uv);
	float offset = ripples.r - 0.5;

	vec2 st = gl_FragCoord.xy/u_resolution.xy;
	st = scale(st, 2.0);
	st = ratio(st, u_resolution);

	st += offset;
	vec4 color = sphereTexture(u_tex0, st, u_time * 0.01);
	float radius = 1.0 - circleSDF(st);
	color.rgb *= smoothstep(0.001, 0.02, radius);
	color.rgb += (ripples.r - .5) * 2.;

	gl_FragColor = color;

	#endif

	}
	" width="320" height="200"></canvas>
	</div>
	</body>
	<script>
	var canvas = document.getElementById("glslCanvas");
	var sandbox = new GlslCanvas(canvas);
	var texCounter = 0;
	var sandbox_content = "";
	var sandbox_title = "";
	var sandbox_author = "";
	var sandbox_thumbnail = "";
	var quality = 10; // 1 = normal
	canvas.width = window.innerWidth / quality;
	canvas.height = window.innerHeight / quality;
	canvas.style.transform = 'translate(-50%,-50%) scale('+quality+')';
	</script>
	</html>