feat: add noise and noise overlay shaders with configurations

orestesgaolin · orestesgaolin · commit cfe8790c64ec · 2025-07-28T18:13:40.000+02:00
diff --git a/lib/main.dart b/lib/main.dart
@@ -1,8 +1,9 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_shaders/flutter_shaders.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 import 'crt_shader_config.dart';
+import 'noise_overlay_shader_config.dart';
+import 'noise_shader_config.dart';
 import 'ntsc_shader_config.dart';
 import 'shader_configs.dart';
 import 'shader_screen.dart';
@@ -43,6 +44,20 @@ final shaders = [
     sourceUrl: 'https://www.shadertoy.com/view/lt3yz7',
     config: CrtShaderConfig(),
   ),
+  const ShaderInfo(
+    name: 'Noise',
+    assetKey: 'shaders/noise_shader.frag',
+    description: 'Animated gradient noise with film grain effect',
+    sourceUrl: 'https://www.shadertoy.com/view/DdcfzH',
+    config: NoiseShaderConfig(),
+  ),
+  const ShaderInfo(
+    name: 'Noise Overlay',
+    assetKey: 'shaders/noise_overlay_shader.frag',
+    description: 'Applies animated noise effect as an overlay on content',
+    sourceUrl: 'https://www.shadertoy.com/view/DdcfzH',
+    config: NoiseOverlayShaderConfig(),
+  ),
 ];
 
 class RgbGlitchDemo extends StatefulWidget {
@@ -69,35 +84,35 @@ class HomeScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: const Text('Shader Gallery'),
-        centerTitle: true,
+      appBar: AppBar(title: const Text('Shader Gallery'), centerTitle: true),
+      body: LayoutBuilder(
+        builder: (context, constraints) {
+          return GridView.builder(
+            padding: const EdgeInsets.all(16),
+            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+              maxCrossAxisExtent: 350,
+              crossAxisSpacing: 16,
+              mainAxisSpacing: 16,
+              childAspectRatio: 4 / 3,
+            ),
+            itemCount: shaders.length,
+            itemBuilder: (context, index) {
+              final shaderInfo = shaders[index];
+              return _ShaderTile(
+                shaderInfo: shaderInfo,
+                onTap: () {
+                  Navigator.of(context).push(
+                    MaterialPageRoute(
+                      builder: (context) =>
+                          ShaderScreen(shaderInfo: shaderInfo),
+                    ),
+                  );
+                },
+              );
+            },
+          );
+        },
       ),
-      body: LayoutBuilder(builder: (context, constraints) {
-        return GridView.builder(
-          padding: const EdgeInsets.all(16),
-          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
-            maxCrossAxisExtent: 350,
-            crossAxisSpacing: 16,
-            mainAxisSpacing: 16,
-            childAspectRatio: 4/3,
-          ),
-          itemCount: shaders.length,
-          itemBuilder: (context, index) {
-            final shaderInfo = shaders[index];
-            return _ShaderTile(
-              shaderInfo: shaderInfo,
-              onTap: () {
-                Navigator.of(context).push(
-                  MaterialPageRoute(
-                    builder: (context) => ShaderScreen(shaderInfo: shaderInfo),
-                  ),
-                );
-              },
-            );
-          },
-        );
-      }),
     );
   }
 }
diff --git a/lib/noise_overlay_shader_config.dart b/lib/noise_overlay_shader_config.dart
@@ -0,0 +1,28 @@
+import 'dart:ui';
+import 'shader_configs.dart';
+
+class NoiseOverlayShaderConfig extends ShaderConfig {
+  final double filmGrainIntensity;
+  final double noiseOpacity;
+
+  const NoiseOverlayShaderConfig({
+    this.filmGrainIntensity = 0.1,
+    this.noiseOpacity = 0.3,
+  });
+
+  @override
+  bool get requiresImageSampler => true;
+
+  @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)
+      ..setFloat(3, filmGrainIntensity)
+      ..setFloat(4, noiseOpacity);
+  }
+}
diff --git a/lib/noise_shader_config.dart b/lib/noise_shader_config.dart
@@ -0,0 +1,23 @@
+import 'dart:ui';
+import 'shader_configs.dart';
+
+class NoiseShaderConfig extends ShaderConfig {
+  final double filmGrainIntensity;
+
+  const NoiseShaderConfig({this.filmGrainIntensity = 0.1});
+
+  @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)
+      ..setFloat(3, filmGrainIntensity);
+  }
+}
diff --git a/lib/ntsc_shader_config.dart b/lib/ntsc_shader_config.dart
@@ -1,6 +1,4 @@
 import 'dart:ui';
-import 'package:flutter/material.dart';
-import 'package:flutter_shaders/flutter_shaders.dart';
 import 'shader_configs.dart';
 
 class NtscShaderConfig extends ShaderConfig {
diff --git a/lib/shader_configs.dart b/lib/shader_configs.dart
@@ -1,8 +1,13 @@
 import 'dart:ui';
 
-
 abstract class ShaderConfig {
   const ShaderConfig();
 
   void setUniforms(FragmentShader shader, Size size, double time);
+
+  // Whether this shader requires an image sampler
+  bool get requiresImageSampler => true;
+
+  // Duration of the animation in seconds (null means unbounded/infinite)
+  Duration? get animationDuration => const Duration(milliseconds: 1800);
 }
diff --git a/lib/shader_screen.dart b/lib/shader_screen.dart
@@ -5,10 +5,7 @@ import 'package:shaders/tv_test_screen.dart';
 import 'main.dart';
 
 class ShaderScreen extends StatefulWidget {
-  const ShaderScreen({
-    super.key,
-    required this.shaderInfo,
-  });
+  const ShaderScreen({super.key, required this.shaderInfo});
 
   final ShaderInfo shaderInfo;
 
@@ -23,13 +20,26 @@ class _ShaderScreenState extends State<ShaderScreen>
   @override
   void initState() {
     super.initState();
-    _controller = AnimationController(
-      vsync: this,
-      duration: const Duration(milliseconds: 1800),
-    );
-    _controller
-      ..forward()
-      ..repeat(reverse: true);
+    final duration = widget.shaderInfo.config.animationDuration;
+
+    if (duration != null) {
+      // Bounded animation
+      _controller = AnimationController(vsync: this, duration: duration);
+      _controller
+        ..forward()
+        ..repeat(reverse: true);
+    } else {
+      // Unbounded animation - use a long duration and repeat without reverse
+      _controller = AnimationController(
+        vsync: this,
+        duration: const Duration(
+          seconds: 3600,
+        ), // 1 hour cycle for continuous time
+      );
+      _controller
+        ..forward()
+        ..repeat();
+    }
   }
 
   @override
@@ -43,47 +53,59 @@ class _ShaderScreenState extends State<ShaderScreen>
     final shaderView = AnimatedBuilder(
       animation: _controller,
       builder: (context, child) {
-        return ShaderBuilder(
-          assetKey: widget.shaderInfo.assetKey,
-          (context, shader, _) {
-            return AnimatedSampler(
-              (image, size, canvas) {
-                final animation = TweenSequence<double>([
-                  TweenSequenceItem(
-                    tween: Tween<double>(begin: 0.0, end: 1.0)
-                        .chain(CurveTween(curve: Curves.easeInOut)),
-                    weight: 50.0,
-                  ),
-                  TweenSequenceItem(
-                    tween: Tween<double>(begin: 1.0, end: 0.0)
-                        .chain(CurveTween(curve: Curves.easeInOut)),
-                    weight: 50.0,
-                  ),
-                ]).animate(_controller);
-                widget.shaderInfo.config
-                    .setUniforms(shader, size, animation.value);
-                shader.setImageSampler(0, image);
+        return ShaderBuilder(assetKey: widget.shaderInfo.assetKey, (
+          context,
+          shader,
+          _,
+        ) {
+          return AnimatedSampler((image, size, canvas) {
+            final duration = widget.shaderInfo.config.animationDuration;
+            double timeValue;
+
+            if (duration != null) {
+              // Bounded animation - use animated value between 0-1
+              final animation = TweenSequence<double>([
+                TweenSequenceItem(
+                  tween: Tween<double>(
+                    begin: 0.0,
+                    end: 1.0,
+                  ).chain(CurveTween(curve: Curves.easeInOut)),
+                  weight: 50.0,
+                ),
+                TweenSequenceItem(
+                  tween: Tween<double>(
+                    begin: 1.0,
+                    end: 0.0,
+                  ).chain(CurveTween(curve: Curves.easeInOut)),
+                  weight: 50.0,
+                ),
+              ]).animate(_controller);
+              timeValue = animation.value;
+            } else {
+              // Unbounded animation - use controller value as continuous time
+              // Scale the 0-1 controller value to actual time in seconds
+              timeValue = _controller.value * _controller.duration!.inSeconds;
+            }
+
+            widget.shaderInfo.config.setUniforms(shader, size, timeValue);
+
+            // Only set image sampler if the shader requires it
+            if (widget.shaderInfo.config.requiresImageSampler) {
+              shader.setImageSampler(0, image);
+            }
 
-                canvas.drawRect(
-                  Rect.fromLTWH(0, 0, size.width, size.height),
-                  Paint()..shader = shader,
-                );
-              },
-              child: child!,
+            canvas.drawRect(
+              Rect.fromLTWH(0, 0, size.width, size.height),
+              Paint()..shader = shader,
             );
-          },
-        );
+          }, child: child!);
+        });
       },
-      child: const Center(
-        child: TvTestScreen(),
-      ),
+      child: const Center(child: TvTestScreen()),
     );
 
     return Scaffold(
-      appBar: AppBar(
-        title: Text(widget.shaderInfo.name),
-        centerTitle: true,
-      ),
+      appBar: AppBar(title: Text(widget.shaderInfo.name), centerTitle: true),
       body: shaderView,
     );
   }
diff --git a/lib/tv_test_screen.dart b/lib/tv_test_screen.dart
@@ -12,9 +12,7 @@ class TvTestScreen extends StatelessWidget {
         decoration: BoxDecoration(
           border: Border.all(color: Colors.black, width: 2),
         ),
-        child: const CustomPaint(
-          painter: TvTestScreenPainter(),
-        ),
+        child: const CustomPaint(painter: TvTestScreenPainter()),
       ),
     );
   }
@@ -103,19 +101,25 @@ class TvTestScreenPainter extends CustomPainter {
       ..strokeWidth = 1;
 
     final spacing = 8.0;
-    
+
     // Horizontal lines
     for (double i = y; i <= y + h; i += spacing) {
       canvas.drawLine(Offset(x, i), Offset(x + w, i), paint);
     }
-    
+
     // Vertical lines
     for (double i = x; i <= x + w; i += spacing) {
       canvas.drawLine(Offset(i, y), Offset(i, y + h), paint);
     }
   }
 
-  void _drawVerticalLines(Canvas canvas, double x, double y, double w, double h) {
+  void _drawVerticalLines(
+    Canvas canvas,
+    double x,
+    double y,
+    double w,
+    double h,
+  ) {
     final paint = Paint()
       ..color = Colors.black
       ..strokeWidth = 1;
@@ -137,10 +141,10 @@ class TvTestScreenPainter extends CustomPainter {
     for (int i = 0; i < frequencies.length; i++) {
       final freq = frequencies[i];
       final paint = Paint()..color = Colors.black;
-      
+
       final x = i * barWidth;
       final lineSpacing = barWidth / (freq * 2);
-      
+
       for (double j = 0; j < barWidth; j += lineSpacing * 2) {
         canvas.drawRect(
           Rect.fromLTWH(x + j, startY, lineSpacing, sectionHeight),
@@ -167,7 +171,7 @@ class TvTestScreenPainter extends CustomPainter {
     for (final pos in positions) {
       // Outer circle
       canvas.drawCircle(pos, radius, paint);
-      
+
       // Inner crosshair
       canvas.drawLine(
         Offset(pos.dx - radius * 0.7, pos.dy),
@@ -179,7 +183,7 @@ class TvTestScreenPainter extends CustomPainter {
         Offset(pos.dx, pos.dy + radius * 0.7),
         paint,
       );
-      
+
       // Center dot
       canvas.drawCircle(pos, 3, Paint()..color = Colors.black);
     }
@@ -191,12 +195,12 @@ class TvTestScreenPainter extends CustomPainter {
       ..strokeWidth = 0.5;
 
     const gridSpacing = 20.0;
-    
+
     // Vertical lines
     for (double x = 0; x <= width; x += gridSpacing) {
       canvas.drawLine(Offset(x, 0), Offset(x, height), paint);
     }
-    
+
     // Horizontal lines
     for (double y = 0; y <= height; y += gridSpacing) {
       canvas.drawLine(Offset(0, y), Offset(width, y), paint);
diff --git a/pubspec.yaml b/pubspec.yaml
diff --git a/shaders/noise_overlay_shader.frag b/shaders/noise_overlay_shader.frag
diff --git a/shaders/noise_shader.frag b/shaders/noise_shader.frag
