Particle example restyling

For self-contained particle systems, placing them inside the
ParticleSystem element is encouraged.

Change-Id: Iafc5a94bb07c4c0dac0daec300d01e0fde165146
Reviewed-by: Yann Bodson <yann.bodson@nokia.com>
Reviewed-by: Alan Alpert <alan.alpert@nokia.com>

7 files changed, 548 insertions, 573 deletions

diff --git a/examples/particles/affectors/content/attractor.qml b/examples/particles/affectors/content/attractor.qml
index 71e66a046e..797270f46f 100644
--- a/examples/particles/affectors/content/attractor.qml
+++ b/examples/particles/affectors/content/attractor.qml
@@ -50,150 +50,141 @@ Rectangle {
         source: "../../images/finalfrontier.png"
         anchors.centerIn:parent
     }
-    Emitter {
-        group: "stars"
-        system: particles
-        emitRate: 40
-        lifeSpan: 4000
-        enabled: true
-        size: 30
-        sizeVariation: 10
-        velocity: PointDirection { x: 220; xVariation: 40 }
-        height: parent.height
-    }
-    Emitter {
-        group: "roids"
-        system: particles
-        emitRate: 10
-        lifeSpan: 4000
-        enabled: true
-        size: 30
-        sizeVariation: 10
-        velocity: PointDirection { x: 220; xVariation: 40 }
-        height: parent.height
-    }
     ParticleSystem {
         id: particles
         anchors.fill: parent
-    }
-    ImageParticle {
-        id: stars
-        groups: ["stars"]
-        system: particles
-        source: "../../images/star.png"
-        color: "white"
-        colorVariation: 0.1
-        alpha: 0
-    }
-    ImageParticle {
-        id: roids
-        groups: ["roids"]
-        system: particles
-        sprites: Sprite {
-            id: spinState
-            name: "spinning"
-            source: "../../images/meteor.png"
-            frameCount: 35
-            frameDuration: 60
+
+        Emitter {
+            group: "stars"
+            emitRate: 40
+            lifeSpan: 4000
+            enabled: true
+            size: 30
+            sizeVariation: 10
+            velocity: PointDirection { x: 220; xVariation: 40 }
+            height: parent.height
         }
-    }
-    ImageParticle {
-        id: shot
-        groups: ["shot"]
-        system: particles
-        source: "../../images/star.png"
+        Emitter {
+            group: "roids"
+            emitRate: 10
+            lifeSpan: 4000
+            enabled: true
+            size: 30
+            sizeVariation: 10
+            velocity: PointDirection { x: 220; xVariation: 40 }
+            height: parent.height
+        }
+        ImageParticle {
+            id: stars
+            groups: ["stars"]
+            source: "../../images/star.png"
+            color: "white"
+            colorVariation: 0.1
+            alpha: 0
+        }
+        ImageParticle {
+            id: roids
+            groups: ["roids"]
+            sprites: Sprite {
+                id: spinState
+                name: "spinning"
+                source: "../../images/meteor.png"
+                frameCount: 35
+                frameDuration: 60
+            }
+        }
+        ImageParticle {
+            id: shot
+            groups: ["shot"]
+            source: "../../images/star.png"
 
-        color: "#0FF06600"
-        colorVariation: 0.3
-    }
-    ImageParticle {
-        id: engine
-        groups: ["engine"]
-        system: particles
-        source: "../../images/particle4.png"
+            color: "#0FF06600"
+            colorVariation: 0.3
+        }
+        ImageParticle {
+            id: engine
+            groups: ["engine"]
+            source: "../../images/particle4.png"
 
-        color: "orange"
-        SequentialAnimation on color {
-            loops: Animation.Infinite
-            ColorAnimation {
-                from: "red"
-                to: "cyan"
-                duration: 1000
-            }
-            ColorAnimation {
-                from: "cyan"
-                to: "red"
-                duration: 1000
+            color: "orange"
+            SequentialAnimation on color {
+                loops: Animation.Infinite
+                ColorAnimation {
+                    from: "red"
+                    to: "cyan"
+                    duration: 1000
+                }
+                ColorAnimation {
+                    from: "cyan"
+                    to: "red"
+                    duration: 1000
+                }
             }
-        }
 
-        colorVariation: 0.2
-    }
-    //! [0]
-    Attractor {
-        id: gs; pointX: root.width/2; pointY: root.height/2; strength: 4000000;
-        system: particles
-        affectedParameter: Attractor.Acceleration
-        proportionalToDistance: Attractor.InverseQuadratic
-    }
-    //! [0]
-    Age {
-        system: particles
-        x: gs.pointX - 8;
-        y: gs.pointY - 8;
-        width: 16
-        height: 16
-    }
-    Rectangle {
-        color: "black"
-        width: 8
-        height: 8
-        radius: 4
-        x: gs.pointX - 4
-        y: gs.pointY - 4
-    }
+            colorVariation: 0.2
+        }
+        //! [0]
+        Attractor {
+            id: gs; pointX: root.width/2; pointY: root.height/2; strength: 4000000;
+            affectedParameter: Attractor.Acceleration
+            proportionalToDistance: Attractor.InverseQuadratic
+        }
+        //! [0]
+        Age {
+            x: gs.pointX - 8;
+            y: gs.pointY - 8;
+            width: 16
+            height: 16
+        }
+        Rectangle {
+            color: "black"
+            width: 8
+            height: 8
+            radius: 4
+            x: gs.pointX - 4
+            y: gs.pointY - 4
+        }
 
-    Image {
-        source:"../../images/rocket2.png"
-        id: ship
-        width: 45
-        height: 22
-        //Automatic movement
-        SequentialAnimation on x {
-            loops: -1
-            NumberAnimation{to: root.width-45; easing.type: Easing.InOutQuad; duration: 2000}
-            NumberAnimation{to: 0; easing.type: Easing.OutInQuad; duration: 6000}
+        Image {
+            source:"../../images/rocket2.png"
+            id: ship
+            width: 45
+            height: 22
+            //Automatic movement
+            SequentialAnimation on x {
+                loops: -1
+                NumberAnimation{to: root.width-45; easing.type: Easing.InOutQuad; duration: 2000}
+                NumberAnimation{to: 0; easing.type: Easing.OutInQuad; duration: 6000}
+            }
+            SequentialAnimation on y {
+                loops: -1
+                NumberAnimation{to: root.height-22; easing.type: Easing.OutInQuad; duration: 6000}
+                NumberAnimation{to: 0; easing.type: Easing.InOutQuad; duration: 2000}
+            }
         }
-        SequentialAnimation on y {
-            loops: -1
-            NumberAnimation{to: root.height-22; easing.type: Easing.OutInQuad; duration: 6000}
-            NumberAnimation{to: 0; easing.type: Easing.InOutQuad; duration: 2000}
+        Emitter {
+            group: "engine"
+            emitRate: 200
+            lifeSpan: 1000
+            size: 10
+            endSize: 4
+            sizeVariation: 4
+            velocity: PointDirection { x: -128; xVariation: 32 }
+            height: ship.height
+            y: ship.y
+            x: ship.x
+            width: 20
+        }
+        Emitter {
+            group: "shot"
+            emitRate: 32
+            lifeSpan: 1000
+            enabled: true
+            size: 40
+            velocity: PointDirection { x: 256; }
+            x: ship.x + ship.width
+            y: ship.y + ship.height/2
         }
-    }
-    Emitter {
-        group: "engine"
-        system: particles
-        emitRate: 200
-        lifeSpan: 1000
-        size: 10
-        endSize: 4
-        sizeVariation: 4
-        velocity: PointDirection { x: -128; xVariation: 32 }
-        height: ship.height
-        y: ship.y
-        x: ship.x
-        width: 20
-    }
-    Emitter {
-        group: "shot"
-        system: particles
-        emitRate: 32
-        lifeSpan: 1000
-        enabled: true
-        size: 40
-        velocity: PointDirection { x: 256; }
-        x: ship.x + ship.width
-        y: ship.y + ship.height/2
     }
 }
 
diff --git a/examples/particles/affectors/content/customaffector.qml b/examples/particles/affectors/content/customaffector.qml
index 8f634fbea3..4ddfc4802c 100644
--- a/examples/particles/affectors/content/customaffector.qml
+++ b/examples/particles/affectors/content/customaffector.qml
@@ -50,127 +50,118 @@ Item {
         anchors.fill: parent
     }
     ParticleSystem {
-        id: sys
-    }
-    Emitter {
-        system: sys
-        width: parent.width
-        emitRate: 4
-        lifeSpan: 14000
-        size: 80
-        velocity: PointDirection { y: 60 }
-    }
-    Wander {
-        system: sys
         anchors.fill: parent
-        anchors.bottomMargin: 100
-        xVariance: 60
-        pace: 60
-    }
+        Emitter {
+            width: parent.width
+            emitRate: 4
+            lifeSpan: 14000
+            size: 80
+            velocity: PointDirection { y: 60 }
+        }
+        Wander {
+            anchors.fill: parent
+            anchors.bottomMargin: 100
+            xVariance: 60
+            pace: 60
+        }
 
-    //! [0]
-    Affector {
-        system: sys
-        property real coefficient: 0.1
-        property real velocity: 1.5
-        width: parent.width
-        height: parent.height - 100
-        onAffectParticles: {
-        /*  //Linear movement
-            if (particle.r == 0) {
-                particle.r = Math.random() > 0.5 ? -1 : 1;
-            }else if (particle.r == 1) {
-                particle.rotation += velocity * dt;
-                if(particle.rotation >= maxAngle)
-                    particle.r = -1;
-            }else if (particle.r == -1) {
-                particle.rotation -= velocity * dt;
-                if(particle.rotation <= -1 * maxAngle)
-                    particle.r = 1;
-            }
-        */
-            //Wobbly movement
-            for (var i=0; i<particles.length; i++) {
-                var particle = particles[i];
-                if (particle.r == 0.0) {
-                    particle.r = Math.random() + 0.01;
+        //! [0]
+        Affector {
+            property real coefficient: 0.1
+            property real velocity: 1.5
+            width: parent.width
+            height: parent.height - 100
+            onAffectParticles: {
+            /*  //Linear movement
+                if (particle.r == 0) {
+                    particle.r = Math.random() > 0.5 ? -1 : 1;
+                } else if (particle.r == 1) {
+                    particle.rotation += velocity * dt;
+                    if (particle.rotation >= maxAngle)
+                        particle.r = -1;
+                } else if (particle.r == -1) {
+                    particle.rotation -= velocity * dt;
+                    if (particle.rotation <= -1 * maxAngle)
+                        particle.r = 1;
+                }
+            */
+                //Wobbly movement
+                for (var i=0; i<particles.length; i++) {
+                    var particle = particles[i];
+                    if (particle.r == 0.0) {
+                        particle.r = Math.random() + 0.01;
+                    }
+                    particle.rotation += velocity * particle.r * dt;
+                    particle.r -= particle.rotation * coefficient;
+                    if (particle.r == 0.0)
+                        particle.r -= particle.rotation * 0.000001;
+                    particle.update = 1;
                 }
-                particle.rotation += velocity * particle.r * dt;
-                particle.r -= particle.rotation * coefficient;
-                if (particle.r == 0.0)
-                    particle.r -= particle.rotation * 0.000001;
-                particle.update = 1;
             }
         }
-    }
-    //! [0]
+        //! [0]
 
-    //! [1]
-    Affector {//Custom Friction, adds some 'randomness'
-        system: sys
-        x: -60
-        width: parent.width + 120
-        height: 100
-        anchors.bottom: parent.bottom
-        onAffectParticles: {
-            for (var i=0; i<particles.length; i++) {
-                var particle = particles[i];
-                var pseudoRand = (Math.floor(particle.t*1327) % 10) + 1;
-                var yslow = dt * pseudoRand * 0.5 + 1;
-                var xslow = dt * pseudoRand * 0.05 + 1;
-                if (particle.vy < 1)
-                    particle.vy = 0;
-                else
-                    particle.vy = (particle.vy / yslow);
-                if (particle.vx < 1)
-                    particle.vx = 0;
-                else
-                    particle.vx = (particle.vx / xslow);
-                particle.update = true;
+        //! [1]
+        Affector {//Custom Friction, adds some 'randomness'
+            x: -60
+            width: parent.width + 120
+            height: 100
+            anchors.bottom: parent.bottom
+            onAffectParticles: {
+                for (var i=0; i<particles.length; i++) {
+                    var particle = particles[i];
+                    var pseudoRand = (Math.floor(particle.t*1327) % 10) + 1;
+                    var yslow = dt * pseudoRand * 0.5 + 1;
+                    var xslow = dt * pseudoRand * 0.05 + 1;
+                    if (particle.vy < 1)
+                        particle.vy = 0;
+                    else
+                        particle.vy = (particle.vy / yslow);
+                    if (particle.vx < 1)
+                        particle.vx = 0;
+                    else
+                        particle.vx = (particle.vx / xslow);
+                    particle.update = true;
+                }
             }
         }
-    }
-    //! [1]
+        //! [1]
 
-    ImageParticle {
-        anchors.fill: parent
-        id: particles
-        system: sys
-        sprites: [Sprite {
-                source: "../../images/realLeaf1.png"
-                frameCount: 1
-                frameDuration: 1
-                to: {"a":1, "b":1, "c":1, "d":1}
-            }, Sprite {
-                name: "a"
-                source: "../../images/realLeaf1.png"
-                frameCount: 1
-                frameDuration: 10000
-            },
-            Sprite {
-                name: "b"
-                source: "../../images/realLeaf2.png"
-                frameCount: 1
-                frameDuration: 10000
-            },
-            Sprite {
-                name: "c"
-                source: "../../images/realLeaf3.png"
-                frameCount: 1
-                frameDuration: 10000
-            },
-            Sprite {
-                name: "d"
-                source: "../../images/realLeaf4.png"
-                frameCount: 1
-                frameDuration: 10000
-            }
-        ]
+        ImageParticle {
+            anchors.fill: parent
+            id: particles
+            sprites: [Sprite {
+                    source: "../../images/realLeaf1.png"
+                    frameCount: 1
+                    frameDuration: 1
+                    to: {"a":1, "b":1, "c":1, "d":1}
+                }, Sprite {
+                    name: "a"
+                    source: "../../images/realLeaf1.png"
+                    frameCount: 1
+                    frameDuration: 10000
+                },
+                Sprite {
+                    name: "b"
+                    source: "../../images/realLeaf2.png"
+                    frameCount: 1
+                    frameDuration: 10000
+                },
+                Sprite {
+                    name: "c"
+                    source: "../../images/realLeaf3.png"
+                    frameCount: 1
+                    frameDuration: 10000
+                },
+                Sprite {
+                    name: "d"
+                    source: "../../images/realLeaf4.png"
+                    frameCount: 1
+                    frameDuration: 10000
+                }
+            ]
 
-        width: 100
-        height: 100
-        x: 20
-        y: 20
-        z:4
+            z:4
+        }
     }
 }
diff --git a/examples/particles/affectors/content/friction.qml b/examples/particles/affectors/content/friction.qml
index bed1cf2a33..c9c42fd895 100644
--- a/examples/particles/affectors/content/friction.qml
+++ b/examples/particles/affectors/content/friction.qml
@@ -49,64 +49,63 @@ Item {
         source: "../../images/backgroundLeaves.jpg"
         anchors.fill: parent
     }
-    ParticleSystem { id: sys }
-    Emitter {
-        system: sys
-        width: parent.width
-        emitRate: 4
-        lifeSpan: 14000
-        size: 80
-        velocity: PointDirection { y: 160; yVariation: 80; xVariation: 20 }
-    }
-
-    ImageParticle {
+    ParticleSystem {
         anchors.fill: parent
-        id: particles
-        system: sys
-        sprites: [Sprite {
-                source: "../../images/realLeaf1.png"
-                frameCount: 1
-                frameDuration: 1
-                to: {"a":1, "b":1, "c":1, "d":1}
-            }, Sprite {
-                name: "a"
-                source: "../../images/realLeaf1.png"
-                frameCount: 1
-                frameDuration: 10000
-            },
-            Sprite {
-                name: "b"
-                source: "../../images/realLeaf2.png"
-                frameCount: 1
-                frameDuration: 10000
-            },
-            Sprite {
-                name: "c"
-                source: "../../images/realLeaf3.png"
-                frameCount: 1
-                frameDuration: 10000
-            },
-            Sprite {
-                name: "d"
-                source: "../../images/realLeaf4.png"
-                frameCount: 1
-                frameDuration: 10000
-            }
-        ]
+        Emitter {
+            width: parent.width
+            emitRate: 4
+            lifeSpan: 14000
+            size: 80
+            velocity: PointDirection { y: 160; yVariation: 80; xVariation: 20 }
+        }
 
-        width: 100
-        height: 100
-        x: 20
-        y: 20
-        z:4
-    }
+        ImageParticle {
+            anchors.fill: parent
+            id: particles
+            sprites: [Sprite {
+                    source: "../../images/realLeaf1.png"
+                    frameCount: 1
+                    frameDuration: 1
+                    to: {"a":1, "b":1, "c":1, "d":1}
+                }, Sprite {
+                    name: "a"
+                    source: "../../images/realLeaf1.png"
+                    frameCount: 1
+                    frameDuration: 10000
+                },
+                Sprite {
+                    name: "b"
+                    source: "../../images/realLeaf2.png"
+                    frameCount: 1
+                    frameDuration: 10000
+                },
+                Sprite {
+                    name: "c"
+                    source: "../../images/realLeaf3.png"
+                    frameCount: 1
+                    frameDuration: 10000
+                },
+                Sprite {
+                    name: "d"
+                    source: "../../images/realLeaf4.png"
+                    frameCount: 1
+                    frameDuration: 10000
+                }
+            ]
 
-    //! [0]
-    Friction {
-        anchors.fill: parent
-        anchors.margins: -40
-        system: sys
-        factor: 0.4
+            width: 100
+            height: 100
+            x: 20
+            y: 20
+            z:4
+        }
+
+        //! [0]
+        Friction {
+            anchors.fill: parent
+            anchors.margins: -40
+            factor: 0.4
+        }
+        //! [0]
     }
-    //! [0]
 }
diff --git a/examples/particles/affectors/content/turbulence.qml b/examples/particles/affectors/content/turbulence.qml
index 62231e12ad..36b9561385 100644
--- a/examples/particles/affectors/content/turbulence.qml
+++ b/examples/particles/affectors/content/turbulence.qml
@@ -54,85 +54,79 @@ Rectangle {
         anchors.horizontalCenterOffset: 2
     }
     ParticleSystem {
-        id: ps
-    }
-    MouseArea {
         anchors.fill: parent
-        onClicked: turb.enabled = !turb.enabled
-    }
+        MouseArea {
+            anchors.fill: parent
+            onClicked: turb.enabled = !turb.enabled
+        }
 
-    //! [0]
-    Turbulence {
-        id: turb
-        system: ps
-        enabled: true
-        height: (parent.height / 2) - 4
-        width: parent.width
-        x: parent. width / 4
-        anchors.fill: parent
-        strength: 32
-        NumberAnimation on strength{from: 16; to: 64; easing.type: Easing.InOutBounce; duration: 1800; loops: -1}
-    }
-    //! [0]
+        //! [0]
+        Turbulence {
+            id: turb
+            enabled: true
+            height: (parent.height / 2) - 4
+            width: parent.width
+            x: parent. width / 4
+            anchors.fill: parent
+            strength: 32
+            NumberAnimation on strength{from: 16; to: 64; easing.type: Easing.InOutBounce; duration: 1800; loops: -1}
+        }
+        //! [0]
 
-    ImageParticle {
-        groups: ["smoke"]
-        system: ps
-        source: "../../images/particle.png"
-        color: "#11111111"
-        colorVariation: 0
-    }
-    ImageParticle {
-        groups: ["flame"]
-        system: ps
-        source: "../../images/particle.png"
-        color: "#11ff400f"
-        colorVariation: 0.1
-    }
-    Emitter {
-        anchors.centerIn: parent
-        system: ps
-        group: "flame"
-        
-        emitRate: 120
-        lifeSpan: 1200
-        size: 20
-        endSize: 10
-        sizeVariation: 10
-        acceleration: PointDirection { y: -40 }
-        velocity: AngleDirection { angle: 270; magnitude: 20; angleVariation: 22; magnitudeVariation: 5 }
-    }
-    TrailEmitter {
-        id: smoke1
-        width: root.width
-        height: root.height/2
-        system: ps
-        group: "smoke"
-        follow: "flame"
+        ImageParticle {
+            groups: ["smoke"]
+            source: "../../images/particle.png"
+            color: "#11111111"
+            colorVariation: 0
+        }
+        ImageParticle {
+            groups: ["flame"]
+            source: "../../images/particle.png"
+            color: "#11ff400f"
+            colorVariation: 0.1
+        }
+        Emitter {
+            anchors.centerIn: parent
+            group: "flame"
 
-        emitRatePerParticle: 1
-        lifeSpan: 2400
-        lifeSpanVariation: 400
-        size: 16
-        endSize: 8
-        sizeVariation: 8
-        acceleration: PointDirection { y: -40 }
-        velocity: AngleDirection { angle: 270; magnitude: 40; angleVariation: 22; magnitudeVariation: 5 }
-    }
-    TrailEmitter {
-        id: smoke2
-        width: root.width
-        height: root.height/2 - 20
-        system: ps
-        group: "smoke"
-        follow: "flame"
-        
-        emitRatePerParticle: 4
-        lifeSpan: 2400
-        size: 36
-        endSize: 24
-        sizeVariation: 12
-        acceleration: PointDirection { y: -40 }
-        velocity: AngleDirection { angle: 270; magnitude: 40; angleVariation: 22; magnitudeVariation: 5 }
+            emitRate: 120
+            lifeSpan: 1200
+            size: 20
+            endSize: 10
+            sizeVariation: 10
+            acceleration: PointDirection { y: -40 }
+            velocity: AngleDirection { angle: 270; magnitude: 20; angleVariation: 22; magnitudeVariation: 5 }
+        }
+        TrailEmitter {
+            id: smoke1
+            width: root.width
+            height: root.height/2
+            group: "smoke"
+            follow: "flame"
+
+            emitRatePerParticle: 1
+            lifeSpan: 2400
+            lifeSpanVariation: 400
+            size: 16
+            endSize: 8
+            sizeVariation: 8
+            acceleration: PointDirection { y: -40 }
+            velocity: AngleDirection { angle: 270; magnitude: 40; angleVariation: 22; magnitudeVariation: 5 }
+        }
+        TrailEmitter {
+            id: smoke2
+            width: root.width
+            height: root.height/2 - 20
+            group: "smoke"
+            follow: "flame"
+
+            emitRatePerParticle: 4
+            lifeSpan: 2400
+            size: 36
+            endSize: 24
+            sizeVariation: 12
+            acceleration: PointDirection { y: -40 }
+            velocity: AngleDirection { angle: 270; magnitude: 40; angleVariation: 22; magnitudeVariation: 5 }
+        }
     }
 }
diff --git a/examples/particles/emitters/content/maximumemitted.qml b/examples/particles/emitters/content/maximumemitted.qml
index b99814ce88..b008135ff1 100644
--- a/examples/particles/emitters/content/maximumemitted.qml
+++ b/examples/particles/emitters/content/maximumemitted.qml
@@ -47,35 +47,36 @@ Rectangle {
     height: 540
     ParticleSystem {
         id: sys
+        anchors.fill: parent
         onEmptyChanged: if (empty) sys.pause();
-    }
 
-    ImageParticle {
-        system: sys
-        id: cp
-        source: "../../images/particle.png"
-        colorVariation: 0.4
-        color: "#000000FF"
-    }
+        ImageParticle {
+            system: sys
+            id: cp
+            source: "../../images/particle.png"
+            colorVariation: 0.4
+            color: "#000000FF"
+        }
 
-    Emitter {
-        //burst on click
-        id: bursty
-        system: sys
-        enabled: ma.pressed
-        x: ma.mouseX
-        y: ma.mouseY
-        emitRate: 16000
-        maximumEmitted: 4000
-        acceleration: AngleDirection {angleVariation: 360; magnitude: 360; }
-        size: 8
-        endSize: 16
-        sizeVariation: 4
-    }
+        Emitter {
+            //burst on click
+            id: bursty
+            system: sys
+            enabled: ma.pressed
+            x: ma.mouseX
+            y: ma.mouseY
+            emitRate: 16000
+            maximumEmitted: 4000
+            acceleration: AngleDirection {angleVariation: 360; magnitude: 360; }
+            size: 8
+            endSize: 16
+            sizeVariation: 4
+        }
 
-    MouseArea {
-        anchors.fill: parent
-        onPressed: sys.resume()
-        id: ma
+        MouseArea {
+            anchors.fill: parent
+            onPressed: sys.resume()
+            id: ma
+        }
     }
 }
diff --git a/examples/particles/emitters/content/shapeanddirection.qml b/examples/particles/emitters/content/shapeanddirection.qml
index d2a8bb1dd5..96b4b60ee4 100644
--- a/examples/particles/emitters/content/shapeanddirection.qml
+++ b/examples/particles/emitters/content/shapeanddirection.qml
@@ -53,62 +53,60 @@ Rectangle {
 
     ParticleSystem {
         id: particles
-    }
-
-    ImageParticle {
-        groups: ["center","edge"]
         anchors.fill: parent
-        system: particles
-        source: "../../images/particle.png"
-        colorVariation: 0.1
-        color: "#009999FF"
-    }
 
-    Emitter {
-        anchors.fill: parent
-        group: "center"
-        system: particles
-        emitRate: 400
-        lifeSpan: 2000
-        size: 20
-        sizeVariation: 2
-        endSize: 0
-        //! [0]
-        shape: EllipseShape {fill: false}
-        velocity: TargetDirection {
-            targetX: root.width/2 
-            targetY: root.height/2
-            proportionalMagnitude: true
-            magnitude: 0.5
+        ImageParticle {
+            groups: ["center","edge"]
+            anchors.fill: parent
+            source: "../../images/particle.png"
+            colorVariation: 0.1
+            color: "#009999FF"
         }
-        //! [0]
-    }
 
-    Emitter {
-        anchors.fill: parent
-        group: "edge"
-        startTime: 2000
-        system: particles
-        emitRate: 2000
-        lifeSpan: 2000
-        size: 28
-        sizeVariation: 2
-        endSize: 16
-        shape: EllipseShape {fill: false}
-        velocity: TargetDirection {
-            targetX: root.width/2 
-            targetY: root.height/2
-            proportionalMagnitude: true
-            magnitude: 0.1
-            magnitudeVariation: 0.1
+        Emitter {
+            anchors.fill: parent
+            group: "center"
+            emitRate: 400
+            lifeSpan: 2000
+            size: 20
+            sizeVariation: 2
+            endSize: 0
+            //! [0]
+            shape: EllipseShape {fill: false}
+            velocity: TargetDirection {
+                targetX: root.width/2
+                targetY: root.height/2
+                proportionalMagnitude: true
+                magnitude: 0.5
+            }
+            //! [0]
         }
-        acceleration: TargetDirection {
-            targetX: root.width/2 
-            targetY: root.height/2
-            targetVariation: 200
-            proportionalMagnitude: true
-            magnitude: 0.1
-            magnitudeVariation: 0.1
+
+        Emitter {
+            anchors.fill: parent
+            group: "edge"
+            startTime: 2000
+            emitRate: 2000
+            lifeSpan: 2000
+            size: 28
+            sizeVariation: 2
+            endSize: 16
+            shape: EllipseShape {fill: false}
+            velocity: TargetDirection {
+                targetX: root.width/2
+                targetY: root.height/2
+                proportionalMagnitude: true
+                magnitude: 0.1
+                magnitudeVariation: 0.1
+            }
+            acceleration: TargetDirection {
+                targetX: root.width/2
+                targetY: root.height/2
+                targetVariation: 200
+                proportionalMagnitude: true
+                magnitude: 0.1
+                magnitudeVariation: 0.1
+            }
         }
     }
 }
diff --git a/examples/particles/emitters/content/trailemitter.qml b/examples/particles/emitters/content/trailemitter.qml
index b225b59d6a..074f6d8160 100644
--- a/examples/particles/emitters/content/trailemitter.qml
+++ b/examples/particles/emitters/content/trailemitter.qml
@@ -49,127 +49,128 @@ Rectangle {
 
     ParticleSystem {
         id: particles
-    }
-
-    ImageParticle {
-        id: smoke
-        system: particles
-        anchors.fill: parent
-        groups: ["A", "B"]
-        source: "../../images/particle.png"
-        colorVariation: 0
-        color: "#00111111"
-    }
-    ImageParticle {
-        id: flame
-        anchors.fill: parent
-        system: particles
-        groups: ["C", "D"]
-        source: "../../images/particle.png"
-        colorVariation: 0.1
-        color: "#00ff400f"
-    }
-
-    Emitter {
-        id: fire
-        system: particles
-        group: "C"
-
-        y: parent.height
-        width: parent.width
-
-        emitRate: 350
-        lifeSpan: 3500
-
-        acceleration: PointDirection { y: -17; xVariation: 3 }
-        velocity: PointDirection {xVariation: 3}
-
-        size: 24
-        sizeVariation: 8
-        endSize: 4
-    }
-
-    TrailEmitter {
-        id: fireSmoke
-        group: "B"
-        system: particles
-        follow: "C"
-        width: root.width
-        height: root.height - 68
-
-        emitRatePerParticle: 1
-        lifeSpan: 2000
-
-        velocity: PointDirection {y:-17*6; yVariation: -17; xVariation: 3}
-        acceleration: PointDirection {xVariation: 3}
-
-        size: 36
-        sizeVariation: 8
-        endSize: 16
-    }
-
-    TrailEmitter {
-        id: fireballFlame
         anchors.fill: parent
-        system: particles
-        group: "D"
-        follow: "E"
-
-        emitRatePerParticle: 120
-        lifeSpan: 180
-        emitWidth: TrailEmitter.ParticleSize
-        emitHeight: TrailEmitter.ParticleSize
-        emitShape: EllipseShape{}
-
-        size: 16
-        sizeVariation: 4
-        endSize: 4
-    }
-    
-    TrailEmitter {
-        id: fireballSmoke
-        anchors.fill: parent
-        system: particles
-        group: "A"
-        follow: "E"
-
-        emitRatePerParticle: 128
-        lifeSpan: 2400
-        emitWidth: TrailEmitter.ParticleSize
-        emitHeight: TrailEmitter.ParticleSize
-        emitShape: EllipseShape{}
-
-        velocity: PointDirection {yVariation: 16; xVariation: 16}
-        acceleration: PointDirection {y: -16}
-
-        size: 24
-        sizeVariation: 8
-        endSize: 8
-    }
 
-    Emitter {
-        id: balls
-        system: particles
-        group: "E"
-
-        y: parent.height
-        width: parent.width
-
-        emitRate: 2
-        lifeSpan: 7000
-
-        velocity: PointDirection {y:-17*4*2; xVariation: 6*6}
-        acceleration: PointDirection {y: 17*2; xVariation: 6*6}
-
-        size: 8
-        sizeVariation: 4
-    }
-
-    Turbulence { //A bit of turbulence makes the smoke look better
-        anchors.fill: parent
-        groups: ["A","B"]
-        strength: 32
-        system: particles
+        ImageParticle {
+            id: smoke
+            system: particles
+            anchors.fill: parent
+            groups: ["A", "B"]
+            source: "../../images/particle.png"
+            colorVariation: 0
+            color: "#00111111"
+        }
+        ImageParticle {
+            id: flame
+            anchors.fill: parent
+            system: particles
+            groups: ["C", "D"]
+            source: "../../images/particle.png"
+            colorVariation: 0.1
+            color: "#00ff400f"
+        }
+
+        Emitter {
+            id: fire
+            system: particles
+            group: "C"
+
+            y: parent.height
+            width: parent.width
+
+            emitRate: 350
+            lifeSpan: 3500
+
+            acceleration: PointDirection { y: -17; xVariation: 3 }
+            velocity: PointDirection {xVariation: 3}
+
+            size: 24
+            sizeVariation: 8
+            endSize: 4
+        }
+
+        TrailEmitter {
+            id: fireSmoke
+            group: "B"
+            system: particles
+            follow: "C"
+            width: root.width
+            height: root.height - 68
+
+            emitRatePerParticle: 1
+            lifeSpan: 2000
+
+            velocity: PointDirection {y:-17*6; yVariation: -17; xVariation: 3}
+            acceleration: PointDirection {xVariation: 3}
+
+            size: 36
+            sizeVariation: 8
+            endSize: 16
+        }
+
+        TrailEmitter {
+            id: fireballFlame
+            anchors.fill: parent
+            system: particles
+            group: "D"
+            follow: "E"
+
+            emitRatePerParticle: 120
+            lifeSpan: 180
+            emitWidth: TrailEmitter.ParticleSize
+            emitHeight: TrailEmitter.ParticleSize
+            emitShape: EllipseShape{}
+
+            size: 16
+            sizeVariation: 4
+            endSize: 4
+        }
+
+        TrailEmitter {
+            id: fireballSmoke
+            anchors.fill: parent
+            system: particles
+            group: "A"
+            follow: "E"
+
+            emitRatePerParticle: 128
+            lifeSpan: 2400
+            emitWidth: TrailEmitter.ParticleSize
+            emitHeight: TrailEmitter.ParticleSize
+            emitShape: EllipseShape{}
+
+            velocity: PointDirection {yVariation: 16; xVariation: 16}
+            acceleration: PointDirection {y: -16}
+
+            size: 24
+            sizeVariation: 8
+            endSize: 8
+        }
+
+        Emitter {
+            id: balls
+            system: particles
+            group: "E"
+
+            y: parent.height
+            width: parent.width
+
+            emitRate: 2
+            lifeSpan: 7000
+
+            velocity: PointDirection {y:-17*4*2; xVariation: 6*6}
+            acceleration: PointDirection {y: 17*2; xVariation: 6*6}
+
+            size: 8
+            sizeVariation: 4
+        }
+
+        Turbulence { //A bit of turbulence makes the smoke look better
+            anchors.fill: parent
+            groups: ["A","B"]
+            strength: 32
+            system: particles
+        }
     }
 }