diff --git a/content/art/drawhearts.md b/content/art/drawhearts.md index 217e6d74..ef3f2928 100644 --- a/content/art/drawhearts.md +++ b/content/art/drawhearts.md @@ -6,9 +6,44 @@ layout: "artpiece" draft: false --- -My first procedurally generated animation drawing concentric heart -growing from the center of the screen. The source code for the -program used to create this piece is [available on my GitHub](https://github.com/lavafroth/drawhearts). +My first procedurally generated animation using shaders. + +The shader can be visualized with `glslViewer`. + +```glsl +uniform vec2 u_mouse; +uniform vec2 u_resolution; +uniform float u_time; + +void main (void) { + vec2 st = gl_FragCoord.xy/u_resolution.xy; + float aspect = u_resolution.x/u_resolution.y; + st.x *= aspect; + + // positioning shenanigans + st.x = st.x * 2.0 - 1.8; + st.y = st.y * 2.0 - 0.9; + + float r = st.x*st.x + st.y*st.y - abs(st.x)*st.y; + r *= 2.0; + + float duration = 3.0; + float bin = 0.1; + float scaled_time = fract(u_time/duration); + float loop = scaled_time * 2.0 - 1.0; + float r_disc = floor((r + loop*loop)/bin) * bin; + + vec3 deep_pink = vec3(0.917, 0.235, 0.478); + vec3 light_pink = vec3(0.976, 0.780, 0.803); + + if (r_disc >= 1.0) { + gl_FragColor = vec4(deep_pink, 1.0); + return; + } + vec3 color = mix(deep_pink, light_pink, r_disc); + gl_FragColor = vec4(color,1.0); +} +``` I tinkered around for quite a while before discovering that I can intersect two $xy$ skewed ellipses with the absolute value operator. Here's my custom equation for the heart shape. diff --git a/static/hearts.avif b/static/hearts.avif index f2ec20f0..5f85e0c4 100644 Binary files a/static/hearts.avif and b/static/hearts.avif differ