QML animation takes too much CPU - qt

Question

I made this simple snowfall animation in QML and it looks pretty good except I noticed it takes too much CPU. It constantly takes around ~9% of my Ubuntu laptop CPU and about ~34% on my imx8mm embedded device. Why is it taking so much CPU and how can I reduce CPU usage?
import QtQuick 2.15
import QtQuick.Window 2.2
import QtQuick.Controls 2.15
import QtQuick.Particles 2.0
Window {
id: root
width: 1024
height: 600
visible: true
Rectangle {
anchors.fill: parent
color: "black"
}
Rectangle {
id: snowfallEmittorArea
anchors.top: parent.top
width: parent.width
color: "black"
z:2
ParticleSystem {
id: particleSystem
}
Emitter {
id: emitter
anchors.fill: parent
system: particleSystem
emitRate: 10
lifeSpan: 4000
sizeVariation: 5
lifeSpanVariation: 500
velocity: AngleDirection {
angle: 90
angleVariation: 10
magnitude: 100
magnitudeVariation: 50
}
}
ItemParticle {
system: particleSystem
delegate: Rectangle {
height: 8
width: 8
radius: 5
color: "white"
}
}
}
}
I'm open to exploring other less CPU-intensive ways to implementing this animation.

Answer 1

I think the ImageParticle is a good suggestion especially if you mix it with SVG. This gives QML the opportunity to compile and cache the SVG image for reuse, whereas with ItemParticle I think there is the burden of dynamic creation of the Item.
I also did a minor refactor to place the UI Rectangle/Item and Emitter at the top and the non-UI declaration ParticleSystem and ItemParticle at the bottom.
import QtQuick
import QtQuick.Controls
import QtQuick.Particles
Page {
background: Rectangle { color: "black" }
Item {
anchors.top: parent.top
width: parent.width
Emitter {
id: emitter
anchors.fill: parent
system: particleSystem
emitRate: 10
lifeSpan: 4000
sizeVariation: 5
lifeSpanVariation: 500
velocity: AngleDirection {
angle: 90
angleVariation: 10
magnitude: 100
magnitudeVariation: 50
}
}
}
ParticleSystem {
id: particleSystem
}
ImageParticle {
system: particleSystem
source: "Particle.qml"
}
}
// Particle.qml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
<circle cx="4" cy="4" r="4" stroke="none" fill="white"/>
</svg>
You can Try it Online!