feat: add variable refresh with delta time

Author: HayesGordon

CHANGELOG.md

@@ -1,3 +1,8 @@
+## Upcomming
+⛔️ Breaking!
+- Added the concept of delta time, to allow for better simulation when the refresh rate is 120 (or more than 60). There should be not noticable change on a 60fps screen, however, there may be variance if Flutter drops frames. No changes needed from a widget level.
+- `ParticleSystem.update` and `Pariticle.update` now contain a `deltaTime` argument. No changes needed from a widget level.
+
 ## [0.7.0]
 ⭐️ Added
 - Stroke width and color can now optionally be set. `strokeWidth` (default 0) and `strokeColor` (default black). Requires a stroke width bigger than 0

example/.gitignore

@@ -40,7 +40,6 @@ fvm_config.json
 /build/
 
 # Web related
-lib/generated_plugin_registrant.dart
 
 # Exceptions to above rules.
 !/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages

example/pubspec.lock

@@ -7,7 +7,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.8.2"
+    version: "2.9.0"
   boolean_selector:
     dependency: transitive
     description:
@@ -21,21 +21,14 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
-  charcode:
-    dependency: transitive
-    description:
-      name: charcode
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.3.1"
+    version: "1.2.1"
   clock:
     dependency: transitive
     description:
       name: clock
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.1.1"
   collection:
     dependency: transitive
     description:
@@ -63,7 +56,7 @@ packages:
       name: fake_async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0"
+    version: "1.3.1"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -80,28 +73,28 @@ packages:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.11"
+    version: "0.12.12"
   material_color_utilities:
     dependency: transitive
     description:
       name: material_color_utilities
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.1.4"
+    version: "0.1.5"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.7.0"
+    version: "1.8.0"
   path:
     dependency: transitive
     description:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.1"
+    version: "1.8.2"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -113,7 +106,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.2"
+    version: "1.9.0"
   stack_trace:
     dependency: transitive
     description:
@@ -134,21 +127,21 @@ packages:
       name: string_scanner
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.1.1"
   term_glyph:
     dependency: transitive
     description:
       name: term_glyph
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.2.1"
   test_api:
     dependency: transitive
     description:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.9"
+    version: "0.4.12"
   vector_math:
     dependency: transitive
     description:

example/pubspec.yaml

@@ -6,7 +6,7 @@ version: 1.0.0+1
 publish_to: none
 
 environment:
-  sdk: '>=2.12.0 <3.0.0'
+  sdk: ">=2.17.0 <3.0.0"
 
 dependencies:
   confetti:
@@ -20,4 +20,4 @@ dev_dependencies:
     sdk: flutter
 
 flutter:
-  uses-material-design: true
+  uses-material-design: true

lib/src/confetti.dart

@@ -1,5 +1,6 @@
 import 'dart:math';
 
+import 'package:confetti/src/constants.dart';
 import 'package:confetti/src/particle.dart';
 import 'package:flutter/material.dart';
 
@@ -202,12 +203,23 @@ class _ConfettiWidgetState extends State<ConfettiWidget>
     }
   }
 
+  late var lastTime = DateTime.now().millisecondsSinceEpoch;
+
   void _animationListener() {
     if (_particleSystem.particleSystemStatus == ParticleSystemStatus.finished) {
       _animController.stop();
       return;
     }
-    _particleSystem.update();
+    final currentTime = DateTime.now().millisecondsSinceEpoch;
+    final deltaTime = (currentTime - lastTime) / 1000;
+
+    lastTime = currentTime;
+
+    if (deltaTime > kLowLimit) {
+      _particleSystem.update(kLowLimit);
+    } else {
+      _particleSystem.update(deltaTime);
+    }
   }
 
   void _animationStatusListener(AnimationStatus status) {

lib/src/constants.dart

@@ -0,0 +1,2 @@
+const double kLowLimit = 1 / 60;
+const desiredSpeed = 1 / kLowLimit;

lib/src/helper.dart

@@ -5,7 +5,7 @@ import 'package:flutter/material.dart';
 
 final _rand = Random();
 
-class Helper {
+abstract class Helper {
   static double randomize(double min, double max) {
     return lerpDouble(min, max, _rand.nextDouble())!;
   }

lib/src/particle.dart

@@ -1,6 +1,7 @@
 import 'dart:math';
 import 'dart:ui';
 
+import 'package:confetti/src/constants.dart';
 import 'package:flutter/material.dart';
 import 'package:vector_math/vector_math.dart' as vmath;
 
@@ -109,10 +110,10 @@ class ParticleSystem extends ChangeNotifier {
   List<Particle> get particles => _particles;
   ParticleSystemStatus? get particleSystemStatus => _particleSystemStatus;
 
-  void update() {
+  void update(double deltaTime) {
     _clean();
     if (_particleSystemStatus != ParticleSystemStatus.finished) {
-      _updateParticles();
+      _updateParticles(deltaTime);
     }
 
     if (_particleSystemStatus == ParticleSystemStatus.started) {
@@ -143,9 +144,9 @@ class ParticleSystem extends ChangeNotifier {
     _leftBorder = _screenSize!.width - _rightBorder;
   }
 
-  void _updateParticles() {
+  void _updateParticles(double deltaTime) {
     for (final particle in _particles) {
-      particle.update();
+      particle.update(deltaTime);
     }
   }
 
@@ -214,14 +215,16 @@ class Particle {
         _acceleration = vmath.Vector2.zero(),
         _velocity =
             vmath.Vector2(Helper.randomize(-3, 3), Helper.randomize(-3, 3)),
-        // _size = size,
         _pathShape = createParticlePath != null
             ? createParticlePath(size)
             : createPath(size),
         _aVelocityX = Helper.randomize(-0.1, 0.1),
         _aVelocityY = Helper.randomize(-0.1, 0.1),
         _aVelocityZ = Helper.randomize(-0.1, 0.1),
-        _gravity = lerpDouble(0.1, 5, gravity);
+        gravityVector = vmath.Vector2(
+          0,
+          lerpDouble(0.1, 5, gravity)!,
+        );
 
   final vmath.Vector2 _startUpForce;
 
@@ -236,14 +239,15 @@ class Particle {
   double _aVelocityY;
   double _aZ = 0;
   double _aVelocityZ;
-  final double? _gravity;
+  final vmath.Vector2 gravityVector;
   final _aAcceleration = 0.0001;
 
   final Color _color;
   final double _mass;
   final Path _pathShape;
 
   double _timeAlive = 0;
+  vmath.Vector2 windforceUp = vmath.Vector2(0, -1);
 
   static Path createPath(Size size) {
     final pathShape = Path()
@@ -255,53 +259,45 @@ class Particle {
     return pathShape;
   }
 
-  void applyForce(vmath.Vector2 force) {
+  void applyForce(vmath.Vector2 force, double deltaTimeSpeed) {
     final f = force.clone()..divide(vmath.Vector2.all(_mass));
-    _acceleration.add(f);
+    _acceleration.add(f * deltaTimeSpeed);
   }
 
-  void drag() {
+  void drag(double deltaTimeSpeed) {
     final speed = sqrt(pow(_velocity.x, 2) + pow(_velocity.y, 2));
     final dragMagnitude = _particleDrag * speed * speed;
     final drag = _velocity.clone()
       ..multiply(vmath.Vector2.all(-1))
       ..normalize()
       ..multiply(vmath.Vector2.all(dragMagnitude));
-    applyForce(drag);
+    applyForce(drag, deltaTimeSpeed);
   }
 
-  void _applyStartUpForce() {
-    applyForce(_startUpForce);
-  }
-
-  void _applyWindForceUp() {
-    applyForce(vmath.Vector2(0, -1));
-  }
-
-  void update() {
-    drag();
+  void update(double deltaTime) {
+    final deltaTimeSpeed = deltaTime * desiredSpeed;
+    drag(deltaTimeSpeed);
 
     if (_timeAlive < 5) {
-      _applyStartUpForce();
+      applyForce(_startUpForce, deltaTimeSpeed);
     }
     if (_timeAlive < 25) {
-      _applyWindForceUp();
+      applyForce(windforceUp, deltaTimeSpeed);
+      _timeAlive += 1;
     }
 
-    _timeAlive += 1;
-
-    applyForce(vmath.Vector2(0, _gravity!));
+    applyForce(gravityVector, deltaTimeSpeed);
 
-    _velocity.add(_acceleration);
-    _location.add(_velocity);
+    _velocity.add(_acceleration * deltaTimeSpeed);
+    _location.add(_velocity * deltaTimeSpeed);
     _acceleration.setZero();
 
     _aVelocityX += _aAcceleration / _mass;
     _aVelocityY += _aAcceleration / _mass;
     _aVelocityZ += _aAcceleration / _mass;
-    _aX += _aVelocityX;
-    _aY += _aVelocityY;
-    _aZ += _aVelocityZ;
+    _aX += _aVelocityX * deltaTimeSpeed;
+    _aY += _aVelocityY * deltaTimeSpeed;
+    _aZ += _aVelocityZ * deltaTimeSpeed;
   }
 
   Offset get location {