Skip to content

Instantly share code, notes, and snippets.

@llliiu
Created October 12, 2016 19:41
Show Gist options
  • Save llliiu/ca26b8a3ad35bcc16228acf921eab008 to your computer and use it in GitHub Desktop.
Save llliiu/ca26b8a3ad35bcc16228acf921eab008 to your computer and use it in GitHub Desktop.
Gradient Canvas
<html>
<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/build/GlslCanvas.js"></script>
<body>
<canvas class="glslCanvas" data-fragment="
// Author: Lu Liu
// Title: 200C HW1
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
float redc = st.x * abs(sin(u_time/2.));
float greenc = st.y * abs(cos(u_time/2.));
float pct;
if(st.x<=u_resolution.x/2.)
{pct = .6;}
if(st.x>=u_resolution.x/2.)
{pct = 1.;}
vec3 color= vec3(redc*pct,greenc*pct,(u_mouse.x/u_resolution.x)*pct);
gl_FragColor = vec4(color,1.0);
}
"
width="600" height="600"> </canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment