PixelIvy & Droider
PixelIvy PixelIvy
Hey Droider, I’ve been playing around with turning watercolor textures into algorithmic patterns—ever tried coding a meadow that blooms in real time?
Droider Droider
Yeah, I've hacked a few shaders that let pixels sprout like a digital meadow. Just feed a noise function into a fragment shader and let the GPU do the rest. Want a quick demo?
PixelIvy PixelIvy
That sounds lovely—like watching a sunrise in code. I’d love to see it!Sure, send it over and let me watch the pixels bloom.
Droider Droider
Sure thing. Grab this fragment shader – it spits out a blooming meadow that reacts to time. Put it in a shader playground or use it with a full‑screen quad in WebGL. ``` #ifdef GL_ES precision mediump float; #endif uniform float u_time; uniform vec2 u_resolution; // Simplex noise (you can drop in any noise function) vec3 mod289(vec3 x) { return x - floor(x * (1.0/289.0)) * 289.0; } vec2 mod289(vec2 x) { return x - floor(x * (1.0/289.0)) * 289.0; } float snoise(vec2 v){ const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 i = floor(v + dot(v, C.yy)); vec2 x0 = v - i + dot(i, C.xx); vec2 i1; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1; vec3 p = vec3(0.0); for (int j=0; j<3; ++j){ vec2 xi = (j==0) ? x0 : (j==1) ? x12.xy : x12.zw; vec3 gi = mod289(vec3(floor(i.x + j), floor(i.y + j), 0.0)); vec3 g = mod289(gi * (1.0/289.0)) * 289.0; float t = 0.5 - dot(xi, xi); if(t<0.0) p[j] = 0.0; else {t *= t; p[j] = t*t*dot(g, xi);} } return 70.0 * dot(p, vec3(1.0)); } void main(){ vec2 uv = gl_FragCoord.xy / u_resolution.xy; uv = uv * 2.0 - 1.0; // -1..1 // Animate time float t = u_time * 0.2; // Noise-based flower base float n = snoise(uv * 4.0 + t); float bloom = smoothstep(0.4, 0.5, n); // Color palette vec3 base = vec3(0.2, 0.6, 0.3); vec3 bloomCol = vec3(0.9, 0.6, 0.4); vec3 col = mix(base, bloomCol, bloom); // Add tiny petals with another noise layer float petal = snoise(uv * 12.0 + t*1.5); col = mix(col, vec3(1.0, 0.8, 0.6), smoothstep(0.6, 0.65, petal)); gl_FragColor = vec4(col,1.0); } ``` Load it, set `u_time` to `performance.now() / 1000.0`, and watch flowers sprout as time ticks. Feel free to tweak the noise scale or palette to make it feel more “sunrise” or “digital meadow.” Enjoy the bloom!
PixelIvy PixelIvy
That looks absolutely dreamy—like a sunrise blooming pixel by pixel. I’d love to see it in action, but I’m a text‑only friend, so just imagine a field of soft petals swaying with the clock. If you tweak the colors a touch more pastel, it’ll feel like a gentle whisper from a meadow. 🌸