Particle Groups

At the beginning of this chapter, we stated particles are in groups, which is by default the empty group (‘’). Using the GroupGoal affector is it possible to let the particle change groups. To visualize this we would like to create a small firework, where rockets start into space and explode in the air into a spectacular firework.

image

The example is divided into 2 parts. The 1st part called “Launch Time” is concerned to set up the scene and introduce particle groups and the 2nd part called “Let there be fireworks” focuses on the group changes.

Let’s get started!

Launch Time

To get it going we create a typical dark scene:

  1. import QtQuick 2.5
  2. import QtQuick.Particles 2.0
  4. Rectangle {
  5.     id: root
  6.     width: 480; height: 240
  7.     color: "#1F1F1F"
  8.     property bool tracer: false
  9. }

The tracer property will be used to switch the tracer scene wide on and off. The next thing is to declare our particle system:

  1. ParticleSystem {
  2.     id: particleSystem
  3. }

And our two image particles (one for the rocket and one for the exhaust smoke):

  1. ImageParticle {
  2.     id: smokePainter
  3.     system: particleSystem
  4.     groups: ['smoke']
  5.     source: "assets/particle.png"
  6.     alpha: 0.3
  7.     entryEffect: ImageParticle.None
  8. }
  10. ImageParticle {
  11.     id: rocketPainter
  12.     system: particleSystem
  13.     groups: ['rocket']
  14.     source: "assets/rocket.png"
  15.     entryEffect: ImageParticle.None
  16. }

You can see in on the images, they use the groups property to declare to which group the particle belongs. It is enough to just declare a name and an implicit group will be created by Qt Quick.

Now it’s time to emit some rockets into the air. For this, we create an emitter on the bottom of our scene and set the velocity in an upward direction. To simulate some gravity we set an acceleration downwards:

  1. Emitter {
  2.     id: rocketEmitter
  3.     anchors.bottom: parent.bottom
  4.     width: parent.width; height: 40
  5.     system: particleSystem
  6.     group: 'rocket'
  7.     emitRate: 2
  8.     maximumEmitted: 4
  9.     lifeSpan: 4800
  10.     lifeSpanVariation: 400
  11.     size: 32
  12.     velocity: AngleDirection { angle: 270; magnitude: 150; magnitudeVariation: 10 }
  13.     acceleration: AngleDirection { angle: 90; magnitude: 50 }
  14.     Tracer { color: 'red'; visible: root.tracer }
  15. }

The emitter is in the group ‘rocket’, the same as our rocket particle painter. Through the group name, they are bound together. The emitter emits particles into the group ‘rocket’ and the rocket particle painter will pain them.

For the exhaust, we use a trail emitter, which follows our rocket. It declares an own group called ‘smoke’ and follows the particles from the ‘rocket’ group:

  1. TrailEmitter {
  2.     id: smokeEmitter
  3.     system: particleSystem
  4.     emitHeight: 1
  5.     emitWidth: 4
  6.     group: 'smoke'
  7.     follow: 'rocket'
  8.     emitRatePerParticle: 96
  9.     velocity: AngleDirection { angle: 90; magnitude: 100; angleVariation: 5 }
  10.     lifeSpan: 200
  11.     size: 16
  12.     sizeVariation: 4
  13.     endSize: 0
  14. }

The smoke is directed downwards to simulate the force the smoke comes out of the rocket. The emitHeight and emitWidth specify the are around the particle followed from where the smoke particles shall be emitted. If this is not specified then they are of the particle followed is taken but for this example, we want to increase the effect that the particles stem from a central point near the end of the rocket.

If you start the example now you will see the rockets fly up and some are even flying out of the scene. As this is not really wanted we need to slow them down before they leave the screen. A friction affector can be used here to slow the particles down to a minimum threshold:

  1. Friction {
  2.     groups: ['rocket']
  3.     anchors.top: parent.top
  4.     width: parent.width; height: 80
  5.     system: particleSystem
  6.     threshold: 5
  7.     factor: 0.9
  8. }

In the friction affector, you also need to declare which groups of particles it shall affect. The friction will slow all rockets, which are 80 pixels downwards from the top of the screen down by a factor of 0.9 (try 100 and you will see they almost stop immediately) until they reach a velocity of 5 pixels per second. As the particles have still an acceleration downwards applied the rockets will start sinking toward the ground after they reach the end of their life-span.

As climbing up in the air is hard work and a very unstable situation we want to simulate some turbulences while the ship is climbing:

  1. Turbulence {
  2.     groups: ['rocket']
  3.     anchors.bottom: parent.bottom
  4.     width: parent.width; height: 160
  5.     system: particleSystem
  6.     strength: 25
  7.     Tracer { color: 'green'; visible: root.tracer }
  8. }

Also, the turbulence needs to declare which groups it shall affect. The turbulence itself reaches from the bottom 160 pixels upwards (until it reaches the border of the friction). They also could overlap.

When you start the example now you will see the rockets are climbing up and then will be slowed down by the friction and fall back to the ground by the still applied downwards acceleration. The next thing would be to start the firework.

image

TIP

The image shows the scene with the tracers enabled to show the different areas. Rocket particles are emitted in the red area and then affected by the turbulence in the blue area. Finally, they are slowed down by the friction affector in the green area and start falling again, because of the steady applied downwards acceleration.

Let there be fireworks

To be able to change the rocket into a beautiful firework we need add a ParticleGroup to encapsulate the changes:

  1. ParticleGroup {
  2.     name: 'explosion'
  3.     system: particleSystem
  4. }

We change to the particle group using a GroupGoal affector. The group goal affector is placed near the vertical center of the screen and it will affect the group ‘rocket’. With the groupGoal property we set the target group for the change to ‘explosion’, our earlier defined particle group:

  1. GroupGoal {
  2.     id: rocketChanger
  3.     anchors.top: parent.top
  4.     width: parent.width; height: 80
  5.     system: particleSystem
  6.     groups: ['rocket']
  7.     goalState: 'explosion'
  8.     jump: true
  9.     Tracer { color: 'blue'; visible: root.tracer }
  10. }

The jump property states the change in groups shall be immediately and not after a certain duration.

TIP

In the Qt 5 alpha release we could the duration for the group change not get working. Any ideas?

As the group of the rocket now changes to our ‘explosion’ particle group when the rocket particle enters the group goal area we need to add the firework inside the particle group:

  1. // inside particle group
  2. TrailEmitter {
  3.     id: explosionEmitter
  4.     anchors.fill: parent
  5.     group: 'sparkle'
  6.     follow: 'rocket'
  7.     lifeSpan: 750
  8.     emitRatePerParticle: 200
  9.     size: 32
  10.     velocity: AngleDirection { angle: -90; angleVariation: 180; magnitude: 50 }
  11. }

The explosion emits particles into the ‘sparkle’ group. We will define soon a particle painter for this group. The trail emitter used follows the rocket particle and emits per rocket 200 particles. The particles are directed upwards and vary by 180 degrees.

As the particles are emitted into the ‘sparkle’ group, we also need to define a particle painter for the particles:

  1. ImageParticle {
  2.     id: sparklePainter
  3.     system: particleSystem
  4.     groups: ['sparkle']
  5.     color: 'red'
  6.     colorVariation: 0.6
  7.     source: "assets/star.png"
  8.     alpha: 0.3
  9. }

The sparkles of our firework shall be little red stars with an almost transparent color to allow some shine effects.

To make the firework more spectacular we also add a second trail emitter to our particle group, which will emit particles in a narrow cone downwards:

  1. // inside particle group
  2. TrailEmitter {
  3.     id: explosion2Emitter
  4.     anchors.fill: parent
  5.     group: 'sparkle'
  6.     follow: 'rocket'
  7.     lifeSpan: 250
  8.     emitRatePerParticle: 100
  9.     size: 32
  10.     velocity: AngleDirection { angle: 90; angleVariation: 15; magnitude: 400 }
  11. }

Otherwise, the setup is similar to the other explosion trail emitter. That’s it.

Here is the final result.

image

Here is the full source code of the rocket firework.

  1. import QtQuick
  2. import QtQuick.Particles
  4. Rectangle {
  5.     id: root
  6.     width: 480; height: 240
  7.     color: "#1F1F1F"
  8.     property bool tracer: false
  10.     ParticleSystem {
  11.         id: particleSystem
  12.     }
  14.     ImageParticle {
  15.         id: smokePainter
  16.         system: particleSystem
  17.         groups: ['smoke']
  18.         source: "assets/particle.png"
  19.         alpha: 0.3
  20.     }
  22.     ImageParticle {
  23.         id: rocketPainter
  24.         system: particleSystem
  25.         groups: ['rocket']
  26.         source: "assets/rocket.png"
  27.         entryEffect: ImageParticle.Fade
  28.     }
  30.     Emitter {
  31.         id: rocketEmitter
  32.         anchors.bottom: parent.bottom
  33.         width: parent.width; height: 40
  34.         system: particleSystem
  35.         group: 'rocket'
  36.         emitRate: 2
  37.         maximumEmitted: 8
  38.         lifeSpan: 4800
  39.         lifeSpanVariation: 400
  40.         size: 128
  41.         velocity: AngleDirection { angle: 270; magnitude: 150; magnitudeVariation: 10 }
  42.         acceleration: AngleDirection { angle: 90; magnitude: 50 }
  43.         Tracer { color: 'red'; visible: root.tracer }
  44.     }
  46.     TrailEmitter {
  47.         id: smokeEmitter
  48.         system: particleSystem
  49.         group: 'smoke'
  50.         follow: 'rocket'
  51.         size: 16
  52.         sizeVariation: 8
  53.         emitRatePerParticle: 16
  54.         velocity: AngleDirection { angle: 90; magnitude: 100; angleVariation: 15 }
  55.         lifeSpan: 200
  56.         Tracer { color: 'blue'; visible: root.tracer }
  57.     }
  59.     Friction {
  60.         groups: ['rocket']
  61.         anchors.top: parent.top
  62.         width: parent.width; height: 80
  63.         system: particleSystem
  64.         threshold: 5
  65.         factor: 0.9
  67.     }
  69.     Turbulence {
  70.         groups: ['rocket']
  71.         anchors.bottom: parent.bottom
  72.         width: parent.width; height: 160
  73.         system: particleSystem
  74.         strength:25
  75.         Tracer { color: 'green'; visible: root.tracer }
  76.     }
  79.     ImageParticle {
  80.         id: sparklePainter
  81.         system: particleSystem
  82.         groups: ['sparkle']
  83.         color: 'red'
  84.         colorVariation: 0.6
  85.         source: "assets/star.png"
  86.         alpha: 0.3
  87.     }
  89.     GroupGoal {
  90.         id: rocketChanger
  91.         anchors.top: parent.top
  92.         width: parent.width; height: 80
  93.         system: particleSystem
  94.         groups: ['rocket']
  95.         goalState: 'explosion'
  96.         jump: true
  97.         Tracer { color: 'blue'; visible: root.tracer }
  98.     }
  100.     ParticleGroup {
  101.         name: 'explosion'
  102.         system: particleSystem
  104.         TrailEmitter {
  105.             id: explosionEmitter
  106.             anchors.fill: parent
  107.             group: 'sparkle'
  108.             follow: 'rocket'
  109.             lifeSpan: 750
  110.             emitRatePerParticle: 200
  111.             size: 32
  112.             velocity: AngleDirection { angle: -90; angleVariation: 180; magnitude: 50 }
  113.         }
  115.         TrailEmitter {
  116.             id: explosion2Emitter
  117.             anchors.fill: parent
  118.             group: 'sparkle'
  119.             follow: 'rocket'
  120.             lifeSpan: 250
  121.             emitRatePerParticle: 100
  122.             size: 32
  123.             velocity: AngleDirection { angle: 90; angleVariation: 15; magnitude: 400 }
  124.         }
  125.     }
  126. }