feat: add ClearlyBugShaderBuilder and corresponding shader file for a "Happy Accident" effect

Author: orestesgaolin

lib/clearly_bug_shader_builder.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'dart:ui';
+import 'shader_builder.dart';
+
+class ClearlyBugShaderBuilder extends CustomShaderBuilder {
+  const ClearlyBugShaderBuilder();
+
+  @override
+  bool get requiresImageSampler => false;
+
+  @override
+  Duration? get animationDuration => null; // Unbounded animation
+
+  @override
+  void setUniforms(FragmentShader shader, Size size, double time) {
+    shader
+      ..setFloat(0, size.width)
+      ..setFloat(1, size.height)
+      ..setFloat(2, time);
+  }
+
+  @override
+  Widget buildShader(
+    ShaderMetadata metadata,
+    FragmentShader shader,
+    Size size,
+    double time,
+    Widget? child,
+  ) {
+    return ColoredBox(
+      color: Colors.black,
+      child: CustomPaint(
+        size: Size.infinite,
+        painter: _ClearlyBugShaderPainter(shader),
+      ),
+    );
+  }
+
+  @override
+  Widget? childBuilder(BuildContext context) {
+    return null;
+  }
+}
+
+class _ClearlyBugShaderPainter extends CustomPainter {
+  final FragmentShader shader;
+
+  _ClearlyBugShaderPainter(this.shader);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.drawRect(
+      Rect.fromLTWH(0, 0, size.width, size.height),
+      Paint()..shader = shader,
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
+}

lib/main.dart

@@ -8,6 +8,7 @@ import 'package:shaders/widgets/widgets.dart';
 
 import 'shader_builder.dart';
 import 'crt_shader_builder.dart';
+import 'clearly_bug_shader_builder.dart';
 import 'noise_overlay_shader_builder.dart';
 import 'noise_shader_builder.dart';
 import 'ntsc_shader_builder.dart';
@@ -101,6 +102,16 @@ final shaders = [
     builder: const RingsShaderBuilder(),
     path: 'rings-shader',
   ),
+  ShaderInfo(
+    name: 'Clearly a Bug',
+    assetKey: 'shaders/clearly_bug_shader.frag',
+    description: 'A "Happy Accident" raymarching shader with fractal patterns and beautiful lighting.',
+    sourceUrl: 'https://www.shadertoy.com/view/33cGDj',
+    author: 'Various (see comments)',
+    dateAdded: DateTime(2025, 7, 29),
+    builder: const ClearlyBugShaderBuilder(),
+    path: 'clearly-bug-shader',
+  ),
 ];
 
 // Helper function to create URL-safe shader names

lib/widgets/shader_animation_view.dart

@@ -4,7 +4,7 @@ import 'package:shaders/tv_test_screen.dart';
 import '../main.dart';
 
 /// A widget that handles the animation and rendering of a shader.
-/// 
+///
 /// This widget manages the animation controller and coordinates with the shader builder
 /// to render the shader effect with proper timing and animation handling.
 class ShaderAnimationView extends StatefulWidget {
@@ -19,8 +19,7 @@ class ShaderAnimationView extends StatefulWidget {
   State<ShaderAnimationView> createState() => _ShaderAnimationViewState();
 }
 
-class _ShaderAnimationViewState extends State<ShaderAnimationView>
-    with SingleTickerProviderStateMixin {
+class _ShaderAnimationViewState extends State<ShaderAnimationView> with SingleTickerProviderStateMixin {
   late final AnimationController _controller;
 
   @override
@@ -64,7 +63,7 @@ class _ShaderAnimationViewState extends State<ShaderAnimationView>
               (context, shader, _) {
                 final duration = widget.shaderInfo.builder.animationDuration;
                 double timeValue;
-        
+
                 if (duration != null) {
                   // Bounded animation - use animated value between 0-1
                   final animation = TweenSequence<double>([
@@ -103,7 +102,7 @@ class _ShaderAnimationViewState extends State<ShaderAnimationView>
             );
           },
         );
-      }
+      },
     );
   }
 }

pubspec.yaml

@@ -43,3 +43,4 @@ flutter:
     - shaders/noise_shader.frag
     - shaders/ntsc_shader.frag
     - shaders/rings_shader.frag
+    - shaders/clearly_bug_shader.frag

shaders/clearly_bug_shader.frag

@@ -0,0 +1,94 @@
+// CC0: Clearly a bug
+//   A "Happy Accident" Shader
+
+//  Twigl: https://twigl.app?ol=true&ss=-OUOudmBPJ57CIb7rAxS
+// Modified to compile for Flutter
+// https://www.shadertoy.com/view/33cGDj
+
+#version 460 core
+precision mediump float;
+
+#include <flutter/runtime_effect.glsl>
+
+uniform vec2 iResolution;
+uniform float iTime;
+
+out vec4 fragColor;
+
+// This shader uses a technique called "raymarching" to render 3D
+// Think of it like casting rays from your eye through each pixel into a 3D world,
+// then stepping along each ray until we hit something interesting.
+//
+// Key concepts for C developers:
+// - vec4/vec3/vec2: Like structs with x,y,z,w components (SIMD-style)
+// - Swizzling: p.xy means "give me just the x,y parts of vector p"
+// - mat2(): Creates a 2x2 rotation matrix from an angle
+// - All math operations work on vectors component-wise
+//
+// ATTRIBUTION: Shader techniques inspired by (alphabetical):
+//   @byt3_m3chanic
+//   @FabriceNeyrat2
+//   @iq
+//   @shane
+//   @XorDev
+//   + many more
+
+void main() {
+  vec2 C = FlutterFragCoord().xy;
+  vec4 O;
+  
+  float i = 0.0;     // Loop counter (starts at 0)
+  float d = 0.0;     // Distance to nearest surface
+  float z = fract(dot(C,sin(C)))-0.5;  // Ray distance + noise for anti-banding
+  
+  vec4 o = vec4(0.0);     // Accumulated color/lighting
+  vec4 p = vec4(0.0);     // Current 3D position along ray
+  
+  vec2 r = iResolution.xy;  // Screen resolution
+  
+  for(int iter = 0; iter < 77; iter++) {
+    i = float(iter);
+    
+    // Convert 2D pixel to 3D ray direction
+    p = vec4(z*normalize(vec3(C-0.5*r,r.y)), 0.1*iTime);
+    
+    // Move through 3D space over time
+    p.z += iTime;
+    
+    // Save position for lighting calculations
+    O = p;
+    
+    // Apply rotation matrices to create fractal patterns
+    // (These transform the 3D coordinates in interesting ways)
+    p.xy *= mat2(cos(2.0+O.z+vec4(0,11,33,0)));
+    
+    // This was originally a bug in the matrix calculation
+    // The incorrect transformation created an unexpectedly interesting pattern
+    // Bob Ross would call this a "happy little accident"
+    p.xy *= mat2(cos(O+vec4(0,11,33,0)));
+    
+    // Calculate color based on position and space distortion
+    // The sin() creates a nice looking palette, division by dot() creates falloff
+    O = (1.0+sin(0.5*O.z+length(p-O)+vec4(0,4,3,6)))
+       / (0.5+2.0*dot(O.xy,O.xy));
+    
+    // Domain repetition, repeats the single line and the 2 planes infinitely
+    p = abs(fract(p)-0.5);
+    
+    // Calculate distance to nearest surface
+    // This combines a cylinder (length(p.xy)-.125) with 2 planes (min(p.x,p.y))
+    d = abs(min(length(p.xy)-0.125,min(p.x,p.y)+1e-3))+1e-3;
+    
+    // Add lighting contribution (brighter when closer to surfaces)
+    o += O.w/d*O;
+    
+    // Step forward (larger steps when far from surfaces)
+    z += 0.6*d;
+  }
+  
+  // tanh() compresses the accumulated brightness to 0-1 range
+  // (Like HDR tone mapping in photography)
+  O = tanh(o/2e4);
+  
+  fragColor = O;
+}