Example of Creating a Projectile Motion App in EJSS

Let's start the EJS console and run the JavaScript version of EJS.

Creating a model in EJSS, Start screen

At the top of the window, there are tabs: Description, Model, and HtmlView. In the Description tab, you can add a description by double-clicking the page. In the Model tab, you define variables and functions, and in HtmlView, you design the visual part of the application.

Creating a model in EJSS, model creation

In the model, we define variables, initialize them in the Initialisation section, which resets the values each time the animation restarts. The Evolution tab contains motion equations, and the Custom tab holds user-defined functions. In the Fixed Relations tab, we define equations that depend on the base ones defined in Evolution.

Variables

For projectile motion, we need to define variables for position projections, velocity, and acceleration in both X and Y directions. We also define constants like g (gravitational acceleration), time t, and the time increment dt. Smaller values of dt provide more precise results but may slow down the animation, so an optimal value like 0.05s is recommended.

Clicking the shown window opens a small dialog where you should enter the name of the new variables tab. We’ll name it "variables" and later create another tab for constants.

Creating a model in EJSS, Variables tab naming

Let’s create some essential initial variables: time t, time change dt, body position in X and Y directions (X, Y), and velocity components vx and vy.

Creating a model in EJSS, Variables

The table has four columns: variable name, initial value, data type (default is double), and dimension if it is an array.

For motion in X and Y directions, we need velocity components vx and vy. These will be calculated based on the entered initial speed v and angle of projection (angleDeg). The angle is input in degrees but needs to be converted to radians (angle) for calculations.

Let’s add another tab for constants. Right-click somewhere on the gray area next to the first tab title and select “create new page”. Name it “constants”.

Creating a new constants tab in EJSS

Add the constant G of type double and initialize it to 9.81.

Creating constants in EJSS

Now let’s save the document by clicking save and naming it KosiHitac.ejss as shown:

Saving the EJSS model, save dialog

Let’s also add another constant PI with the value 3.14.

Initialization (Model)

In this tab, we initialize all variables that should be set at the beginning of the animation. This section is triggered when restarting the animation. Choose Initialisation and create a new page named "initialization".

Convert the angle from degrees to radians (angle), and calculate the velocity components using that angle.

vx = v * Math.cos(angle);

vy = v * Math.sin(angle);

We used the Math class and its sine and cosine functions.

Also, set initial positions, which in this case is 0:

x = 0 and y = 0;

Creating the EJSS app. Initialization in the model

Evolution (Model)

Let’s create a new page in the Evolution section named “Motion”, by clicking on “Click to create page of code” at the top.

Creating the EJSS app. Evolution

Evolution (model).

Let’s create a new page in the Evolution section titled “Motion”, by clicking on the top part that says “Click to create page of code”.

Creating an application in EJSS - Evolution

In this section, we define the equations of motion that determine how the variables change over time.

For projectile motion, we define the change in velocity in the Y direction due to gravity, and the change in position in both X and Y directions.

vy = vy - G*dt;
x = x + vx*dt;
y = y + vy*dt;

With these formulas, we simulate the motion of the object in small steps of time, defined by dt.

Custom and Fixed Relations (model).

In the “Custom” tab, we can define additional functions that are needed in the simulation and are created by the user.

EJSS Custom tab - user-defined functions

In the “Fixed Relations” tab, we define equations that depend on the basic variables defined in the Evolution tab. These equations are recalculated each time the main variables change.

Animation Display (HtmlView)

To display the animation, you need to build the visual part of the application by creating graphic objects and linking them to the model variables whose values change over time.

Let’s create a view inside HtmlView.

Creating the application in EJSS – HtmlView

All objects are connected together to form the element tree, rooted at the Simulation view object shown in the “Tree of elements.” You add further graphic elements as branches by selecting an element from the palette on the right and clicking on the target node in the tree.

First, from the Interface section, add the “Single drawing panel” window. After clicking on “Simulation view” on the left, a group of elements will be inserted as shown below:

Creating the application in EJSS – drawing panel (HtmlView)

You will see three panels added by default, arranged one below the other:

LabelPanel for displaying the animation title
wrappedPanel containing the drawingPanel for the animation and the controlPanel for buttons: play, reset, pause, etc.
narrativePanel for embedding HTML text that describes the animation

Double-clicking on an object opens the Properties dialog, where you can configure that graphic element’s settings.

First, set the Title text, which is one of the “topLabel” label’s properties. Double-click this label to open the Properties dialog:

Creating the application in EJSS – title label

In the Properties panel, you’ll see some HTML code in the “Text” field by default. Replace “TopLabel” with “Projectile Motion Simulation” and close the dialog.

Next, open the Properties dialog for the drawingPanel and configure it as shown below:

Creating the application in EJSS – drawing panel properties

The Minimum and Maximum settings define the smallest and largest dimensions (in pixels) displayed on the animation page – e.g., Width (600px) and Height (600px). The SquareAspect = true property ensures the aspect ratio (height vs. width) remains constant.

Now add a body to animate, for example a circle, and bind its center’s X and Y coordinates to the model variables.

From the 2D Drawable palette, drag a 2D Shape onto the drawingPanel. Name this element “Body.”

Creating the application in EJSS – 2D drawable object

Configure the body’s X, Y, and R properties as shown:

Creating the application in EJSS – 2D drawable properties

Clicking the link-icon button next to a property opens a dialog where you can bind it to a model variable (e.g., X coordinate).

Creating the application in EJSS – binding variables in Properties dialog

Finally, add code to stop the animation when the body hits the ground (Y ≤ 0).

Insert into Evolution:

if(y<=0){
_model.pause();
}

Then add a Trace object to the drawing panel: a series of points that will draw the projectile’s path. Configure its properties as shown:

Creating the application in EJSS – 2D drawable Trace object

Bind inputX and inputY fields to the model’s X and Y variables as before.

After running the animation:

Creating the application in EJSS – model initialization