Created
July 30, 2017 16:52
-
-
Save ear/1b1207c8efc794058615e751afb9119c to your computer and use it in GitHub Desktop.
glsl fun example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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.); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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