> For the complete documentation index, see [llms.txt](https://smartui-docs.pixelperfectstudio.mx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://smartui-docs.pixelperfectstudio.mx/miscellaneous-addons/parabolic-tween/getting-started.md). # Getting Started Calculating and Drawing a Parabolic Trajectory Based on Initial Velocity In this tutorial, we will walk you through the process of calculating a **parabolic trajectory** based on an **initial velocity** and **launch angle**, and drawing this trajectory before the object is launched. We'll use **Construct 3** and the **ParabolicTween plugin** by Pixel Perfect Studio. By the end of this tutorial, you'll have a system that calculates the trajectory of an object (like a bird or projectile) based on user input, and visualizes the path before the object is actually launched. {% hint style="success" %} The **ParabolicTween** plugin is capable of the following: 1. **Calculating parabolic trajectories** **based on initial velocity and angle**. This can be combined with the Physics behavior to move the object. 2. **Calculating parabolic trajectories** **based on a 2D destination (X, Y).** This can also be combined with the Physics behavior to move the object. 3. **Moving an object along a parabolic trajectory** within a specific period of time by tweening the object. The **movement is kinematic**, meaning any physics interactions are ignored. For more details, refer to the [ACE documentation](/miscellaneous-addons/parabolic-tween.md). {% endhint %} #### Prerequisites: * [**ParabolicTween Plugin**](https://store.pixelperfectstudio.mx/product/parabolic-tween-addon-for-construct-3/): A plugin by Pixel Perfect Studio that allows you to simulate parabolic motion with customizable gravity and velocity. ## Step 1: Layout Set Up Add the following objects to your layout:

1. Add a Sprite object that will be our projectile. We are using an object called ***Bird***.

1. Add the **`Physics`** behavior to the Bird. 2. Add the **`Parabolic Tween`** behavior to the Bird.

2. Add a Sprite object called ***Path.*** We will use it to draw a point in time where the projectile will be when launched.

3. Add a Slider and name it ***Initial Velocity*** 4. Add a Slider and name it ***Launch Angle*** 5. Add a **`Text`** object, and copy it over each of our Sliders to identify them. 6. Add a **`Button`** and name it ***Throw***. When pressing it, the Bird will be thrown at the velocity and angle set in the scrollbars.

Your scene object list should look like this:

## Step 2: Configure slider's value, and the Bird physics behavior 1. Configure the Bird´s Physics 1. Disable the Bird´s physics behavior. 2. Set the immovable flag to false.

{% hint style="warning" %} The angle of gravity can be changed for the calculated parabola. Nevertheless, when using physics the angle must always be 90º, which points downwards in the canvas. For simulated trajectories or tweening, you can change the gravity angle to fit your needs. {% endhint %} 2. Configure the Sliders 1. InitialVelocity: 1. Min value: 100 2. Max Value: 500

2. LaunchAngle: 1. Value: 270 (start angle) 2. Min value: 270º (upward) 3. Max value: 360º (to the right)

## Step 3: Create a function to calculate the trajectory 1. Create a function called **`CalculateTrajectory`**. It will be called each time the value of the sliders changes, to redraw the trajectory. 2. Add the **`Bird.Set Parabola by Velocity`** action to the function as follows: 1. Use the "default" tag 2. Set the Velocity from our slider called **`InitialVelocity.Value`** 3. Set the Angle ity from our slider called **`LaunchAngle.Value`** 4. Set the gravity to 10. This value **must match our physics world gravity**

Stablishing the world gravity to match the parabola's gravity.

3. Call **`Path.destroy`** to clean up our layout from path objects. *This approach is only for educational purposes. It's recommended to implement optimized algoritms to maintain a good performance.* 4. Add a Repeat action from the system plugin. We will create 20 points in the path, each at 0.1 seconds of the predicted trajectory.

5. Create a Path object within the Repeat, and add the following parameters: 1. **Layer**: Use the **`Bird.LayerName`** 2. **X**: Read the predicted X coordinate of the parabola calculated by calling the expression **`GetXAt`** passing the "*default*" tag name, and the **`loopindex`** multiplied by 0.1 seconds. 3. Y: Read the predicted X coordinate of the parabola calculated by calling the expression **`GetYAt`** passing the "*default*" tag name, and the **`loopindex`** multiplied by 0.1 seconds.

## Step 4: Add the Interaction with the UI Each time our slider's value changes, the function CalculateTrajectory should be called, triggering the path redraw with the new values set for angle and velocity. Add the following code: 1. Add the condition **`InitialVelocity.On Changing`** 1. Call **`CalculateTrajectory`** for this event. 2. Add the condition **`LaunchAngle.On Changing`** 1. Call **`CalculateTrajectory`** for this event.

On Changing even triggers for each slider.

3. Add the button **`Throw.On Click`** condition to throw the bird. We will apply the calculated velocity to the physics behavior of the bird, to throw it following the calculated trajectory. 1. Enable the **`Bird.Physics`** behavior. 2. Call the action **`Bird.Physics.Set`** Velocity to pass the parabola's calculated velocity's vector components. 1. **X component**: Pass the **`Bird.ParabolicTween.GetVelocityX`** expression using the tag name "*default*". 2. **Y component**: Pass the **`Bird.ParabolicTween.GetVelocityY`** expression using the tag name "*default*".

Event button `Throw.On Click` calls the `Physics.Set Velocity`

## Step 5: Test your game Run the game, and play with the sliders. You should be able to change the initial velocity and angle and see the predicted trajectory path. And when pressing **Throw,** the Bird will move at the indicated velocity along the calculated trajectory.

### Source Code {% file src="/files/LZOhmKpTfeZ4lie1nG34" %}