import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Particles 2.0

Window
{
    visible: true
    width: 1000;
    height: 800

    Rectangle
    {
        id: root;
        anchors.fill: parent
        color: "#1f1f1f"

        ParticleSystem //particle system 
        {
            id: particles
        }

        Emitter //Emitters emit particles to the system, defining the emission region and the basic attributes of the emitted particles
        {
            id: emitter
            y:400
//            width: 900;
//            height: 700
            width: 1;//Setting the width and height of the emitter to 1px means that all particles are emitted from the same position, which means they have the same track start point.
            height: 1
            system: particles
            emitRate: 10// The emitter emits 10 particles per second
            lifeSpan: 9000//The life cycle of each particle is 9000 milliseconds, and the default is 1000 milliseconds
            lifeSpanVariation: 500//The life cycle change of an emitted particle is 500 milliseconds
            size: 16// The starting size of a particle is 16 pixels
            endSize: 32//The size at the end of the life cycle is 32 pixels

            //The speed can not be set
//            velocity:
//            AngleDirection / / angle direction
//            {
//                //The emission of particles will use the specified angle attribute. The angle value is between 0 and 360 degrees, and 0 degrees means pointing to the right
//                angle: 0 / / the moving direction of the particle points to 0 degrees, that is, it moves to the right
//                angleVariation: 15 / / the angle change of particles is + / - 15 degrees
//                Magnet: 100 / / particles move 100 pixels per second
//                magnitudeVariation: 50 / / particles move between + / - 50 pixels per second
//            }

//            Velocity: / / use the point direction as the velocity
//            PointDirection
//            {
//                x: 100
//                y: 0
//                xVariation: 0
//                yVariation: 100/6
//            }

            velocity:
            TargetDirection //The target direction as velocity particles flow to this target position
            {
                targetX: 100
                targetY: 0
                targetVariation: 100/6
                magnitude: 100
            }

            //Acceleration is the acceleration vector (magnitude direction) of each particle
//            acceleration:
//            AngleDirection
//            {
//                //Setting these two values makes the particle's trajectory an arc
//                angle: 90
//                magnitude: 25
//            }
            /*
            Used to display the geometry of the emitter. This visualization shows the particles emitted in the emitter rectangle,
            However, the rendering effect is not limited to the rectangle of the emitter. The render position depends on the lifespan and orientation of the particles.
            */
        }

//        ItemParticle / / a particle item can emit a QML element item as a particle
//        {
//            system: particles
//            delegate: Rectangle
//            {
//                id: rect
//                width: 10
//                height: 10
//                color: "red"
//                radius: 10
//            }
//        }

        //You can also use particle brushes instead of particle items
        ImageParticle
        {
            source: "qrc:/img/star.png"
            system: particles
            color: '#FFD700 '/ / particles are initialized with gold
            colorVariation: 0.2//The color variation range of different particles is + / - 20%
            rotation: 15//Particle initial angle
            rotationVariation: 45//Different particles vary between + / - 45 degrees
            rotationVelocity: 15//Each example will continue to rotate at 15 degrees per second
            rotationVelocityVariation: 15//The rotational speed of each particle varies between + / - 15 degrees
            entryEffect: ImageParticle.Scale//Effect when particles are generated: scaling
        }
    }
}

Particle controller

Particles are emitted by the emitter. Once the particles are emitted, the task of the emitter is completed and will no longer have any impact on the particles. If you need to influence the emitted particles, you need to use an effector. There are many kinds of impactors:

• Age: change the life cycle of particles. It is generally used to end the life cycle of particles in advance
• Attractor: attracts particles to a specified point
• Friction: proportionally reduces the current speed of particles
• Gravity: add an acceleration with a certain angle
• Turbonce: adds an image noise to the particles
• Wonder: randomly changing particle trajectories
• GroupGoal: change the state of the particle group
• SpriteGoal: change the state of Sprite particles

Age controller

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Particles 2.0

Window
{
    visible: true
    width: 1000;
    height: 800

    Rectangle
    {
        id: root;
        anchors.fill: parent
        color: "#1f1f1f"

        ParticleSystem //particle system 
        {
            id: particles
        }

        Emitter //Emitters emit particles to the system, defining the emission region and the basic attributes of the emitted particles
        {
            id: emitter
            y:400
//            width: 900;
//            height: 700
            width: 1;//Setting the width and height of the emitter to 1px means that all particles are emitted from the same position, which means they have the same track start point.
            height: 1
            system: particles
            emitRate: 10// The emitter emits 10 particles per second
            lifeSpan: 9000//The life cycle of each particle is 9000 milliseconds, and the default is 1000 milliseconds
            lifeSpanVariation: 500//The life cycle change of an emitted particle is 500 milliseconds
            size: 16// The starting size of a particle is 16 pixels
            endSize: 32//The size at the end of the life cycle is 32 pixels

            //The speed can not be set
//            velocity:
//            AngleDirection / / angle direction
//            {
//                //The emission of particles will use the specified angle attribute. The angle value is between 0 and 360 degrees, and 0 degrees means pointing to the right
//                angle: 0 / / the moving direction of the particle points to 0 degrees, that is, it moves to the right
//                angleVariation: 15 / / the angle change of particles is + / - 15 degrees
//                Magnet: 100 / / particles move 100 pixels per second
//                magnitudeVariation: 50 / / particles move between + / - 50 pixels per second
//            }

//            Velocity: / / use the point direction as the velocity
//            PointDirection
//            {
//                x: 100
//                y: 0
//                xVariation: 0
//                yVariation: 100/6
//            }

            velocity:
            TargetDirection //The target direction as velocity particles flow to this target position
            {
                targetX: 100
                targetY: 0
                targetVariation: 100/6
                magnitude: 100
            }

            //Acceleration is the acceleration vector (magnitude direction) of each particle
//            acceleration:
//            AngleDirection
//            {
//                //Setting these two values makes the particle's trajectory an arc
//                angle: 90
//                magnitude: 25
//            }
            /*
            Used to display the geometry of the emitter. This visualization shows the particles emitted in the emitter rectangle,
            However, the rendering effect is not limited to the rectangle of the emitter. The render position depends on the lifespan and orientation of the particles.
            */
        }

//        ItemParticle / / a particle item can emit a QML element item as a particle
//        {
//            system: particles
//            delegate: Rectangle
//            {
//                id: rect
//                width: 10
//                height: 10
//                color: "red"
//                radius: 10
//            }
//        }

        //You can also use particle brushes instead of particle items
        ImageParticle
        {
            source: "qrc:/img/star.png"
            system: particles
            color: '#FFD700 '/ / particles are initialized with gold
            colorVariation: 0.2//The color variation range of different particles is + / - 20%
            rotation: 15//Particle initial angle
            rotationVariation: 45//Different particles vary between + / - 45 degrees
            rotationVelocity: 15//Each example will continue to rotate at 15 degrees per second
            rotationVelocityVariation: 15//The rotational speed of each particle varies between + / - 15 degrees
            entryEffect: ImageParticle.Scale//Effect when particles are generated: scaling
        }
    }

    Age
    {
        anchors.horizontalCenter: parent.horizontalCenter
        width: 140;
        height: 620
        x:200
        system: particles
        advancePosition: true
        lifeLeft: 1500
        once: true
        Rectangle
        {
            //The particle life set here is 9000ms. When the particle passes through this area, the particle life becomes 1500ms
            //If advancePosition is set to true, the particles will appear at the position expected when the particle life is 1500ms
            anchors.fill: parent
            color: 'transparent'
            border.color: 'green'
            border.width: 2
            opacity: 0.8
        }
    }
}

Attractor controller

Attracts particles to a specified point positioned using pointX and pointY, whose coordinates are relative to the Attractor. The strength property specifies the strength of the attraction.

    Attractor
    {
       anchors.horizontalCenter: parent.horizontalCenter
       width: 140;
       height: 620
       x:200
       system: particles
       pointX: 0
       pointY: 0
       strength: 1.0
       Rectangle
       {
           anchors.fill: parent
           color: 'transparent'
           border.color: 'green'
           border.width: 2
           opacity: 0.8
       }
    }

Friction controller

It will reduce the speed of particles by a certain proportion. Particles slow down at a factor of 0.8 until they drop to 25 pixels per second:

    Friction
    {
        anchors.horizontalCenter: parent.horizontalCenter
        width: 140;
        height: 620
        x:200
        system: particles
        factor : 0.8
        threshold: 25
        Rectangle
        {
            anchors.fill: parent
            color: 'transparent'
            border.color: 'green'
            border.width: 2
            opacity: 0.8
        }
    }

Gravity controller

Add an acceleration to the particles, and all particles entering the range of the influencer will add an acceleration.

    Gravity
    {
        width: 140;
        height: 620
        x:200
        system: particles
        magnitude: 50
        angle: 90
        Rectangle
        {
            anchors.fill: parent
            color: 'transparent'
            border.color: 'green'
            border.width: 2
            opacity: 0.8
        }
    }

Turbonce controller

Add a force vector for each particle. The random force vector obtained by each particle is random, and the strength attribute defines how strong the vector acting on the particle is. Once in the range of the influencer, the particles go around like crazy, rather than maintaining an approximate trajectory from left to right.

    Turbulence
    {
        anchors.horizontalCenter: parent.horizontalCenter
        width: 340;
        height: 620
        x:200
        system: particles
        strength: 100
        Rectangle
        {
            anchors.fill: parent
            color: 'transparent'
            border.color: 'green'
            border.width: 2
            opacity: 0.8
        }
    }

Wonder controller

• affectedParameter   Property specifies which property (speed, position, acceleration, etc.) wonder can control
• The pace property specifies the maximum value that the property changes per second
• xVariance   and   yVariance   Specifies the floating interval for the x and y coordinates of the particle track

In the following example, the influencer acts on the position attribute of the particle track, and the track position will vibrate randomly in the x direction at a frequency of 200 times per second:

    Wander
    {
        anchors.horizontalCenter: parent.horizontalCenter
        width: 340;
        height: 620
        x:200
        system: particles
        affectedParameter: Wander.Position
        pace: 200
//        yVariance: 240
        xVariance: 500
        Rectangle
        {
            anchors.fill: parent
            color: 'transparent'
            border.color: 'green'
            border.width: 2
            opacity: 0.8
        }
    }