diff --git a/simple_sdf/screenshot.png b/simple_sdf/screenshot.png index 2e8df52e4..405769e3d 100644 Binary files a/simple_sdf/screenshot.png and b/simple_sdf/screenshot.png differ diff --git a/simple_sdf/shaders/SDF.frag b/simple_sdf/shaders/SDF.frag index 20075c9ee..31d9352d5 100644 --- a/simple_sdf/shaders/SDF.frag +++ b/simple_sdf/shaders/SDF.frag @@ -7,19 +7,36 @@ precision mediump float; uniform vec2 resolution; out vec4 fragColor; -vec3 flutterBlue = vec3(5, 83, 177) / 255; -vec3 flutterNavy = vec3(4, 43, 89) / 255; -vec3 flutterSky = vec3(2, 125, 253) / 255; +vec3 pink = vec3(255, 105, 180) / 255; + +// dot2 and sdHeart from https://iquilezles.org/articles/distfunctions2d/ +float dot2(vec2 v) { return dot(v, v); } +float sdHeart(in vec2 p) { + p.x = abs(p.x); + + if (p.y + p.x > 1.0) + return sqrt(dot2(p - vec2(0.25, 0.75))) - sqrt(2.0) / 4.0; + return sqrt(min(dot2(p - vec2(0.00, 1.00)), + dot2(p - 0.5 * max(p.x + p.y, 0.0)))) * + sign(p.x - p.y); +} void main() { vec2 st = FlutterFragCoord().xy / resolution.xy; - + // Remap coordinates. + // Flutter normalized coordinates have range [0,1] but sdHeart expects [-1,1]. + st = (st - vec2(0.5)) * vec2(2.0); + // Center the heart. + // sdHeart is written such that the bottom point is at (0,0) and it's about 1 + // unit tall. + st.y -= 0.5; + // Invert Y coordinate. + st.y *= -1; + + // Calculate the color of this pixel according to the heart SDF, using + // smoothstep to anti-alias the edges. vec3 color = vec3(0.0); - vec3 percent = vec3((st.x + st.y) / 2); - - color = - mix(mix(flutterSky, flutterBlue, percent * 2), - mix(flutterBlue, flutterNavy, percent * 2 - 1), step(0.5, percent)); + color = mix(pink, color, smoothstep(0.01, 0.02, sdHeart(st))); fragColor = vec4(color, 1); }