🔀 Merge pull request #50 from vinceglb/lags-26

⚡️ Prevents particle clustering

Author: vinceglb

confettikit/src/commonMain/kotlin/io/github/vinceglb/confettikit/core/PartySystem.kt

@@ -32,14 +32,15 @@ public class PartySystem(
         deltaTime: Float,
         drawArea: CoreRect,
     ): List<Particle> {
-        if (enabled) {
-            activeParticles.addAll(emitter.createConfetti(deltaTime, party, drawArea))
-        }
-
         activeParticles.forEach { it.render(deltaTime, drawArea) }
 
         activeParticles.removeAll { it.isDead() }
 
+        if (enabled) {
+            activeParticles.addAll(emitter.createConfetti(deltaTime, party, drawArea))
+            activeParticles.removeAll { it.isDead() }
+        }
+
         return activeParticles.filter { it.drawParticle }.map { it.toParticle() }
     }
 

confettikit/src/commonMain/kotlin/io/github/vinceglb/confettikit/core/emitter/PartyEmitter.kt

@@ -9,6 +9,7 @@ import io.github.vinceglb.confettikit.core.models.Size
 import io.github.vinceglb.confettikit.core.models.Vector
 import kotlin.math.PI
 import kotlin.math.cos
+import kotlin.math.min
 import kotlin.math.sin
 import kotlin.random.Random
 
@@ -40,14 +41,11 @@ internal class PartyEmitter(
         party: Party,
         drawArea: CoreRect,
     ): List<Confetti> {
-        createParticleMs += deltaTime
+        val safeDeltaTimeSeconds = deltaTime.coerceAtLeast(0f)
+        val deltaTimeSecondsForEmission = limitToRemainingEmittingTime(safeDeltaTimeSeconds)
+        val postEmissionSeconds = safeDeltaTimeSeconds - deltaTimeSecondsForEmission
 
-        // Initial deltaTime can't be higher than the emittingTime, if so calculate
-        // amount of particles based on max emittingTime
-        val emittingTime = emitterConfig.emittingTime / 1000f
-        if (elapsedTime == 0f && deltaTime > emittingTime) {
-            createParticleMs = emittingTime
-        }
+        createParticleMs += deltaTimeSecondsForEmission
 
         var particles = listOf<Confetti>()
 
@@ -56,13 +54,17 @@ internal class PartyEmitter(
             // Calculate how many particle  to create in the elapsed time
             val amount: Int = (createParticleMs / emitterConfig.amountPerMs).toInt()
 
-            particles = (1..amount).map { createParticle(party, drawArea) }
+            val remainderSeconds = createParticleMs % emitterConfig.amountPerMs
+            particles = (0 until amount).map { index ->
+                val ageSeconds = postEmissionSeconds + remainderSeconds + (amount - 1 - index) * emitterConfig.amountPerMs
+                createParticle(party, drawArea).also { it.render(ageSeconds, drawArea) }
+            }
 
             // Reset timer and add left over time for next cycle
-            createParticleMs %= emitterConfig.amountPerMs
+            createParticleMs = remainderSeconds
         }
 
-        elapsedTime += deltaTime * 1000
+        elapsedTime += safeDeltaTimeSeconds * 1000
         return particles
     }
 
@@ -178,6 +180,14 @@ internal class PartyEmitter(
         }
     }
 
+    private fun limitToRemainingEmittingTime(deltaTimeSeconds: Float): Float {
+        val emittingTimeMs = emitterConfig.emittingTime
+        if (emittingTimeMs <= 0L) return deltaTimeSeconds
+
+        val remainingMs = (emittingTimeMs.toFloat() - elapsedTime).coerceAtLeast(0f)
+        return min(deltaTimeSeconds, remainingMs / 1000f)
+    }
+
     override fun isFinished(): Boolean {
         return if (emitterConfig.emittingTime > 0L) {
             elapsedTime >= emitterConfig.emittingTime

confettikit/src/commonTest/kotlin/io/github/vinceglb/confettikit/core/emitter/PartyEmitterFrameSkipTest.kt

@@ -0,0 +1,58 @@
+package io.github.vinceglb.confettikit.core.emitter
+
+import io.github.vinceglb.confettikit.core.Party
+import io.github.vinceglb.confettikit.core.PartySystem
+import io.github.vinceglb.confettikit.core.Position
+import io.github.vinceglb.confettikit.core.Rotation
+import io.github.vinceglb.confettikit.core.models.CoreRect
+import io.github.vinceglb.confettikit.core.models.Shape
+import io.github.vinceglb.confettikit.core.models.Size
+import kotlin.test.Test
+import kotlin.test.assertEquals
+import kotlin.test.assertTrue
+import kotlin.time.Duration.Companion.seconds
+
+class PartyEmitterFrameSkipTest {
+    private val drawArea = CoreRect.CoreRectImpl(width = 1000f, height = 1000f)
+
+    private fun party(emitterConfig: EmitterConfig): Party =
+        Party(
+            emitter = emitterConfig,
+            position = Position.Absolute(0f, 0f),
+            spread = 0,
+            speed = 0f,
+            maxSpeed = -1f,
+            damping = 1f,
+            rotation = Rotation.disabled(),
+            shapes = listOf(Shape.Square),
+            colors = listOf(0xffffff),
+            size = listOf(Size(sizeInDp = 8, mass = 5f, massVariance = 0f)),
+            timeToLive = 10_000,
+            fadeOutEnabled = false,
+        )
+
+    @Test
+    fun createsParticlesWithDifferentAgesWhenDeltaIsLarge() {
+        val emitterConfig = Emitter(1.seconds).perSecond(amount = 10)
+        val emitter = PartyEmitter(emitterConfig = emitterConfig, pixelDensity = 1f)
+
+        val created = emitter.createConfetti(deltaTime = 0.25f, party = party(emitterConfig), drawArea = drawArea)
+
+        assertEquals(2, created.size)
+        val ys = created.map { it.location.y }
+        assertTrue(ys[0] > ys[1], "expected older particle to have moved further (y0=${ys[0]}, y1=${ys[1]})")
+    }
+
+    @Test
+    fun particleSpawnedAtFrameEndIsNotAdvanced() {
+        val emitterConfig = Emitter(1.seconds).perSecond(amount = 10)
+        val system = PartySystem(party = party(emitterConfig), pixelDensity = 1f)
+
+        val particles = system.render(deltaTime = 0.1f, drawArea = drawArea)
+
+        assertEquals(1, particles.size)
+        assertEquals(0f, particles[0].x)
+        assertEquals(0f, particles[0].y)
+    }
+}
+

sample/composeApp/src/commonMain/kotlin/io/github/vinceglb/confettikit/sample/App.kt

@@ -4,23 +4,43 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.Row
 import androidx.compose.material3.Button
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import androidx.compose.animation.core.withInfiniteAnimationFrameMillis
 import io.github.vinceglb.confettikit.compose.ConfettiKit
+import kotlin.time.Duration.Companion.milliseconds
+import kotlin.time.TimeSource
 
 @Composable
 fun App() {
     var isAnimating by remember { mutableStateOf(false) }
     var index by remember { mutableStateOf(0) }
+    var simulateLag by remember { mutableStateOf(false) }
+
+    if (simulateLag) {
+        LaunchedEffect(Unit) {
+            while (true) {
+                withInfiniteAnimationFrameMillis {
+                    val start = TimeSource.Monotonic.markNow()
+                    while (start.elapsedNow() < 40.milliseconds) {
+                        // Busy-loop to simulate main-thread jank
+                    }
+                }
+            }
+        }
+    }
 
     Scaffold {
         Box(
@@ -39,6 +59,17 @@ fun App() {
                 ) {
                     Text("Fiesta 🥳")
                 }
+
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                ) {
+                    Text("Simulate lag")
+                    Switch(
+                        checked = simulateLag,
+                        onCheckedChange = { simulateLag = it },
+                    )
+                }
             }
 
             if (isAnimating) {