Skip to content

Instantly share code, notes, and snippets.

@ear
Created July 30, 2017 16:52
Show Gist options
  • Save ear/1b1207c8efc794058615e751afb9119c to your computer and use it in GitHub Desktop.
Save ear/1b1207c8efc794058615e751afb9119c to your computer and use it in GitHub Desktop.
glsl fun example
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
#define PI 3.14159265358979
uniform float u_time;
float stroke(float x, float s, float w) {
float d = step(s,x+w*.5)-step(s,x-w*.5);
return clamp(d,0.,1.);
}
void main() {
vec3 color = vec3(0.);
vec2 st = gl_FragCoord.xy/u_resolution;
float offset = cos((.3*u_time+st.y)*PI*10.)*.05;
float width = 0.02+0.08*abs(cos(u_time*PI));
color += stroke(st.x,.28+offset,width);
color += stroke(st.x,.5 +offset,width);
color += stroke(st.x,.72+offset,width);
gl_FragColor = vec4(color,1.);
}
<html>
<head>
<title>pixel spirit deck fun</title>
</head>
<body>
<canvas class="glslCanvas" data-fragment-url="glsl.frag" width="700" height="600" style="border: 1px solid #333"></canvas>
<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/build/GlslCanvas.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment