Combined particle related demos into one demo.

Change-Id: I476491d2c49d49c432f807c7145981f93407b640
Reviewed-by: Lasse Räihä <lasse.raiha@digia.com>

8 files changed, 299 insertions, 24 deletions

diff --git a/QtDemo/qml/QtDemo/demos/particledemo/BootScreenDemo.qml b/QtDemo/qml/QtDemo/demos/particledemo/BootScreenDemo.qml
new file mode 100644
index 0000000..4cbe44e
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/particledemo/BootScreenDemo.qml
@@ -0,0 +1,140 @@
+import QtQuick 2.0
+import QtQuick.Particles 2.0
+
+Item {
+    id: root
+    property real size: Math.min(root.width, root.height);
+    signal finished()
+
+    SequentialAnimation {
+        id: entryAnimation
+        running: true
+        ParallelAnimation {
+            SequentialAnimation {
+                PropertyAction { target: sphereEmitter; property: "emitRate"; value: 100 }
+                PropertyAction { target: starEmitter; property: "emitRate"; value: 50 }
+
+                PropertyAction { target: starEmitter; property: "enabled"; value: true }
+                PropertyAction { target: sphereEmitter; property: "enabled"; value: true }
+
+                PropertyAction { target: sphereSystem; property: "running"; value: true }
+                PropertyAction { target: starSystem; property: "running"; value: true }
+                PauseAnimation { duration: 3000 }
+                PropertyAction { target: sphereEmitter; property: "emitRate"; value: 200 }
+                PropertyAction { target: starEmitter; property: "emitRate"; value: 200 }
+                PauseAnimation { duration: 3000 }
+                ScriptAction { script: {
+                        starAccel.x = 5
+                        starAccel.xVariation = 20;
+                        starAccel.yVariation = 20;
+                        sphereAccel.x = -5
+                        sphereAccel.xVariation = 20
+                        sphereAccel.yVariation = 20
+                        sphereParticle.alpha = 0;
+                    }
+                }
+                PauseAnimation { duration: 1000 }
+                PropertyAction { target: starEmitter; property: "enabled"; value: false }
+                PropertyAction { target: sphereEmitter; property: "enabled"; value: false }
+                PauseAnimation { duration: 5000 }
+
+                ScriptAction { script: {
+                        starAccel.x = 0
+                        starAccel.xVariation = 0;
+                        starAccel.yVariation = 0;
+                        sphereAccel.x = 0
+                        sphereAccel.xVariation = 1
+                        sphereAccel.yVariation = 1
+                        sphereParticle.alpha = 1;
+                    }
+                }
+            }
+            SequentialAnimation {
+                PauseAnimation { duration: 5000 }
+
+            }
+        }
+        onRunningChanged: {
+            if (!running) {
+                root.finished()
+                root.destroy()
+            }
+        }
+    }
+    Item {
+        id: logo;
+        width: root.size  / 2;
+        height: root.size  / 2;
+        anchors.centerIn: parent
+    }
+
+    ParticleSystem {
+        id: sphereSystem;
+        anchors.fill: logo
+
+        running: false
+
+        ImageParticle {
+            id: sphereParticle
+            source: "images/particle.png"
+            color: "#80c342"
+            alpha: 1
+            colorVariation: 0.0
+        }
+
+        Emitter {
+            id: sphereEmitter
+            anchors.fill: parent
+            emitRate: 100
+            lifeSpan: 4000
+            size: root.width*.1
+            sizeVariation: size *.2
+            velocity: PointDirection { xVariation: 2; yVariation: 2; }
+
+            acceleration: PointDirection {
+                id: sphereAccel
+                xVariation: 1;
+                yVariation: 1;
+            }
+
+            shape: MaskShape {
+                source: "images/qt-logo-green-mask.png"
+            }
+        }
+    }
+
+    ParticleSystem {
+        id: starSystem;
+        anchors.fill: logo
+
+        running: false
+
+        ImageParticle {
+            id: starParticle
+            source: "images/particle_star.png"
+            color: "#ffffff"
+            alpha: 0
+            colorVariation: 0
+        }
+
+        Emitter {
+            id: starEmitter
+            anchors.fill: parent
+            emitRate: 50
+            lifeSpan: 5000
+            size: root.width*.05
+            sizeVariation: size *.2
+
+            velocity: PointDirection { xVariation: 1; yVariation: 1; }
+            acceleration: PointDirection {
+                id: starAccel
+                xVariation: 0;
+                yVariation: 0;
+            }
+
+            shape: MaskShape {
+                source: "images/qt-logo-white-mask.png"
+            }
+        }
+    }
+}
diff --git a/QtDemo/qml/QtDemo/demos/particledemo/ParticleSysComponent.qml b/QtDemo/qml/QtDemo/demos/particledemo/ParticleSysComponent.qml
index 3c7d5ff..491d4df 100644
--- a/QtDemo/qml/QtDemo/demos/particledemo/ParticleSysComponent.qml
+++ b/QtDemo/qml/QtDemo/demos/particledemo/ParticleSysComponent.qml
@@ -5,6 +5,7 @@ import QtQuick.Particles 2.0
  * ParticleSystem component draw particles with the given color. The
  * location of the particles depends on the given TouchPoint 'point'.
  */
+
 ParticleSystem {
     id: root
     anchors.fill: parent
@@ -12,26 +13,55 @@ ParticleSystem {
 
     property color particleColor: "#ff0000"
     property TouchPoint point: null;
+    property int angle: 0
+    property int pointCount: 0
+    property int startAngle: 0
+    property real radius: 0
+    property int movement: 1
+    property real targetX: root.point.pressed ? root.point.x : width/2+radius * Math.cos(targetAngle*(Math.PI/180))
+    property real targetY: root.point.pressed ? root.point.y : height/2+radius * Math.sin(targetAngle*(Math.PI/180))
+    property real targetAngle: angle+startAngle
+    property bool emitting: false
 
     Emitter {
         id: emitter
-        lifeSpan: 500
+        lifeSpan: 1000
         emitRate: 80
-        x: root.point.x
-        y: root.point.y
-        enabled: root.point.pressed
-        size: 15
-        endSize: 25
+        x: targetX
+        y: targetY
+        enabled: root.emitting
+        size: root.height*.05
+        endSize: root.height*.1
         sizeVariation: .5
-        velocity: AngleDirection{angle:0; angleVariation: 360; magnitude:50}
-        acceleration: AngleDirection{angle:0; angleVariation: 360; magnitude: 50}
-        shape: EllipseShape{fill:true}
+        velocity: AngleDirection{angle:0; angleVariation: 360; magnitude: 10}
+        acceleration: AngleDirection{angle:0; angleVariation: 360; magnitude: 10}
+        velocityFromMovement: root.movement
     }
 
     ImageParticle {
         id: imageParticle
-        source: "particle.png"
-        color: root.particleColor
-        alpha: 0.0
+        source: "images/particle.png"
+        color: root.pointCount >0 && root.point.pressed ? root.particleColor: "#444444"
+        alpha: .0
+        colorVariation: root.pointCount >0 && root.point.pressed  ? 0.3: .0
+
+        Behavior on color{
+            enabled: root.pointCount != 0
+            ColorAnimation { duration: 500 }
+        }
+
+        SequentialAnimation on color {
+            id: colorAnimation
+            loops: Animation.Infinite
+            running: root.pointCount === 0
+            ColorAnimation {from: root.particleColor; to: "magenta";  duration: 2000}
+            ColorAnimation {from: "magenta"; to: "blue"; duration: 1000}
+            ColorAnimation {from: "blue"; to: "violet";  duration: 1000}
+            ColorAnimation {from: "violet"; to: "red";  duration: 1000}
+            ColorAnimation {from: "red"; to: "orange";  duration: 1000}
+            ColorAnimation {from: "orange"; to: "yellow";  duration: 1000}
+            ColorAnimation {from: "yellow"; to: "green";  duration: 1000}
+            ColorAnimation {from: "green"; to: root.particleColor; duration: 2000}
+        }
     }
 }
diff --git a/QtDemo/qml/QtDemo/demos/particledemo/images/particle.png b/QtDemo/qml/QtDemo/demos/particledemo/images/particle.png
new file mode 100644
index 0000000..7520c9b
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/particledemo/images/particle.png
diff --git a/QtDemo/qml/QtDemo/demos/particledemo/images/particle_star.png b/QtDemo/qml/QtDemo/demos/particledemo/images/particle_star.png
new file mode 100644
index 0000000..5660d27
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/particledemo/images/particle_star.png
diff --git a/QtDemo/qml/QtDemo/demos/particledemo/images/qt-logo-green-mask.png b/QtDemo/qml/QtDemo/demos/particledemo/images/qt-logo-green-mask.png
new file mode 100644
index 0000000..84be10d
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/particledemo/images/qt-logo-green-mask.png
diff --git a/QtDemo/qml/QtDemo/demos/particledemo/images/qt-logo-white-mask.png b/QtDemo/qml/QtDemo/demos/particledemo/images/qt-logo-white-mask.png
new file mode 100644
index 0000000..920eeee
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/particledemo/images/qt-logo-white-mask.png
diff --git a/QtDemo/qml/QtDemo/demos/particledemo/particledemo.qml b/QtDemo/qml/QtDemo/demos/particledemo/particledemo.qml
index 587ca0b..7bb1989 100644
--- a/QtDemo/qml/QtDemo/demos/particledemo/particledemo.qml
+++ b/QtDemo/qml/QtDemo/demos/particledemo/particledemo.qml
@@ -2,35 +2,140 @@ import QtQuick 2.0
 import QtQuick.Particles 2.0
 
 Rectangle {
-    color: "#000022"
+    id: root
+    color: "#000000"
     anchors.fill: parent
 
+    property real distance: parent.height*.5
+    property real angle: 0
+    property real movement: 0
+    property alias running: angleAnimation.running
+
+    BootScreenDemo {
+        width: 500
+        height: 500
+        anchors.centerIn: parent
+        onFinished: {
+            distanceAnimation.restart()
+            angleAnimation.restart()
+        }
+    }
+
+    RotationAnimation on angle {
+        id: angleAnimation
+        from: 0
+        to: 360
+        running: false
+        duration: distanceAnimation.delay
+        direction: RotationAnimation.Shortest
+        loops: Animation.Infinite
+    }
+
+    SequentialAnimation on distance {
+        id: distanceAnimation
+        property int easingType:0
+        property int delay: 1000
+        running: false
+
+        NumberAnimation {
+            from: 0
+            to: parent.height*.5
+            duration: distanceAnimation.delay/2
+            easing.type: distanceAnimation.easingType
+        }
+
+        NumberAnimation {
+            from: parent.height*.5
+            to: 0
+            duration: distanceAnimation.delay/2
+            easing.type: distanceAnimation.easingType
+        }
+
+        onRunningChanged: {
+            if (!running){
+                var type = Math.floor(Math.random()*10)
+                switch (type){
+                case 0:
+                    distanceAnimation.easingType=Easing.InOutBack
+                    break;
+                case 1:
+                    distanceAnimation.easingType=Easing.InOutBounce
+                    break;
+                case 2:
+                    distanceAnimation.easingType=Easing.InOutCirc
+                    break;
+                case 3:
+                    distanceAnimation.easingType=Easing.InOutElastic
+                    break;
+                case 4:
+                    distanceAnimation.easingType=Easing.InOutSine
+                    break;
+                case 5:
+                    distanceAnimation.easingType=Easing.OutInQuad
+                    break;
+                case 6:
+                    distanceAnimation.easingType=Easing.OutInCubic
+                    break;
+                case 7:
+                    distanceAnimation.easingType=Easing.OutExpo
+                    break;
+                case 8:
+                    distanceAnimation.easingType=Easing.OutCurve
+                    break;
+                default:
+                    distanceAnimation.easingType=Easing.Linear
+                    break;
+                }
+
+                distanceAnimation.delay = 500 + Math.floor(Math.random()*1500)
+                angleAnimation.from = 180 + Math.random()*90 - 45
+                root.movement = Math.random()*2
+                angleAnimation.restart()
+                distanceAnimation.restart()
+            }
+        }
+    }
+
     /**
-     * Create six ParticleSysComponents for drawing particles
+     * Create five ParticleSysComponents for drawing particles
      * in the place of multitouch points with the given color.
      */
-    ParticleSysComponent{ point: point1; particleColor: "#ff0000" }
-    ParticleSysComponent{ point: point2; particleColor: "#00ff00" }
-    ParticleSysComponent{ point: point3; particleColor: "#0000ff" }
-    ParticleSysComponent{ point: point4; particleColor: "#ffffff" }
-    ParticleSysComponent{ point: point5; particleColor: "#ff00ff" }
-    ParticleSysComponent{ point: point6; particleColor: "#00ffff" }
+    ParticleSysComponent{ id: p1; point: point1; particleColor: "#ff0000"; angle: root.angle; startAngle: 1*360/(5-multiPointTouchArea.pointCount); pointCount: multiPointTouchArea.pointCount; radius: root.distance; movement: root.movement; emitting: root.running }
+    ParticleSysComponent{ id: p2; point: point2; particleColor: "#00ff00"; angle: root.angle; startAngle: 2*360/(5-multiPointTouchArea.pointCount); pointCount: multiPointTouchArea.pointCount; radius: root.distance; movement: root.movement; emitting: root.running }
+    ParticleSysComponent{ id: p3; point: point3; particleColor: "#0000ff"; angle: root.angle; startAngle: 3*360/(5-multiPointTouchArea.pointCount); pointCount: multiPointTouchArea.pointCount; radius: root.distance; movement: root.movement; emitting: root.running }
+    ParticleSysComponent{ id: p4; point: point4; particleColor: "#ffff00"; angle: root.angle; startAngle: 4*360/(5-multiPointTouchArea.pointCount); pointCount: multiPointTouchArea.pointCount; radius: root.distance; movement: root.movement; emitting: root.running }
+    ParticleSysComponent{ id: p5; point: point5; particleColor: "#ff00ff"; angle: root.angle; startAngle: 5*360/(5-multiPointTouchArea.pointCount); pointCount: multiPointTouchArea.pointCount; radius: root.distance; movement: root.movement; emitting: root.running }
 
     /**
-     * In this demo we only support six touch point at the same time.
+     * In this demo we only support five touch point at the same time.
      */
+
     MultiPointTouchArea {
         id: multiPointTouchArea
         anchors.fill: parent
         minimumTouchPoints: 1
         maximumTouchPoints: 6
+
+        property int pointCount:0
+
         touchPoints: [
             TouchPoint { id: point1 },
             TouchPoint { id: point2 },
             TouchPoint { id: point3 },
             TouchPoint { id: point4 },
-            TouchPoint { id: point5 },
-            TouchPoint { id: point6 }
+            TouchPoint { id: point5 }
         ]
+
+        onPressed: updatePointCount()
+
+        onReleased: updatePointCount()
+
+        function updatePointCount(){
+            var tmp = 0
+            for (var i=0; i<5; i++){
+                if (touchPoints[i].pressed) tmp++
+            }
+            pointCount = tmp
+        }
     }
 }
diff --git a/QtDemo/qml/QtDemo/engine.js b/QtDemo/qml/QtDemo/engine.js
index b9c8285..ea6b4f3 100644
--- a/QtDemo/qml/QtDemo/engine.js
+++ b/QtDemo/qml/QtDemo/engine.js
@@ -5,7 +5,7 @@ var positions = [{x:-100, y:-850, angle: 0, url: "demos/calqlatr/Calqlatr.qml",
                  {x:-1900, y:0, angle: 0, url: "demos/rssnews/rssnews.qml", device: 3, name: "Rss Reader"},
                  {x:1700, y:200, angle: 0, url: "demos/boot/BootScreen.qml", device: 4, name: "Particles"},
                  {x:-2000, y:800, angle: 0, url: "demos/slidepuzzle/slidepuzzle.qml", device: 5, name: "Slide puzzle"},
-                 {x:1600, y:1100, angle: 0, url: "demos/particledemo/particledemo.qml", device: 6, name: "Multitouch"},
+                 {x:1600, y:1100, angle: 0, url: "demos/particledemo/particledemo.qml", device: 6, name: "Particles"},
                  {x:1100, y:2000, angle: 0, url: "demos/photosurface/photosurface.qml", device: 7, name: "Photo surface"},
                  {x:-1100, y:1700, angle: 0, url: "demos/shaders/main.qml", device: 7, name: "Shaders"}]