diff --git a/examples/07/1454255754461.frag b/examples/07/1454255754461.frag new file mode 100644 index 0000000..0dedf5b --- /dev/null +++ b/examples/07/1454255754461.frag @@ -0,0 +1,97 @@ +// Author @kynd - 2016 +// http://www.kynd.info + +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +float smoothedge(float v) { + return smoothstep(0.0, 1.0 / u_resolution.x, v); +} + +float circle(vec2 p, float radius) { + return length(p) - radius; +} + +float rect(vec2 p, vec2 size) { + vec2 d = abs(p) - size; + return min(max(d.x, d.y), 0.0) + length(max(d,0.0)); +} + +float roundRect(vec2 p, vec2 size, float radius) { + vec2 d = abs(p) - size; + return min(max(d.x, d.y), 0.0) + length(max(d,0.0))- radius; +} + +float ring(vec2 p, float radius, float width) { + return abs(length(p) - radius) - width; +} + +float hexagon(vec2 p, float radius) { + vec2 q = abs(p); + return max(abs(q.y), q.x * 0.866025 + q.y * 0.5) - radius; +} + +float triangle(vec2 p, float size) { + vec2 q = abs(p); + return max(q.x * 0.866025 + p.y * 0.5, -p.y * 0.5) - size * 0.5; +} + +float ellipse(vec2 p, vec2 r, float s) { + return (length(p / r) - s); +} + +float capsule(vec2 p, vec2 a, vec2 b, float r) { + vec2 pa = p - a, ba = b - a; + float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 ); + return length( pa - ba*h ) - r; +} + +//http://thndl.com/square-shaped-shaders.html +float polygon(vec2 p, int vertices, float size) { + float a = atan(p.x, p.y) + 0.2; + float b = 6.28319 / float(vertices); + return cos(floor(0.5 + a / b) * b - a) * length(p) - size; +} + +float getShape(vec2 st, int i) { + if (i == 0) { + return circle(st, 0.4); + } else if (i == 1) { + return ring(st, 0.36, 0.08); + } else if (i == 2) { + return roundRect(st, vec2(0.32, 0.24), 0.08); + } else if (i == 3) { + return rect(st, vec2(0.4, 0.32)); + } else if (i == 4) { + return capsule(st, vec2(-0.25, -0.25), vec2(0.25, 0.25), 0.2); + } else if (i == 5) { + return ellipse(st, vec2(0.9, 1.2), 0.4); + } else if (i == 6) { + return triangle(st, 0.4); + } else if (i == 7) { + return polygon(st, 5, 0.4); + } else { + return hexagon(st, 0.4); + } +} + + +void main() { + vec2 st = gl_FragCoord.xy/u_resolution.xy; + + float t0 = mod(u_time * 2.0, 9.0); + float t1 = mod(u_time * 2.0 + 1.0, 9.0); + int i0 = int(floor(t0)); + int i1 = int(floor(t1)); + float f = fract(t0); + + st -= vec2(0.5, 0.5); + vec3 color = vec3(smoothedge(mix(getShape(st, i0), getShape(st, i1), f))); + + gl_FragColor = vec4(color, 1.0); +} \ No newline at end of file diff --git a/examples/07/1454255757379.frag b/examples/07/1454255757379.frag new file mode 100644 index 0000000..682328f --- /dev/null +++ b/examples/07/1454255757379.frag @@ -0,0 +1,75 @@ +// Author @kynd - 2016 +// http://www.kynd.info + +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec2 u_mouse; +uniform float u_time; + +float smoothedge(float v) { + return smoothstep(0.0, 1.0 / u_resolution.x, v); +} + +float circle(vec2 p, float radius) { + return length(p) - radius; +} + +float rect(vec2 p, vec2 size) { + vec2 d = abs(p) - size; + return min(max(d.x, d.y), 0.0) + length(max(d,0.0)); +} + +float roundRect(vec2 p, vec2 size, float radius) { + vec2 d = abs(p) - size; + return min(max(d.x, d.y), 0.0) + length(max(d,0.0))- radius; +} + +float ring(vec2 p, float radius, float width) { + return abs(length(p) - radius * 0.5) - width; +} + +float hexagon(vec2 p, float radius) { + vec2 q = abs(p); + return max(abs(q.y), q.x * 0.866025 + q.y * 0.5) - radius; +} + +float triangle(vec2 p, float size) { + vec2 q = abs(p); + return max(q.x * 0.866025 + p.y * 0.5, -p.y * 0.5) - size * 0.5; +} + +float ellipse(vec2 p, vec2 r, float s) { + return (length(p / r) - s); +} + +float capsule(vec2 p, vec2 a, vec2 b, float r) { + vec2 pa = p - a, ba = b - a; + float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 ); + return length( pa - ba*h ) - r; +} + +//http://thndl.com/square-shaped-shaders.html +float polygon(vec2 p, int vertices, float size) { + float a = atan(p.x, p.y) + 0.2; + float b = 6.28319 / float(vertices); + return cos(floor(0.5 + a / b) * b - a) * length(p) - size; +} + +void main() { + vec2 st = gl_FragCoord.xy/u_resolution.xy; + + float d = circle(st - vec2(0.2), 0.1); + d = min(d, rect(st - vec2(0.5, 0.2), vec2(0.1, 0.08))); + d = min(d, roundRect(st - vec2(0.8, 0.2), vec2(0.08, 0.06), 0.02)); + d = min(d, ring(st - vec2(0.2, 0.5), 0.18, 0.02)); + d = min(d, hexagon(st - vec2(0.5, 0.5), 0.1)); + d = min(d, triangle(st - vec2(0.8, 0.5), 0.1)); + d = min(d, ellipse(st - vec2(0.2, 0.8), vec2(0.9, 1.2), 0.1)); + d = min(d, capsule(st - vec2(0.5, 0.8), vec2(-0.05, -0.05), vec2(0.05, 0.05), 0.05)); + d = min(d, polygon(st - vec2(0.8, 0.8), 5, 0.1)); + vec3 color = vec3(smoothedge(d)); + gl_FragColor = vec4(color, 1.0); +} \ No newline at end of file diff --git a/examples/README.md b/examples/README.md index e935cb8..9c1f559 100644 --- a/examples/README.md +++ b/examples/README.md @@ -44,6 +44,7 @@ The following is a list of examples present in this book. - [Polar shapes](../edit.html#07/polar.frag) - [Polar Poligons](../edit.html#07/shapes.frag) - Composition: [Arrow](../edit.html#07/arrow.frag) + - More Distance field by [Kynd](https://twitter.com/kyndinfo): [0](../edit.html#07/examples/160131053729.frag), [1](../edit.html#07/examples/160131053646.frag) * [Matrix](../08/) - [cross](../edit.html#08/cross.frag)