Skip to content

Instantly share code, notes, and snippets.

@llliiu

llliiu/index.html

Created October 12, 2016 22:12
Show Gist options
  • Save llliiu/3e45ec7814dce62222f408f2041f6ac2 to your computer and use it in GitHub Desktop.
Save llliiu/3e45ec7814dce62222f408f2041f6ac2 to your computer and use it in GitHub Desktop.
Download ZIP
Chaos Lines
Raw
index.html
<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 HW2
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float box(float a,float b,float c,float d, vec2 st) {
float v = (step(a,st.x)-step(b,st.x))* (step(c,st.y)-step(d,st.y));
return v;
}
float randX(vec2 st){
return fract(sin(st.x) * 23760.478*u_time) * fract(u_mouse.x / 10.0); // 13 1.3 0.3
}
float randY(vec2 st){
return fract(sin(st.y) * 22900.923*u_time) * fract(u_mouse.y / 10.0);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
float x0=0.;
float x1=x0+randX(st);
float x2=x1+randX(st);
float x3=x2+randX(st);
float y0=0.;
float y1=y0 + randY(st);
float y2=y1 + randY(st);
float y3=y2 + randY(st);
float red = smoothstep(box(x0,x2,y1,y3,st),box(x1,x3,y0,y2,st),abs(sin(u_time*2.)));
float green = smoothstep(box(x0,x2,y1,y3,st),box(x1,x3,y0,y2,st),abs(sin(u_time*3.)));
float blue = smoothstep(box(x0,x2,y1,y3,st),box(x1,x3,y0,y2,st),abs(sin(u_time*5.)));
gl_FragColor = vec4(red, green, blue, 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