uforange/index.html

## index.html
<html>
    <script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/build/GlslCanvas.js"></script>
    <body>
    <canvas class="glslCanvas" data-fragment="
        #ifdef GL_ES
        precision mediump float;
        #endif

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

        #define TWO_PI 6.28318530718

        //  Function from Iñigo Quiles
        //  https://www.shadertoy.com/view/MsS3Wc
        vec3 hsb2rgb( in vec3 c ){
            vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0);
            rgb = rgb*rgb*(3.0-2.0*rgb);
            return c.z * mix( vec3(1.0), rgb, c.y);
        }

        //circle function
        float circle(in vec2 _st, in float _radius){
            vec2 dist = _st-vec2(0.5);
            return 1.-smoothstep(_radius-(_radius*0.01),_radius+(_radius*0.01),dot(dist,dist)*4.0);
        }

        void main(){
            vec2 st = gl_FragCoord.xy/u_resolution.xy;

            vec2 toCenter = vec2(0.5)+st;

            float angle = atan(toCenter.y,toCenter.x);
            float radius = length(toCenter)*2.;

            vec3 color1 = vec3(circle(st,0.8));
            vec3 color2 = hsb2rgb(vec3((angle/TWO_PI)+(u_time)*0.05,radius,0.8));

            gl_FragColor = vec4( color1*color2, 1.0 );
        }
    "
    width="800" height="800"> </canvas>
    </body>
    </html>
	<html>
	<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/build/GlslCanvas.js"></script>
	<body>
	<canvas class="glslCanvas" data-fragment="
	#ifdef GL_ES
	precision mediump float;
	#endif

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

	#define TWO_PI 6.28318530718

	// Function from Iñigo Quiles
	// https://www.shadertoy.com/view/MsS3Wc
	vec3 hsb2rgb( in vec3 c ){
	vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0);
	rgb = rgbrgb(3.0-2.0*rgb);
	return c.z * mix( vec3(1.0), rgb, c.y);
	}

	//circle function
	float circle(in vec2 _st, in float _radius){
	vec2 dist = _st-vec2(0.5);
	return 1.-smoothstep(_radius-(_radius0.01),_radius+(_radius0.01),dot(dist,dist)*4.0);
	}

	void main(){
	vec2 st = gl_FragCoord.xy/u_resolution.xy;

	vec2 toCenter = vec2(0.5)+st;

	float angle = atan(toCenter.y,toCenter.x);
	float radius = length(toCenter)*2.;

	vec3 color1 = vec3(circle(st,0.8));
	vec3 color2 = hsb2rgb(vec3((angle/TWO_PI)+(u_time)*0.05,radius,0.8));

	gl_FragColor = vec4( color1*color2, 1.0 );
	}
	"
	width="800" height="800"> </canvas>
	</body>
	</html>