Updated the Particles learning guide

Task-number: QTBUG-28831

Change-Id: I63e678fec30654bd8d0eef51786133c57ddce51f
Reviewed-by: Topi Reiniö <topi.reinio@digia.com>
Reviewed-by: Geir Vattekar <geir.vattekar@digia.com>

8 files changed, 83 insertions, 87 deletions

diff --git a/particles_tutorial/conf.py b/particles_tutorial/conf.py
index 2838da6..86a14da 100644
--- a/particles_tutorial/conf.py
+++ b/particles_tutorial/conf.py
@@ -32,7 +32,7 @@ htmlhelp_basename = 'ParticlesTutorial'
 
 latex_documents = [
   ('index', 'ParticlesTutorial.tex', u'Particles and Graphics Effects in Qt Quick 2',
-   u'Nokia, Qt Learning', 'manual'),
+   u'Digia, Qt Learning', 'manual'),
 ]
 
 # -- Options for Epub output ---------------------------------------------------
@@ -50,4 +50,4 @@ qthelp_basename = 'ParticlesTutorial'
 show_authors = True
 
 version = '1.0'
-release = '1.0'
\ No newline at end of file
+release = '1.0'
diff --git a/particles_tutorial/introduction.rst b/particles_tutorial/introduction.rst
index c5935fa..0a17f67 100644
--- a/particles_tutorial/introduction.rst
+++ b/particles_tutorial/introduction.rst
@@ -17,7 +17,7 @@ Why Would You Want to Read this Guide?
 
 The goal of this tutorial is to introduce you to some of the features of Qt Quick 2 for implementing animations and graphic effects. Mainly, this tutorial provides an overview of how to use the `Particles` module in Qt Quick 2 as well as `ShaderEffects` for advanced graphic effects.
 
-The tutorial is split into three main chapters. In the first chapter, you will be introduced to the `Particles` module. We will provide some basic setup code illustrating the use of the main elements. The second chapter provides a quick overview of how to use `Shader` programs within QML through a simple example. The last chapter will focus on implementing a demo application step by step using `Animations`, `Particles` and `Shaders`.
+The tutorial is split into three main chapters. In the first chapter, you will be introduced to the `Particles` module. We will provide some basic setup code illustrating the use of the main types. The second chapter provides a quick overview of how to use `Shader` programs within QML through a simple example. The last chapter will focus on implementing a demo application step-by-step using `Animations`, `Particles`, and `Shaders`.
 
 
 .. image:: images/screenshot.png
@@ -37,6 +37,7 @@ The guide is available in the following formats:
      :download:`PDF <qteffects/ParticlesTutorial.pdf>`
 
      :download:`ePub <qteffects/ParticlesTutorial.epub>` for ebook readers. Further details can be found `here <http://en.wikipedia.org/wiki/EPUB#Software_reading_systems>`_.
+
      :download:`Qt Help <qteffects/ParticlesTutorial.qch>` for Qt Assistant and Qt Creator. In Qt Assistant, in the :qt:`Preferences Dialog <assistant-details.html#preferences-dialog>` under the `Documentation` tab (in a collapsible menu for Mac users), you click on the `Add` button in order to add this guide in .qch format. We do the same in Qt Creator under the `Options` dialog in the `Help` section. Here you can add this guide in the `Documentation` tab.
 
 
@@ -54,4 +55,4 @@ Qt and the Qt logo is a registered trade mark of Digia plc and/or its subsidiari
 
 .. rubric:: What's Next?
 
-Next will be an overview of the `Particles` module in Qt Quick 2 with simple examples that will cover the most basic elements.
+Next chapter provides an overview of the `Particles` module in Qt Quick 2 with simple examples that will cover the most basic types.
diff --git a/particles_tutorial/particles.rst b/particles_tutorial/particles.rst
index 9c335b5..c7e8c76 100644
--- a/particles_tutorial/particles.rst
+++ b/particles_tutorial/particles.rst
@@ -15,28 +15,28 @@ Particles
 Overview
 --------
 
-Qt Quick 2 comes with the `Particles` module for making nice visual particle effects which can be used by many applications that require a lot of tiny moving particles such as fire simualtion, smoke, stars, music visualization etc.
+Qt Quick 2 comes with the `Particles` module for making nice visual particle effects, which can be used by many applications that require a lot of tiny moving particles such as fire simualtion, smoke, stars, music visualization, and so on.
 
-The :qt5-snapshot:`Particles <qtquick-particles2-qml-particlesystem.html>` module is based on four major components:
+The :qt5:`Particles <qtquick/qtquick-particles2-qml-particlesystem.html>` module is based on four major components:
 
 .. image:: images/particles-module.png
     :align: center
     :scale: 60%
 
-     The ``ParticleSystem`` ties all the elements together and runs the system timers. ``Painters``, ``Emitters`` and `Affectors` should all have the same `ParticleSystem` to interact with each other.
+     * The ``ParticleSystem`` ties all the elements together and runs the system timers. ``Painters``, ``Emitters`` and `Affectors` should all have the same `ParticleSystem` to interact with each other.
 
-     The :qt5-snapshot:`PariclePainter <qml-qtquick-particles2-particlepainter.html>` enables the rendering of particles that can be image items or custom shaders.
+     * The :qt5:`PariclePainter <qtquick/qml-qtquick-particles2-particlepainter.html>` enables the rendering of particles that can be image items or custom shaders.
 
-     The :qt5-snapshot:`Emitter <qml-qtquick-particles2-emitter.html>` emits the particle objects into the system from the location of the emitter itself and controls some particle properties (`lifeSpan`, `size` etc).
+     * The :qt5:`Emitter <qtquick/qml-qtquick-particles2-emitter.html>` emits the particle objects into the system from the location of the emitter itself and controls some particle properties (`lifeSpan`, `size` etc).
 
-     The :qt5-snapshot:`Affector <qml-qtquick-particles2-affector.html>` is an optional element that alters the attributes of particles after being created in order to manipulate the simulation (e.g. modifying the trajectroty, applying gravity effects etc).
+     * The :qt5:`Affector <qtquick/qml-qtquick-particles2-affector.html>` is an optional type that alters the attributes of particles after being created in order to manipulate the simulation (for example, modifying the trajectroty, applying gravity effects, and so on).
 
 Basic Setup
 -----------
 
-Let's start with a simple example that illustrates how we can use those elements together to make particle effects.
+Let's start with a simple example that illustrates how we can use those different elements together to make particle effects.
 
-The following example implements a simple rectangle with a ``ParticleSystem`` element that contains an :qt5-snapshot:`ImageParticle <qml-qtquick-particles2-imageparticle.html>` which renders particles based on an image, as well as an ``Emitter`` that creates and emits particles.
+The following example implements a simple rectangle with a ``ParticleSystem`` type that contains an :qt5:`ImageParticle <qtquick/qml-qtquick-particles2-imageparticle.html>` to render particles based on an image, and an ``Emitter`` to create and emit particles.
 
 .. code-block:: js
 
@@ -73,9 +73,9 @@ If you run the code shown above, you will see a couple of tiny particles (based
     :align: center
     :scale: 60%
 
-The particles are emitted all over the entire area of the parent because we set the emitter's anchors to fill the entire area of the root element (i.e. the rectangle).
+The particles are emitted all over the entire area of the parent because we set the emitter's anchors to fill the entire area of the root element (that is, the rectangle).
 
-To make the animation more intersting, we may want to make all particles emit from the bottom of the window and spread out with an increased :qt5-snapshot:`lifeSpan <qml-qtquick-particles2-emitter.html#lifeSpan-prop>`.
+To make the animation more intersting, we may want to make all particles emit from the bottom of the window and spread out with an increased :qt5:`lifeSpan <qtquick/qml-qtquick-particles2-emitter.html#lifeSpan-prop>`.
 
 First we set the emitter's anchors and specify where we want the particles to be emitted from.
 
@@ -87,13 +87,13 @@ First we set the emitter's anchors and specify where we want the particles to be
         anchors.horizontalCenter: parent.horizontalCenter
     }
 
-Then we set the trajectory and speed of the particles using :qt5-snapshot:`AngleDirection <qml-qtquick-particles2-angledirection.html>` QML element.
+Then we set the trajectory and speed of the particles using :qt5:`AngleDirection <qtquick/qml-qtquick-particles2-angledirection.html>` QML type.
 
 .. code-block:: js
 
     Emitter {
         ...
-        speed:  AngleDirection {
+        velocity:  AngleDirection {
             // Make particles spread out vertically from the bottom
             angle: 270
             // make the movement of the particles slighly different from
@@ -105,7 +105,7 @@ Then we set the trajectory and speed of the particles using :qt5-snapshot:`Angle
         ...
     }
 
-Since the default ``lifeSpan`` property value of the particle is set to one second, we will increase its value so that we can visualize the particles path:
+As the default ``lifeSpan`` for a particle is one second, we will increase its value so that we can visualize the particles path:
 
 .. code-block:: js
 
@@ -115,7 +115,7 @@ Since the default ``lifeSpan`` property value of the particle is set to one seco
         lifeSpan: 8000
     }
 
-We can also set the particles to emit in various sizes by using the :qt5-snapshot:`sizeVariation <qml-qtquick-particles2-emitter.html#sizeVariation-prop>` property in the ``Emitter`` component:
+We can also set the particles to emit in various sizes by using the :qt5:`sizeVariation <qtquick/qml-qtquick-particles2-emitter.html#sizeVariation-prop>` property in the ``Emitter`` component:
 
 .. code-block:: js
 
@@ -126,7 +126,7 @@ We can also set the particles to emit in various sizes by using the :qt5-snapsho
     }
 
 
-The `colorVariation <http://doc-snapshot.qt-project.org/5.0/qml-qtquick-particles2-imageparticle.html#colorVariation-prop>`_ property in the ``ImageParticle`` element enables us to apply color variation to the particles:
+The :qt5:`colorVariation <qtquick/qml-qtquick-particles2-imageparticle.html#colorVariation-prop>` property in the ``ImageParticle`` type enables us to apply color variation to the particles:
 
 .. code-block:: js
 
@@ -136,7 +136,7 @@ The `colorVariation <http://doc-snapshot.qt-project.org/5.0/qml-qtquick-particle
         colorVariation: 1.0
     }
 
-Then we can use the :qt5-snapshot:`Gravity <qml-qtquick-particles2-gravity.html>` affector to make our particles fall back down.
+Then we can use the :qt5:`Gravity <qtquick/qml-qtquick-particles2-gravity.html>` affector to make our particles fall back down.
 
 .. code-block:: js
 
@@ -159,16 +159,16 @@ If you now run the code, you will see an animation displaying particles of diffe
     :align: center
     :scale: 60%
 
-.. note:: The full code is available in the `particles_example_02.qml` file.
+.. note:: The complete code is available in the `particles_example_02.qml` file.
 
 
 
 ParticleGroups and Transitions
 ------------------------------
 
-The `Particles` module also provides a :qt5-snapshot:`ParticleGroup <qml-qtquick-particles2-particlegroup.html>` element that enables us to set timed transitions on particle groups. This could be very helpful if we want to implement animations with special behavior that require many transitions.
+The `Particles` module also provides a :qt5:`ParticleGroup <qtquick/qml-qtquick-particles2-particlegroup.html>` type that enables us to set timed transitions on particle groups. This could be very helpful if we want to implement animations with special behavior that require many transitions.
 
-To illusrate how we can use ``ParticleGroup``, let's implement a simple fireworks animation. The particles should be emitted from the bottom of the window. We'll also add some :qt5-snapshot:`TrailEmitters <qml-qtquick-particles2-trailemitter.html>` that will simulate smoke produced by flames as well as explosions in mid-air.
+To illusrate how we can use ``ParticleGroup``, let's implement a simple fireworks animation. The particles should be emitted from the bottom of the window. We'll also add some :qt5:`TrailEmitters <qtquick/qml-qtquick-particles2-trailemitter.html>` that simulates smoke produced by flames as well as explosions in mid-air.
 
 In our fireworks animation we proceed as follows:
 
@@ -178,7 +178,7 @@ In our fireworks animation we proceed as follows:
 
      Add a ``TrailEmitter`` that will simulate the smoke produced by the flame. We also specify a logical group so that we can later assign the corresponding ``ParticlePainter`` to the emitter.
 
-     Add a ``ParticleGroup`` to simulate the explosion using an ``TrailEmitter`` element.
+     Add a ``ParticleGroup`` to simulate the explosion using a ``TrailEmitter`` type.
 
      Add a ``GroupGoal`` in the main ``Emitter`` to tell where or when to apply the transition we define in the ``ParticleGroup``.
 
@@ -220,7 +220,7 @@ So first, we declare one main ``Emitter`` that emits firework particles from the
                 bottom: parent.bottom
             }
 
-            speed:  AngleDirection {
+            velocity:  AngleDirection {
                         angle: 270
                         angleVariation: 10
                         magnitude: 200
@@ -229,7 +229,7 @@ So first, we declare one main ``Emitter`` that emits firework particles from the
     }
 
 
-Then we add a ``TrailEmitter`` element to simulate the smoke produced by the firework before exploding in the air.
+Then we add a ``TrailEmitter`` type to simulate the smoke produced by the firework before exploding in the air.
 
 .. code-block:: js
 
@@ -240,12 +240,12 @@ Then we add a ``TrailEmitter`` element to simulate the smoke produced by the fir
         follow: "A"
         size: 12
         emitRatePerParticle: 50
-        speed: PointDirection {yVariation: 10; xVariation: 10}
+        velocity: PointDirection {yVariation: 10; xVariation: 10}
         acceleration: PointDirection {y:  10}
     }
 
 
-Then we add a ``ParticleGroup`` element to set a transition and simulate the explosion of particles in the air. We will be using a ``TrailEmitter`` with an ``AngleDirection`` to display the exploding effect.
+Then we add a ``ParticleGroup`` type to set a transition and simulate the explosion of particles in the air. We will be using a ``TrailEmitter`` with an ``AngleDirection`` to display the exploding effect.
 
 .. code-block:: js
 
@@ -261,12 +261,12 @@ Then we add a ``ParticleGroup`` element to set a transition and simulate the exp
             lifeSpan: 1000
             emitRatePerParticle: 80
             size: 10
-            speed: AngleDirection {angleVariation: 360; magnitude: 100}
+            velocity: AngleDirection {angleVariation: 360; magnitude: 100}
             acceleration: PointDirection {y:  20}
         }
     }
 
-In order to know exactly where to apply the transition, we add a :qt5-snapshot:`GroupGoal <qml-qtquick-particles2-groupgoal.html>` element inside the `fireWorkEmitter` that tells the emitter what the aimed state is and when/where the particles should switch to it.
+In order to know exactly where to apply the transition, we add a :qt5:`GroupGoal <qtquick/qml-qtquick-particles2-groupgoal.html>` type inside the `fireWorkEmitter` that tells the emitter what the aimed state is and when/where the particles should switch to it.
 
 .. code-block:: js
 
@@ -289,7 +289,7 @@ In order to know exactly where to apply the transition, we add a :qt5-snapshot:`
         }
     }
 
-Next, we just add the ``ImageParticle`` elements to visualize particles for each group defined above.
+Next, we just add the ``ImageParticle`` types to visualize particles for each group defined above.
 
 .. code-block:: js
 
@@ -327,4 +327,4 @@ And now if you run the code, you should have a simple animation that displays pa
 what's next?
 ------------
 
-In the next article, we introduce the ``ShaderEffect`` element used for more advanced graphic effects. Then you will implement a demo application that combines the use of `Particles` and `Shaders`.
+In the next article, we introduce the ``ShaderEffect`` type used for more advanced graphic effects. We will also implement a demo application that uses `Particles` and `Shaders`.
diff --git a/particles_tutorial/shaders.rst b/particles_tutorial/shaders.rst
index e354127..c5db6fe 100644
--- a/particles_tutorial/shaders.rst
+++ b/particles_tutorial/shaders.rst
@@ -14,9 +14,9 @@ Shader Effects
 Overview
 --------
 
-In order to perform advanced graphic effects, Qt Quick 2 enables you to add vertex and fragment shader programs and combine them with your QML local properties via the :qt5-snapshot:`ShaderEffect <qml-qtquick2-shadereffect.html>` QML element.
+In order to perform advanced graphical effects, Qt Quick 2 enables you to use vertex and fragment shader programs with your QML local properties via the :qt5:`ShaderEffect <qtquick/qml-qtquick2-shadereffect.html>` QML type.
 
-This element enables you to combine your GLSL program with your QML code to control the graphics at a much lower level with custom shaders. `ShaderEffect` enables you to implement a vertex or fragment shader program in your QML code via the :qt5-snapshot:`vertexShader <qml-qtquick2-shadereffect.html#vertexShader-prop>` and :qt5-snapshot:`fragmentShader <qml-qtquick2-shadereffect.html#fragmentShader-prop>` properties. When you specify a QML item as variant property in your `ShaderEffect`, the item is provided to your vertex or fragment shader as `Sampler2D`.
+This type enables you to combine your GLSL program with your QML code to control the graphics at a much lower level using custom shaders. `ShaderEffect` enables you to implement a vertex or fragment shader program in your QML code via the :qt5-snapshot:`vertexShader <qml-qtquick2-shadereffect.html#vertexShader-prop>` and :qt5:`fragmentShader <qtquick/qml-qtquick2-shadereffect.html#fragmentShader-prop>` properties. When you specify a QML item as variant property in your `ShaderEffect`, the item is provided to your vertex or fragment shader as `Sampler2D`.
 
 Consider the following example:
 
@@ -56,7 +56,7 @@ Consider the following example:
 
     }
 
-The `ShaderEffect` element takes the background QML item, provides it as `Sampler2D` to the fragment shader and paints the result on the screen (at the position of the `ShaderEffect` elements). In the above example, we did not specify any fragment or vertex shader. So the default shaders are used,  which apply no special effects to the rendred item.
+The `ShaderEffect` type takes the background QML item, provides it as a `Sampler2D` to the fragment shader and paints the result on the screen (at the position of the `ShaderEffect`). In the above example, we did not specify any fragment or vertex shader. So the default shaders that apply no special effects are used.
 
 .. image:: images/shader_1.png
     :scale: 60%
@@ -122,7 +122,7 @@ You can then add your vertex or fragment shader program using `fragmentVertex` o
     }
 
 
-Again the background QML item is taken as source and provided as `Sampler2D` in the fragment shader. Another very important feature that is introduced in the code above is the automatic property binding between QML and GLSL code.
+Again the background QML item is provided as `Sampler2D` in the fragment shader. Another very important feature that is introduced in the code above is the automatic property binding between QML and GLSL code.
 
 If an `uniform` variable in the vertex or fragment shader program has the same name as a property defined in the `ShaderEffect`, the value of this property is bound to the uniform.
 
@@ -132,9 +132,9 @@ In the above code snippet we are using this feature in conjunction with a `Numbe
     :scale: 60%
     :align: center
 
-For more details concerning GLSL and the use of Shaders in QML, please refer to the related links listed at the end of this tutorial.
+For more details concerning GLSL and the use of Shaders in QML, refer to the related links listed at the end of this tutorial.
 
 What's next?
 ------------
 
-Next we will be implementing a demo application that illustrates the use of the ``Particles`` module and ``ShaderEffect`` element in QML.
+Next, we will be implementing a demo application that illustrates the use of the ``Particles`` module and ``ShaderEffect`` type in QML.
diff --git a/particles_tutorial/src/particles_animations_src/particles_example_02.qml b/particles_tutorial/src/particles_animations_src/particles_example_02.qml
index 56760e5..d05cad0 100644
--- a/particles_tutorial/src/particles_animations_src/particles_example_02.qml
+++ b/particles_tutorial/src/particles_animations_src/particles_example_02.qml
@@ -58,7 +58,7 @@ Rectangle {
             anchors.bottom: parent.bottom
             anchors.horizontalCenter: parent.horizontalCenter
 
-            speed : AngleDirection { angle: 270; angleVariation: 10; magnitude: 100}
+            velocity : AngleDirection { angle: 270; angleVariation: 10; magnitude: 100}
             lifeSpan: 8000
             sizeVariation: 5
 
diff --git a/particles_tutorial/src/particles_animations_src/particles_example_03.qml b/particles_tutorial/src/particles_animations_src/particles_example_03.qml
index 053688b..d932158 100644
--- a/particles_tutorial/src/particles_animations_src/particles_example_03.qml
+++ b/particles_tutorial/src/particles_animations_src/particles_example_03.qml
@@ -85,7 +85,7 @@ Rectangle {
             bottom: parent.bottom
         }
 
-        speed:  AngleDirection {
+        velocity:  AngleDirection {
             angle: 270
             angleVariation: 10
             magnitude: 200
@@ -97,7 +97,7 @@ Rectangle {
             system: particlesSystem
             y: - root.height / 2
             width: parent.width
-            height: 10
+            height: 75
             jump: true
         }
     }
@@ -108,7 +108,7 @@ Rectangle {
         follow: "A"
         size: 12
         emitRatePerParticle: 80
-        speed: PointDirection {yVariation: 10; xVariation: 10}
+        velocity: PointDirection {yVariation: 10; xVariation: 10}
         acceleration: PointDirection {y:  10}
     }
 
@@ -124,7 +124,7 @@ Rectangle {
             lifeSpan: 1000
             emitRatePerParticle: 350
             size: 10
-            speed: AngleDirection {angleVariation: 360; magnitude: 100}
+            velocity: AngleDirection {angleVariation: 360; magnitude: 100}
             acceleration: PointDirection {y:  20}
         }
     }
diff --git a/particles_tutorial/src/particles_animations_src/particles_seasons.qml b/particles_tutorial/src/particles_animations_src/particles_seasons.qml
index 6760c69..0569854 100644
--- a/particles_tutorial/src/particles_animations_src/particles_seasons.qml
+++ b/particles_tutorial/src/particles_animations_src/particles_seasons.qml
@@ -257,7 +257,7 @@ Rectangle {
             top: parent.top
         }
 
-        speed : AngleDirection {angle: 90; angleVariation : 20; magnitude: 100}
+        velocity : AngleDirection {angle: 90; angleVariation : 20; magnitude: 100}
         size: 20
         sizeVariation: 10
     }
@@ -270,7 +270,7 @@ Rectangle {
         enabled: false
         anchors.fill: parent
         emitRatePerParticle: 80
-        speed: PointDirection {yVariation: 16; xVariation: 5}
+        velocity: PointDirection {yVariation: 16; xVariation: 5}
         acceleration: PointDirection {y: -16}
     }
 
@@ -286,7 +286,7 @@ Rectangle {
             group: "F"
             emitRatePerParticle: 80
             lifeSpan: 2000
-            speed: AngleDirection {magnitude: 64; angleVariation: 360}
+            velocity: AngleDirection {magnitude: 64; angleVariation: 360}
         }
 
     }
@@ -299,7 +299,7 @@ Rectangle {
         lifeSpan: 3000
         anchors.bottom: parent.bottom
         width: parent.width
-        speed : PointDirection {y: -120 ; xVariation: 16}
+        velocity : PointDirection {y: -120 ; xVariation: 16}
         size: 20
         GroupGoal {
             groups: ["D"]
@@ -321,7 +321,7 @@ Rectangle {
         group: "G"
         y: parent.height / 5
         emitRate: 800
-        acceleration : AngleDirection { angleVariation : 360 ; magnitude: 20}
+        velocity : AngleDirection { angleVariation : 360 ; magnitude: 20}
         size: 100
         sizeVariation: 20
 
@@ -349,7 +349,7 @@ Rectangle {
             right: parent.right
             top: parent.top
         }
-        speed : AngleDirection {angle: 90; angleVariation : 20; magnitude: 80}
+        velocity : AngleDirection {angle: 90; angleVariation : 20; magnitude: 80}
         size: 30
         sizeVariation: 20
     }
@@ -371,7 +371,7 @@ Rectangle {
         group: "C"
         anchors.bottom: parent.bottom
         anchors.left: parent.left
-        speed : AngleDirection { angle : 300; angleVariation: 30; magnitude: 100}
+        velocity : AngleDirection { angle : 300; angleVariation: 30; magnitude: 100}
         size: 50
         sizeVariation: 20
     }
@@ -384,7 +384,7 @@ Rectangle {
         group: "B"
         anchors.bottom: parent.bottom
         anchors.right: parent.right
-        speed : AngleDirection { angle : 250; angleVariation: 40; magnitude: 100}
+        velocity : AngleDirection { angle : 250; angleVariation: 40; magnitude: 100}
         size: 50
         sizeVariation: 10
     }
diff --git a/particles_tutorial/tutorial.rst b/particles_tutorial/tutorial.rst
index bf31feb..ca65251 100644
--- a/particles_tutorial/tutorial.rst
+++ b/particles_tutorial/tutorial.rst
@@ -12,22 +12,22 @@
 Demo Application
 ================
 
-In order to have a better understanding of how to use ``Particles``  and ``ShaderEffect``, we will implement an example that illustrates their use to create some animations and graphic effects.
+In order to have a better understanding of how to use ``Particles``  and ``ShaderEffect``, we will implement an example that illustrates their use to create some animations and graphical effects.
 
 In this chapter, we will implement a simple demo that consists of four background images corresponding to one of the four seasons with special animations for each season. The idea is to show you different ways and techniques of making nice animations and graphic effects using particles and shaders.
 
-Almost all animations are implemented using particle effects. We will, however, add some animations using shader effects. We will create four special animations, each having its own ``Emitter`` and ``ParticlesImage`` elements with different settings that will correspond to the four seasons of the year. The following figure presents a screenshot of the final implementation:
+Almost all animations are implemented using particle effects. However, we add some animations using shader effects. We will create four special animations, each having its own ``Emitter`` and ``ParticlesImage`` types with different settings that correspond to the four seasons of the year. The following figure presents a screenshot of the final implementation:
 
 .. image:: images/seasons4.png
     :scale: 60%
     :align: center
 
-In order to easily follow the steps of our implementation, this tutorial is split into several sections. Each section covers the ``Emitter`` and ``ParticlesImage`` elements (as well as other elements) associated with each season.
+In order to easily follow the steps of our implementation, this tutorial is split into several sections. Each section covers the ``Emitter`` and ``ParticlesImage`` types (as well as other elements) associated with each season.
 
 The Main Element
 ----------------
 
-The application consists of a ``Rectangle`` element with an ``Image`` that displays different backgrounds. Each background image corresponds to a season. For each season, we  associate special animations based on `Particles`. We additionally add an animation when switching from one season to another.
+The application consists of a ``Rectangle`` type with an ``Image`` that displays different backgrounds. Each background image corresponds to a season. For each season, we  associate special animations based on `Particles`. We additionally add an animation when switching from one season to another.
 
 Background
 ----------
@@ -43,7 +43,7 @@ The main rectangle displays an image for each season. Let's start by implemeting
 
         width: 600
         height: 600
-        // enbale keybord events
+        // enable keyboard events
         focus: true
 
         Image {
@@ -129,7 +129,7 @@ Then we define a function to switch between seasons. Each function should set th
 
     function toAutumn() {
         state = "autumn"
-        // Apply winter animation later ...
+        // Apply autumn animation later ...
 
     }
 
@@ -142,7 +142,7 @@ Then we define a function to switch between seasons. Each function should set th
 
 
 
-Once the background image has been changed, we add a ``NumberAnimation`` that modifies the image's scale and opacity. For more details concerning animations in QML, please refer to the related `API Documentation <http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeanimation.html>`_.
+Once the background image has been changed, we add a ``NumberAnimation`` that modifies the image's scale and opacity. For more details concerning animations in QML, refer to the :qt5:`NumberAnimation Documentation <qtquick/qml-qtquick2-numberanimation.html>`.
 
 To switch between the season's background, the user can simply press the ``space`` key on the keyboard:
 
@@ -177,7 +177,7 @@ In the `winter` state, we want to display some snow particles falling down from
 
     ParticleSystem { id: sysSeason  }
 
-Then we add a ``ParticleImage`` element that visualizes logical particles using an image. In our case, the image should correspond to a snow particle. We also specify the system whose particles should be visualized and a group property to specify which logical particle group will be painted. This is helpful if we want to use different emitters within the same ``ParticleSystem``:
+Then we add a ``ParticleImage`` type that visualizes logical particles using an image. In our case, the image should correspond to a snow particle. We also specify the system whose particles should be visualized and a group property to specify which logical particle group will be painted. This is helpful if we want to use different emitters within the same ``ParticleSystem``:
 
 .. code-block:: js
 
@@ -189,13 +189,13 @@ Then we add a ``ParticleImage`` element that visualizes logical particles using
     }
 
 
-To emit particles, we add an ``Emitter`` element that emits our snow particles from the top window down to the bottom using an ``AngleDirection`` with a 90° angle:
+To emit particles, we add an ``Emitter`` type that emits our snow particles from the top window down to the bottom using an ``AngleDirection`` with a 90° angle:
 
 .. code-block:: js
 
     Emitter {
         id: snowEmitter
-        // Enable the emitter since winter is the default state
+        // Enable the emitter as winter is the default state
         enabled: true
         system: sysSeason
         group: "A"
@@ -205,7 +205,7 @@ To emit particles, we add an ``Emitter`` element that emits our snow particles f
             right: parent.right
             top: parent.top
         }
-        speed: AngleDirection { angle: 90;
+        velocity: AngleDirection { angle: 90;
                                 angleVariation : 20;
                                 magnitude: 100 }
         size: 20
@@ -245,7 +245,7 @@ In the Spring season, we want to display some flower and butterfly particles fro
         groups: ["B"]
     }
 
-Since the particles should be emitted from different places, we will be using two emitters. In each ``Emitter``, we specify the logical particles group.
+As the particles should be emitted from different places, we will be using two emitters. In each ``Emitter``, we specify the logical particles group.
 
 In the butterFly ``Emitter``, we specify a group and emit the particles from the bottom right corner:
 
@@ -258,7 +258,7 @@ In the butterFly ``Emitter``, we specify a group and emit the particles from the
         lifeSpan: 5000
         group: "C"
         anchors.bottom: parent.bottom
-        speed : AngleDirection { angle : 300;
+        velocity : AngleDirection { angle : 300;
                                  angleVariation: 30;
                                  magnitude: 100 }
         size: 50
@@ -277,7 +277,7 @@ In ``flowerEmitter``, we use the same code as in ``butterFlyEmitter``, but with
         group: "B"
         anchors.bottom: parent.bottom
         anchors.right: parent.right
-        speed : AngleDirection { angle : 250;
+        velocity : AngleDirection { angle : 250;
                                  angleVariation: 40;
                                  magnitude: 100 }
         size: 50
@@ -321,7 +321,7 @@ For the sun animation, we define an ``Emitter`` that emits particles using ``Ang
         group: "G"
         y: parent.height / 4
         emitRate: 1600
-        acceleration : AngleDirection { angleVariation : 360 ;
+        velocity : AngleDirection { angleVariation : 360 ;
                                         magnitude: 80}
         size: 100
         sizeVariation: 50
@@ -377,13 +377,12 @@ We add the `ImageParticle` to paint the particle using an image.
         groups: ["G"]
     }
 
-Then we add the firework animation effect using ``Emitter``, ``TrailEmitter``, ``GroupGoal``, ``ParticlesGroup`` and ``ImageParticles`` elements as we have seen before in the ``Particles`` article.
+Then we add the firework animation effect using the ``Emitter``, ``TrailEmitter``, ``GroupGoal``, ``ParticlesGroup`` and ``ImageParticles`` types as we have seen before in the ``Particles`` article.
 
 .. code-block:: js
 
     // ImageParticle to render the firework particles
     ImageParticle {
-        id: firework
         system: sysSeason
         id: fireWorkParticle
         source: "resources/particle.png"
@@ -400,7 +399,7 @@ Then we add the firework animation effect using ``Emitter``, ``TrailEmitter``, `
         lifeSpan: 3000
         anchors.bottom: parent.bottom
         width: parent.width
-        speed : PointDirection {y: -120 ; xVariation: 16}
+        velocity : PointDirection {y: -120 ; xVariation: 16}
         size: 20
         GroupGoal {
             groups: ["D"]
@@ -421,7 +420,7 @@ Then we add the firework animation effect using ``Emitter``, ``TrailEmitter``, `
         enabled: false
         anchors.fill: parent
         emitRatePerParticle: 80
-        speed: PointDirection {yVariation: 16; xVariation: 5}
+        velocity: PointDirection {yVariation: 16; xVariation: 5}
         acceleration: PointDirection {y: -16}
     }
 
@@ -438,7 +437,7 @@ Then we add the firework animation effect using ``Emitter``, ``TrailEmitter``, `
             group: "F"
             emitRatePerParticle: 80
             lifeSpan: 2000
-            speed: AngleDirection {magnitude: 64; angleVariation: 360}
+            velocity: AngleDirection {magnitude: 64; angleVariation: 360}
         }
 
     }
@@ -483,7 +482,7 @@ In Autumn, we want to display some leaves falling down from the top of the windo
             right: parent.right
             top: parent.top
         }
-        speed : AngleDirection { angle: 90;
+        velocity : AngleDirection { angle: 90;
                                  angleVariation : 20;
                                  magnitude: 100 }
         size: 40
@@ -502,7 +501,7 @@ Then we add an `ImageParticle` to render the leaf particles using an image. The
     }
 
 
-To add some effects, we will use an `Affector` that will generate a wind effect. For this, we will be using the :qt5-snapshot:`Wander <qml-qtquick-particles2-wander.html>` affector that allows particles to randomly vary their trajectory:
+To add some effects, we will use an `Affector` that will generate a wind effect. For this, we will be using the :qt5:`Wander <qtquick/qml-qtquick-particles2-wander.html>` affector that allows particles to randomly vary their trajectory:
 
 
 .. code-block:: js
@@ -522,7 +521,6 @@ And That's it! Now we just need to disable the previous emitter and enable the `
 
         function toAutumn() {
 
-        print("toAutumn...")
         state = "autumn"
 
         summerEmitter.enabled = false
@@ -572,7 +570,7 @@ Now we want to display a hot air balloon moving up from the bottom of the window
         NumberAnimation on y {  id: ballonAnimation;
                                 running: false;
                                 from: root.height;
-                                to: - height    2;
+                                to: - height * 2;
                                 duration: 15000 }
     }
 
@@ -587,7 +585,7 @@ Now we want to display a hot air balloon moving up from the bottom of the window
         source: "resources/welcome.png";
     }
 
-To simulate the wind effect on the flag, we add a fragment shader program via the ``ShaderEffect`` element:
+To simulate the wind effect on the flag, we add a fragment shader program via the ``ShaderEffect`` type:
 
 
 .. code-block:: js
@@ -602,7 +600,7 @@ To simulate the wind effect on the flag, we add a fragment shader program via th
 
         NumberAnimation on time { loops: Animation.Infinite;
                                   from: 0;
-                                  to: Math.PI      2;
+                                  to: Math.PI * 2;
                                   duration: 600 }
 
         fragmentShader:
@@ -613,10 +611,10 @@ To simulate the wind effect on the flag, we add a fragment shader program via th
              uniform highp float time;
              uniform sampler2D source;
              varying highp vec2 qt_TexCoord0;
-             void main()
-                highp vec2 p = sin(time + frequency      qt_TexCoord0);
+             void main() {
+                highp vec2 p = sin(time + frequency * qt_TexCoord0);
                 gl_FragColor = texture2D(source, qt_TexCoord0  +
-                            amplitude      vec2(p.y, -p.x)) * qt_Opacity;
+                            amplitude * vec2(p.y, -p.x)) * qt_Opacity;
              }";
     }
 
@@ -641,13 +639,10 @@ Now if you run the code, you should be able to visualize the air balloon animati
 Summary
 -------
 
-In this tutorial, we went through the `Particles` module in Qt Quick and the use of `Shaders` to apply advanced animation effects. We also provided an example combining those technics. For more details concerning `Particles` and `Shaders` effect, please refer to official Qt Documentation.
-
-Related Links
--------------
+In this tutorial, we went through the `Particles` module in Qt Quick and the use of `Shaders` to apply advanced animation effects. We also provided an example combining those technics. For more details concerning `Particles` and `Shaders` effects, refer to these links:
 
-http://doc-snapshot.qt-project.org/5.0/qtquick-particles2-qml-particlesystem.html
+* http://qt-project.org/doc/qt-5.0/qtquick/qtquick-particles2-qml-particlesystem.html
 
-http://doc-snapshot.qt-project.org/5.0/video-qmlvideofx.html
+* http://qt-project.org/doc/qt-5.0/qtmultimedia/multimedia-video-qmlvideofx.html
 
-http://www.lighthouse3d.com/opengl/glsl/
+* http://www.lighthouse3d.com/opengl/glsl/