diff --git a/07/tmp/warp-shape.frag b/07/tmp/warp-shape.frag new file mode 100644 index 0000000..7f02d91 --- /dev/null +++ b/07/tmp/warp-shape.frag @@ -0,0 +1,39 @@ +// Author @patriciogv - 2015 +// http://patriciogonzalezvivo.com + +#ifdef GL_ES +precision mediump float; +#endif + +#define PI 3.14159265359 +#define TWO_PI 6.28318530718 + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +float shape(vec2 st, float N){ + st = st *2.-1.; + float a = atan(st.x,st.y)+PI; + float r = TWO_PI/floor(N); + return cos(floor(.5+a/r)*r-a)*length(st); +} + +void main(){ + vec2 st = gl_FragCoord.xy/u_resolution.xy; + st.x *= u_resolution.x/u_resolution.y; + vec3 color = vec3(0.0); + + float sides = u_time*.5; + float minSides = 3.; + float maxSides = 6.; + + float d = mix(shape(st,minSides+mod(sides,maxSides)), + shape(st,minSides+mod(sides+1.,maxSides)), + pow(fract(sides),20.)); + + // Size + d = step(.4,d); + + gl_FragColor = vec4(vec3(1.0-d),1.0); +} \ No newline at end of file diff --git a/examples/07/distanceFieldAnimate.frag b/examples/07/distanceFieldAnimate.frag new file mode 100755 index 0000000..6e74feb --- /dev/null +++ b/examples/07/distanceFieldAnimate.frag @@ -0,0 +1,40 @@ +#ifdef GL_ES +precision mediump float; +#endif + + +#define TWO_PI 6.28318530718 +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +// rotation transformation matrix +mat2 rotationMatrix( float angle) +{ + return mat2( cos( angle ), -sin( angle ), + sin( angle ), cos( angle )); +} + +void main(){ + vec2 st = gl_FragCoord.xy/u_resolution.xy; + + vec3 color = vec3(0.0); + float d = 1.0; + + // Remap the space to -1. to 1. + st = (st *2.-1. ); + + // Remap the coordinates with rotation using transformation matrix + st = st * rotationMatrix(u_time/1.5); + // Create secondary set of coordinates rotated in opposing direction + vec2 st2 = st * rotationMatrix(u_time * -2.); + + // Make the distance field - composite the different formulars together + d = length( abs(st2)- sin(u_time+ 0.5) +0.9 ); + d *= 1. - length( 1. - max(abs(st)-sin(u_time/1.),0.) ) ; + d *= length( min(abs(st2)- sin((u_time/ 4.)), sin(u_time / 10. + 0.1)) ); + + // Visualize the distance field + gl_FragColor = vec4( clamp (fract(d* abs(sin(u_time/ 4.)) ), 0.6, 0.1) , clamp(fract(d* abs(log(u_time/10.)) ), 0.9, 1.), clamp ( 1. -abs(cos(u_time)), 0.5, 1. ), fract(d* abs(sin(u_time/ 4.)) )); + +} \ No newline at end of file diff --git a/examples/07/dothh489-DistanceA.frag b/examples/07/dothh489-DistanceA.frag new file mode 100644 index 0000000..9378bca --- /dev/null +++ b/examples/07/dothh489-DistanceA.frag @@ -0,0 +1,32 @@ +// By Hang Do Thi Duc ( http://22-8miles.com ) +// For Shader Studio Course https://github.com/patriciogonzalezvivo/ss2015 + +#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; + st *= 4.; + st -= 2.; + float pct = 0.0; + // pct = distance(st,vec2(0.4)) + distance(st,vec2(0.6)); + // pct = distance(st,vec2(0.4)) * distance(st,vec2(0.6)); + // pct = max(distance(st,vec2(0.4)),distance(st,vec2(0.6))); + // pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6))); + + vec2 a = vec2(0.4); + a.x = sin(u_time * 4.); + a.y = cos(u_time * 2.); + vec2 b = vec2(0.6); + pct = min(distance(st, a),distance(st, b)) + distance(st, a); + pct = 1.-pct; + + vec3 color = vec3(pct); + + gl_FragColor = vec4( color, 1.0 ); +} \ No newline at end of file diff --git a/examples/07/dothh489-animated.frag b/examples/07/dothh489-animated.frag new file mode 100644 index 0000000..b63c857 --- /dev/null +++ b/examples/07/dothh489-animated.frag @@ -0,0 +1,28 @@ +// By Hang Do Thi Duc ( http://22-8miles.com ) +// For Shader Studio Course https://github.com/patriciogonzalezvivo/ss2015 + +#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; + vec3 color = vec3(0.0); + + vec2 pos = vec2(0.5)-st; + + float r = length(pos)*2.0; + float a = atan(pos.y,pos.x); + + + float f = abs(cos(a*12. + sin(u_time * 0.2))*sin(a*3. + cos(u_time * 0.3)))*.8+.1; + float b = 1.-smoothstep( f, f+0.2, sin(r * 2.)); + + color = vec3( b ); + + gl_FragColor = vec4(color, 1.0); +} \ No newline at end of file diff --git a/examples/07/dothh489-fct_move.frag b/examples/07/dothh489-fct_move.frag new file mode 100644 index 0000000..ebe000a --- /dev/null +++ b/examples/07/dothh489-fct_move.frag @@ -0,0 +1,37 @@ +// By Hang Do Thi Duc ( http://22-8miles.com ) +// For Shader Studio Course https://github.com/patriciogonzalezvivo/ss2015 + +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +float circle (float sc, float r, float sm, float posX, float posY, vec2 st){ + + vec2 toCenter; + toCenter.x = posX-st.x; + toCenter.y = posY-st.y; + float pct = length(toCenter) * sc; + pct = smoothstep(r-sm, r+sm, pct); + return pct; +} + +void main(){ + vec2 st = gl_FragCoord.xy/u_resolution; + float pct = 0.0; + float si = abs(sin(u_time * 3.14)); + float co = abs(sin(u_time * 3.14)); + pct = circle(8., 0.2, 0.1, mod(u_time * 0.8, 1.5) - 0.2, si, st); + pct *= circle(5., 0.2, 0.1, sin(u_time), cos(u_time), st); + pct *= circle(2., 0.1, 0.1, si, mod(u_time * 0.2, 1.5) - 0.5, st); + + vec3 color = vec3(0.0); + vec3 colorA = vec3(co, 0.3, si); + vec3 colorB = vec3(si, co, 0.5); + color = mix(colorA, color, pct); + + gl_FragColor = vec4( color, 1.0 ); +} \ No newline at end of file diff --git a/examples/07/dothh489-mondrian.frag b/examples/07/dothh489-mondrian.frag new file mode 100644 index 0000000..1c6a9f6 --- /dev/null +++ b/examples/07/dothh489-mondrian.frag @@ -0,0 +1,65 @@ +// By Hang Do Thi Duc ( http://22-8miles.com ) +// For Shader Studio Course https://github.com/patriciogonzalezvivo/ss2015 + +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform float u_time; + +vec3 rect (float w, float h, float s, float x, float y){ + float sth = s * 0.5; + float l = 0.5 - w*0.5; + float hor = smoothstep(l, l + sth, x); + float r = 0.5 + w*0.5; + hor -= smoothstep(r - sth, r, x); + float b = 0.5 - h*0.5; + float ver = smoothstep(b, b + sth, y); + float t = 0.5 + h*0.5; + ver -= smoothstep(t - sth, t, y); + return vec3(hor * ver); +} + +vec3 rectOutl (float w, float h, float border, float x, float y){ + //border relative to width and height + // border = w * h * 0.5 * border; + float hor = step(0.5 - w*0.5, x); + hor -= step(0.5 - w*0.5 + border, x); + hor += step(0.5 + w*0.5 - border, x); + hor -= step( 0.5 + w*0.5, x); + hor *= step(0.5 - h*0.5, y) - step(0.5 + h*0.5, y); + float ver = step(0.5 - h*0.5, y); + ver -= step(0.5 - h*0.5 + border, y); + ver += step( 0.5 + h*0.5 - border, y); + ver -= step( 0.5 + h*0.5, y); + ver *= step(0.5 - w*0.5, x) - step(0.5 + w*0.5, x); + return vec3(hor + ver); +} + +void main() { + vec2 st = gl_FragCoord.xy/u_resolution; + vec3 color = vec3(1.); + + vec3 colorA = rect(0.1, 0.6, 0., st.x - 0.5, st.y - 0.45); + colorA = mix(vec3(0.), vec3(0.,.3,.9), colorA); + colorA += rectOutl(0.1, 0.6, 0.02, st.x - 0.5, st.y - 0.45); + + vec3 colorB = rect(0.4, 0.8, 0., st.x - 0.5, st.y + 0.8); + colorB = mix(vec3(0.), vec3(.9,.7,.2), colorB); + colorB += rectOutl(0.4, 0.8, 0.02, st.x - 0.5, st.y + 0.8); + + vec3 colorC = rect(0.6, 0.6, 0., st.x + 0.5, st.y - 0.45); + colorC = mix(vec3(0.), vec3(.3,.9,.9), colorC); + colorC += rectOutl(0.6, 0.6, 0.02, st.x + 0.5, st.y - 0.45); + + vec3 rects = rectOutl(0.75, 1.6, 0.02, st.x - 0.02, st.y); + rects += rectOutl(1.2, 0.7, 0.02, st.x, st.y + 0.07); + rects += rectOutl(0.4, .94, 0.02, st.x + 0.02, st.y - 0.05); + rects += rectOutl(0.34, 0.77, 0.02, st.x - 0.33, st.y + 0.22); + + color = rects + colorA + colorB + colorC; + + color = 1. - color; + gl_FragColor = vec4(color, 1.0); +} \ No newline at end of file diff --git a/examples/07/fengp239-distance.frag b/examples/07/fengp239-distance.frag new file mode 100644 index 0000000..71f84b4 --- /dev/null +++ b/examples/07/fengp239-distance.frag @@ -0,0 +1,35 @@ +// By Peiying Feng +// For Shader Studio Course https://github.com/patriciogonzalezvivo/ss2015 + +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform float u_time; + +void main() { + vec2 st = gl_FragCoord.xy/u_resolution; + float pct = 0.0; + float m = abs(sin(u_time*0.5)); + float n = abs(cos(u_time*0.5))*2.0; + + // 01 + // st = st * 2.0 - 0.8; + // pct = ceil(distance(st,vec2(0.2))*m) - step(0.2, distance(st, vec2(0.1*m))); + // gl_FragColor = vec4(vec3(1.0, 1.0*pct, 0.3*pct), 1.0); + + //02 + // st = st * 2.0 - 0.5; + // pct = exp(distance(st,vec2(0.2)))*m - distance(st, vec2(0.8)) * distance(st, vec2(0.1*m)); + // gl_FragColor = vec4(vec3(0.0, 0.5*pct, pct), 1.0); + + //03 + st.x = st.x * 10.0 - 10.0 * m; + st.y = st.y * 10.0 - 10.0 * abs(sin(u_time*0.1)); + pct = m*distance(st, vec2(0.5*n))*0.2 / distance(st, vec2(0.2))*2.0; + gl_FragColor = vec4(vec3(0.0, 0.5*pct, pct), 1.0); + + // How to travel in a circular motion? + +} \ No newline at end of file diff --git a/examples/07/florr422-polar.frag b/examples/07/florr422-polar.frag new file mode 100644 index 0000000..ee26a8e --- /dev/null +++ b/examples/07/florr422-polar.frag @@ -0,0 +1,55 @@ +// By Regina Flores Mir ( http://www.reginafloresmir.com ) +// For Shader Studio Course https://github.com/patriciogonzalezvivo/ss2015 + +#ifdef GL_ES +precision mediump float; +#endif + +#define PI 3.14159265359 +#define TWO_PI 6.28318530718 + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +// Reference to +// http://thndl.com/square-shaped-shaders.html + +//NOTE FUNCTION ONLY WORKS FOR N < 20 +//THEN IT TURNS INTO A CIRCLE +float geomFun(int n, vec2 st){ + + // Number of sides of your shape + int N = n; + + // Angle and radius from the current pixel + float a = atan(st.x,st.y)+PI; + float r = TWO_PI/float(N); + + // Shaping function that modulate the distance + //Uncomment these to try different ones + + // float d = cos(floor(.5+a/r)*r-a)*length(st); + // float d = cos(floor(.5+a/r)*r-a)* length( abs(st)-.3 ); + // float d = cos(floor(.5+a/r)*r-a)*length( max(abs(st)-.3,0.) ); + float d = cos(floor(.5+a/r)*r-a)*length( min(abs(st)-.4,0.) ); + + + return d; +} + +void main(){ + vec2 st = gl_FragCoord.xy/u_resolution.xy; + st.x *= u_resolution.x/u_resolution.y; + vec3 color = vec3(0.0); + float d = 0.0; + + // Remap the space to -1. to 1. + st = st *2.-1.; + + float myfun = geomFun(5, st); + color = vec3(1.0-smoothstep(.4,.41, myfun)); + // color = vec3(d); + + gl_FragColor = vec4(color,1.0); +} \ No newline at end of file diff --git a/examples/07/gernc653-animated.frag b/examples/07/gernc653-animated.frag new file mode 100644 index 0000000..5bc3de1 --- /dev/null +++ b/examples/07/gernc653-animated.frag @@ -0,0 +1,30 @@ +// By Camila Gernhardt Nakamura ( camilanakamura.com ) +// For Shader Studio Course https://github.com/patriciogonzalezvivo/ss2015 + +#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; + vec3 color = vec3(0.0); + + vec2 pos = vec2(0.5)-st; + + float r = length(pos)*2.0; + float a = atan(pos.y,pos.x); + + float f = cos(a*3.); + // f = abs(cos(a*3.)); + // f = abs(cos(a*2.5))*.5+.3; + f = abs(cos(a*12.)*sin(a*3.*u_time))*.8+.1; + // f = smoothstep(-.5,1., cos(a*10.))*0.2+0.5; + + color = vec3( 1.-smoothstep(f,f+0.02,r) ); + + gl_FragColor = vec4(color, 1.0); +} \ No newline at end of file diff --git a/examples/07/gernc653-flowerBeat.frag b/examples/07/gernc653-flowerBeat.frag new file mode 100644 index 0000000..6e207d8 --- /dev/null +++ b/examples/07/gernc653-flowerBeat.frag @@ -0,0 +1,31 @@ +// By Camila Gernhardt Nakamura ( camilanakamura.com ) +// For Shader Studio Course https://github.com/patriciogonzalezvivo/ss2015 + +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + + +// gestalt!! star and flower :) +// unintentionally it goes with the beat of this song https://www.youtube.com/watch?v=ggiyRLrH4AA + +void main(){ + vec2 st = gl_FragCoord.xy/u_resolution.xy; + + vec3 color = vec3(0.0); + + vec2 pos = (vec2(0.5)-st); + + float r = length(pos)*3.0; + float a = atan(pos.y,pos.x); + + float f = smoothstep(-.5,1., (cos(a*10.))*0.2*10.)+0.5 * (0.5- sin(a*5.)) * fract(u_time); + + color = vec3( 1.-smoothstep(f,f+0.02,r) ); + + gl_FragColor = vec4(color, 1.0); +} \ No newline at end of file diff --git a/examples/07/henrt555-logo.frag b/examples/07/henrt555-logo.frag new file mode 100644 index 0000000..79582e5 --- /dev/null +++ b/examples/07/henrt555-logo.frag @@ -0,0 +1,55 @@ +// By Tyler Henry ( http://tylerhenry.com ) +// For Shader Studio Course https://github.com/patriciogonzalezvivo/ss2015 + +#ifdef GL_ES +precision mediump float; +#endif + +#define PI 3.14159265359 +#define TWO_PI 6.28318530718 + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +// Reference to +// http://thndl.com/square-shaped-shaders.html + +float customDistField(vec2 st, float sides){ + + float dist = 0.0; + + // Remap the space to -1. to 1. + st = st *2.-1.; + + // Angle and radius from the current pixel + float a = atan(st.x,st.y)+PI/2.; + float r = TWO_PI/float(sides); + + // Shaping function that modulate the distance + dist = cos(floor(.5+a/r)*r-a)*length(st); + + return dist; +} + +void main(){ + vec2 st = gl_FragCoord.xy/u_resolution.xy; + st.x *= u_resolution.x/u_resolution.y; + vec3 color = vec3(0.0); + + + float d1 = customDistField(st, 6.); + float d2 = customDistField(vec2(st.x,st.y+0.29), 6.); + + vec3 color1 = vec3(1.0-smoothstep(.5,.51,d1)); + vec3 color2 = vec3(1.0-smoothstep(.2,.21,d1)); + vec3 color3 = vec3(1.0-smoothstep(.5,.51,d2)); + vec3 nodeN = clamp(color1 - color2 - color3, 0.0, 1.0); + + vec3 hex = 1. - vec3(smoothstep(.8,.81,d1)); + hex *= vec3(0.506,0.737,0.290); //make it green + + color = hex - nodeN; + + gl_FragColor = vec4(color,1.0); +} \ No newline at end of file diff --git a/examples/07/henrt555-mondrian.frag b/examples/07/henrt555-mondrian.frag new file mode 100644 index 0000000..cd2efee --- /dev/null +++ b/examples/07/henrt555-mondrian.frag @@ -0,0 +1,67 @@ +// By Tyler Henry ( http://tylerhenry.com ) +// For Shader Studio Course https://github.com/patriciogonzalezvivo/ss2015 + +#ifdef GL_ES +precision mediump float; +#endif + +#define PI 3.14159265359 + +uniform vec2 u_resolution; +uniform float u_time; + +vec3 beige = vec3(0.953,0.941,0.914); +vec3 red = vec3(0.973,0.259,0.173); +vec3 blue = vec3(0.220,0.243,0.506); +vec3 yellow = vec3(0.992,0.745,0.275); +vec3 black = vec3(0.027,0.039,0.071); + +float rect(vec2 st, vec2 center, vec2 size, float smoothing){ + + vec4 edges = vec4(center.x - size.x*0.5, center.y - size.y*0.5, center.x + size.x*0.5, center.y + size.y*0.5); + + float left = smoothstep(edges.x-smoothing,edges.x, st.x); + float bottom = smoothstep(edges.y-smoothing,edges.y, st.y); + float right = 1.0 - smoothstep(edges.z,edges.z+smoothing, st.x); //invert result + float top = 1.0 - smoothstep(edges.w,edges.w+smoothing, st.y); //invert result + + return left * bottom * right * top; +} + + +float rectOutline(vec2 st, vec2 center, vec2 size, float smoothing, float lineWidth){ + + float rectOutside = rect(st, center, size + lineWidth, smoothing); + float rectInside = 1.0 - rect(st, center, size - lineWidth, smoothing); //invert colors + + return rectOutside * rectInside; + +} + +void main() { + + vec2 st = gl_FragCoord.xy/u_resolution.xy; //normalize coords + vec3 color = vec3(0.0); + + float rect1 = rect(st, vec2(0.245,0.755), vec2(0.49, 0.49), 0.0); //st, center.xy, size.xy, smoothing + vec3 rect1Color = red * rect1; + + float rect2 = rect(st, vec2(0.755,0.755), vec2(0.49, 0.49), 0.0); //st, center.xy, size.xy, smoothing + vec3 rect2Color = beige * rect2; + + float rect3 = rect(st, vec2(0.245,0.245), vec2(0.49, 0.49), 0.0); + vec3 rect3Color = beige * rect3; + + float rect4 = rect(st, vec2(0.667,0.333), vec2(0.313, 0.313), 0.0); + vec3 rect4Color = beige * rect4; + + float rect5 = rect(st, vec2(0.667,0.075), vec2(0.31, 0.165), 0.0); + vec3 rect5Color = yellow * rect5; + + float rect6 = rect(st, vec2(1.0,0.15), vec2(0.313, 0.313), 0.0); + vec3 rect6Color = blue * rect6; + + color = vec3(rect1Color + rect2Color + rect3Color + rect4Color + rect5Color + rect6Color); + + gl_FragColor = vec4(color,1.0); +} \ No newline at end of file diff --git a/examples/07/henrt555-moving.frag b/examples/07/henrt555-moving.frag new file mode 100644 index 0000000..7b03306 --- /dev/null +++ b/examples/07/henrt555-moving.frag @@ -0,0 +1,55 @@ +// By Tyler Henry ( http://tylerhenry.com ) +// For Shader Studio Course https://github.com/patriciogonzalezvivo/ss2015 + +#ifdef GL_ES +precision mediump float; +#endif + +#define PI 3.14159265359 + +uniform vec2 u_resolution; +uniform float u_time; + + +vec3 beige = vec3(0.953,0.941,0.914); +vec3 red = vec3(0.973,0.259,0.173); +vec3 blue = vec3(0.220,0.243,0.506); +vec3 yellow = vec3(0.992,0.745,0.275); +vec3 black = vec3(0.027,0.039,0.071); + + +float circle(vec2 st, vec2 center, float radius, float smoothing){ + + float dist = distance(st,center); //generate distance field cone + + float circle = smoothstep(radius, radius+smoothing, dist); //slice that cone + + return clamp(1.0 - circle, 0.0, 1.0); //invert + clamp (is clamp needed?) + +} + +void main(){ + vec2 st = gl_FragCoord.xy/u_resolution; + float pct = 0.0; + + float radius = sin(u_time*6.) * 0.01 + 0.2; + float smoothing = 800000. * pow(radius, 10.); + + float circle1 = circle(st, vec2(0.5), radius, smoothing); //st, center.xy, radius, smoothing + vec3 color1 = red * circle1; + + vec2 pos2 = vec2(cos(u_time) * 0.2 + 0.5, sin(u_time) * 0.2 + 0.5); + + float circle2 = circle(st, pos2, 0.2, 0.05); //st, center.xy, radius, smoothing + vec3 color2 = yellow * circle2; + + vec2 pos3 = vec2(cos(u_time) * 0.3 + 0.6, sin(u_time) * 0.4 + 0.4); + + float circle3 = circle(st, pos3, 0.2, 0.05); //st, center.xy, radius, smoothing + vec3 color3 = blue * circle3; + + + vec3 color = color1 + color2 + color3; + + gl_FragColor = vec4(color, 1.0); +} \ No newline at end of file diff --git a/examples/07/lims439-circleComposition.frag b/examples/07/lims439-circleComposition.frag new file mode 100755 index 0000000..39b03a8 --- /dev/null +++ b/examples/07/lims439-circleComposition.frag @@ -0,0 +1,61 @@ +// By Si Ping Lim ( http://www.handson.sg ) +// For Shader Studio Course https://github.com/patriciogonzalezvivo/ss2015 + +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +//shaping function from wk 2 assignment +float plot2( float pct){ + float t = (abs( sin( (pct +0.666) / 0.125 ) * 0.449 / 1.144 ) * 0.647 * 0.921 + ((fract( pct ) * 0.845))); + return t; +} + +float drawCirclePixel (vec2 pixel, vec2 center, float radius) { + float dist = length(center - pixel) ; + dist = smoothstep (1.,0.97, dist / (radius)); + return dist; +} + +vec3 drawComp1 (vec2 pixel) { + vec3 color1 = vec3(1., 0.3, 0.5); + vec3 color2 = vec3(0., 0.3, 1.); + + float pulse = sin(u_time); + float pulse2 = plot2(u_time/ 10.); + + float circ1 = drawCirclePixel(pixel.xy , vec2 (80.,60.) , 60. - (30.*pulse) ); + + float circ2 = drawCirclePixel(pixel.xy , vec2 (u_mouse.xy) , 40. + (80.* pulse2)); + vec3 color = vec3(circ1)*color1 + vec3(circ2)* color2; + return color; +} +vec3 drawComp2 (vec2 pixel) { + vec3 color1 = vec3(1., 0.3, 0.5); + vec3 color2 = vec3(0., 0.3, 1.); + + float pulse = sin(u_time); + + float circ1 = drawCirclePixel(pixel.xy , vec2 (250.,250.) , 60. + (30.*pulse) ); + float circ1Mask = drawCirclePixel(pixel.xy , vec2 (250.,250.) , 48. +(30.*pulse)); + + float circ2 = drawCirclePixel(pixel.xy , vec2 (u_mouse.xy) , 80. ); + float circ2Mask = drawCirclePixel(pixel.xy , vec2 (u_mouse.xy) , 68. ); + + float circ3 = drawCirclePixel(pixel.xy , vec2 (160.,270.) , 80. ); + float circ3Mask = drawCirclePixel(pixel.xy , vec2 (160.,270.) , 68. ); + + vec3 color = vec3 (clamp( circ1 + circ2 + circ3, 0., 1. ) - clamp ( circ1Mask + circ2Mask + circ3Mask, 0.,1.) ); + return color * color1; +} +void main(){ + + + vec3 color = drawComp2(gl_FragCoord.xy); + + gl_FragColor = vec4( color, 1.0 ); +} \ No newline at end of file diff --git a/examples/07/lims439-combineAnimate.frag b/examples/07/lims439-combineAnimate.frag new file mode 100755 index 0000000..93e432b --- /dev/null +++ b/examples/07/lims439-combineAnimate.frag @@ -0,0 +1,84 @@ +// By Si Ping Lim ( http://www.handson.sg ) +// For Shader Studio Course https://github.com/patriciogonzalezvivo/ss2015 + +#ifdef GL_ES +precision mediump float; +#endif + +#define PI 3.14159265359 +#define TWO_PI 6.28318530718 + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +// rotation transformation matrix +mat2 rotationMatrix( float angle) +{ + return mat2( cos( angle ), -sin( angle ), + sin( angle ), cos( angle )); +} +float plot1 (float x){ + float t = abs( sin( x / (0.5 ) ) * 0.27 / 0.89 ) * 0.78; + return t; +} +float drawPolyOutline (vec2 _pixel, vec2 _center, float _size, int _sides, float _thickness, float _rotation) { + _pixel /= u_resolution.xy; + _center /= u_resolution.xy; + _pixel -= _center; + _pixel.x *= u_resolution.x/u_resolution.y; + _size /= u_resolution.y; + _thickness /= u_resolution.y; + // Angle and radius from the current pixel + vec2 pos = _pixel ; + float a = atan(pos.x,pos.y)+PI + _rotation; + float r = TWO_PI/float( _sides) ; + + // Shaping function that modulate the distance + float d = cos(floor(.5 + a/r) * r - a ) * length(_pixel ); + return (smoothstep(_size- _thickness -.005, _size-_thickness, d) - smoothstep(_size, _size +.005, d) ) ; +} + +void main( ) +{ + // default background colour + gl_FragColor = vec4(0.0,0.0,0.,1.0); + + float mouseModifier = 1. - length( u_mouse.xy - u_resolution.xy/2. )/u_resolution.x; + + // start with a circle in the middle of the screen + float noOfCircles = 40.0 + sin(u_time/4.)* 20.; + float angleToRotate = 360. / (noOfCircles ) * PI / 180. ; + + + vec2 circleCentre = vec2(u_resolution.xy) * 0.5; + float angle = u_time * 1.0; + float radius = u_resolution.y * 0.5; + float angleSign = 1.0; // which way round the circle is going + float width = .1; // how thick the lines are + + + vec3 c = vec3(0); + float baseSize = ( u_resolution.x*.3 - (u_resolution.x*.03 * noOfCircles/10.) ); + for(float i = 0.0; i < noOfCircles; ++i) + { + // set the start x of this object, added mouse modifier to apply effects, and shaping function to animate the position, + // technically y position can be set to 0, cause the final xy is calculated by using the transformation matrix with the angle of rotation. Since the angle increase with each step, the positions will differ item to item + float goX = baseSize * mouseModifier + plot1(abs ((u_time/2. ) -0.1* i))* 400. ; + + //Generate a random value to use; + float w = fract((sin(goX*7.0+31.0*goX + 0.01*u_time))*13.545317); + //define the Angle that will be used to translate frag.xy to position required to create a ring of objects + float goA = (5.* mouseModifier) * angleToRotate * i + sin(u_time )- u_time/2. ; + // define the virtual xy of the object by transforming it by using the rotationMatrix, add back mid point of screen cause rotation matrix origin is always 0,0 + vec2 newPos = vec2( goX ,00.) * rotationMatrix(goA) + u_resolution.xy * .5; + //apply some shaping function to the size, limit transformation from 1 to 0.5 so it doesn't totally disapper + float size = smoothstep (1., .5, abs( cos(u_time/2. + i/6.) )); + float polyDist = drawPolyOutline(gl_FragCoord.xy, newPos , baseSize*size, 7, width , u_time ); + vec3 dotC = vec3(cos(goA), sin(angle+TWO_PI), sin(radius*TWO_PI ))*0.5+0.5 + w * .4; + c += vec3(polyDist * dotC); + + + } + gl_FragColor += vec4 (c, 1.); +} \ No newline at end of file diff --git a/examples/07/lims439-combineLogo.frag b/examples/07/lims439-combineLogo.frag new file mode 100755 index 0000000..4b4e830 --- /dev/null +++ b/examples/07/lims439-combineLogo.frag @@ -0,0 +1,100 @@ +// By Si Ping Lim ( http://www.handson.sg ) +// For Shader Studio Course https://github.com/patriciogonzalezvivo/ss2015 + +#ifdef GL_ES +precision mediump float; +#endif + +#define PI 3.14159265359 +#define TWO_PI 6.28318530718 + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +// Reference to +// http://thndl.com/square-shaped-shaders.html + +float drawRectAbs (vec2 pixel, vec2 center, vec2 size) { + //vec2 t = vec2 (size.x , size.y); + vec2 r = abs( pixel.xy - center.xy - size.xy / 2. ); + float sX = step(size.x/2., r.x ); + float sY = step(size.y/2., r.y ); + float s = max( sX, sY ) ; + return s; +} +float drawRectOutlineAbs (vec2 pixel, vec2 center, vec2 size, float thickness) { + float s = drawRectAbs(pixel, center, size); + s += (1. - drawRectAbs(pixel , center + thickness, size - (thickness * 2.) )); + // s = step(.4, s) * step( s, .3); + return s; +} + +float drawPoly (vec2 pixel, vec2 center, float size, int sides) { + + pixel /= u_resolution.xy; + center /= u_resolution.xy; + pixel -= center; + pixel.x *= u_resolution.x/u_resolution.y; + size /= u_resolution.y; + // Angle and radius from the current pixel + vec2 pos = pixel ; + float a = atan(pos.x,pos.y)+PI ; + float r = TWO_PI/float( sides) ; + + // Shaping function that modulate the distance + float d = cos(floor(.5 + a/r) * r - a ) * length(pixel ); + + return 1.0 - smoothstep(size, size +.005, d) ; +} +float drawPolyOutline (vec2 pixel, vec2 center, float size, int sides, float thickness) { + pixel /= u_resolution.xy; + center /= u_resolution.xy; + pixel -= center; + pixel.x *= u_resolution.x/u_resolution.y; + size /= u_resolution.y; + thickness /= u_resolution.y; + // Angle and radius from the current pixel + vec2 pos = pixel ; + float a = atan(pos.x,pos.y)+PI ; + float r = TWO_PI/float( sides) ; + + // Shaping function that modulate the distance + float d = cos(floor(.5 + a/r) * r - a ) * length(pixel ); + return (smoothstep(size- thickness -.005, size-thickness, d) - smoothstep(size, size +.005, d) ) ; +} +float drawCirclePixelOutline (vec2 pixel, vec2 center, float radius, float thickness) { + float dist = length(center - pixel) ; + thickness /= radius; + float antiAlias = 2./radius; + dist = smoothstep (1. -thickness - antiAlias, 1.- thickness , dist / (radius)) - smoothstep ( 1.,1. + antiAlias, dist / (radius)) ; + return dist; +} + +float drawCircleRings (vec2 pixel, vec2 center, float radius, int count) { + float spacing = 0.02; + float dist = length(center - pixel) ; + float antiAlias = 2./radius; + float thickness = 1./float(count) -spacing; + float t = 0.; + for(int i=0;i