Openai

Let's create a simple ball moving to the right as an idea for this tutorial :)

Building a simulation using ChatGPT3.5 (initial variables and scaffolds) with WebEJS (power customisation to meet designer's and users' needs).

Go to ChatGPT https://chat.openai.com/ to ask what you want to build

hint: when using GPT, it is always good to start simple and ask for more complex features later after the simple things are working properly

Custom Step Color

Type "Give me an outline of a simulation made in EJSS for a simple case of a ball moving to the right." into text area

Click on this icon to submit the comment

Parameters are the variables used to build the simulation.

Read the response from ChatGPT & Copy (ctrl+c) the part on the parameters

Edit the 1st message by pressing on the pencil icon.

Responses from ChatGPT may not always be exactly the same. There are times when words are phrased differently with the same concept. E.g., it could also be in a form of a sentence like "Define parameters such as initial position, initial velocity, acceleration, and time step." to copy (ctrl+c) and paste (ctrl+v)

Prompt 2:  Refine based on what GPT gives.
Add on to the previous message by pasting (ctrl+v) what was copied:

"Define the parameters of the simulation:
- Initial position of the ball.
- Initial velocity of the ball.
- Acceleration (if any).
- Time step for the simulation.
"

Prompt 2b add:
Further add the following into the text area:
"Allow users to input these parameters via text fields or sliders
Create a graphical representation of the ball.
Provide some JavaScript code"

The final message could look like this too:

Click on Save & Submit

In this case, the variables to take note are:x0, v0, a, dt, t, x &amp; v

Transfer results from GPT to WebEJSS. https://www.um.es/fem/wikis/runwebejs/?url=

Read the defined variables/parameters generated by ChatGPT.
Copy the element titled "x0" with 0 as the given value. 
Take note of the other variables.

WebEJS 1.0beta entry point: 
https://t.um.es/runwebejs ir
https://www.um.es/fem/wikis/runwebejs/?url=
*this entry point is designed to redirect you to one of the more than one (in the very near future) WebEJS servers that can run WebEJS for you.
Defining the variables

Click on Model

Click on "Click to create a page of variables"

A pop-up message to "Create page" will appear. 
Click on OK.

Paste "x0" into input

Refer to ChatGPT generated message to recall the value given.

Type "0" as the given value. 

After copying "x0", what's left are:v0, a, dt, t, x &amp; v.Jump to the next major step (#31) after filling up all the required variables:<a target="_blank" rel="noopener noreferrer nofollow" href="https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04">https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04</a>

Refer back to ChatGPT and copy the rest of the variables required.
Our current focus to copy over is "v0", where it is initiated with 10 as the value.

Paste "v0" into input

Type "10" as the Initial Value

After copying "v0", what's left are:a, dt, t, x &amp; v.Jump to the next major step (#31) after filling up all the required variables:<a target="_blank" rel="noopener noreferrer nofollow" href="https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04">https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04</a>

Paste "a" into input.

Type "0" as the given value.

After copying "a", what's left are:dt, t, x &amp; v.Jump to the next major step (#31) after filling up all the required variables:<a target="_blank" rel="noopener noreferrer nofollow" href="https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04">https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04</a>

Refer back to ChatGPT and copy the rest of the variables required.
Our current focus to copy over is "t", where it is initiated with 0 as the value.

Paste "t" into input

After copying "t", what's left are:dt, x &amp; v.Jump to the next major step (#31) after filling up all the required variables:<a target="_blank" rel="noopener noreferrer nofollow" href="https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04">https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04</a>

Refer back to ChatGPT and copy the rest of the variables required.
Our current focus to copy over is "dt", where it is initiated with 0.1 as the value for the Time Step.

Paste "dt" into input

The recommended value for the Time Step (dt) is 0.05

Type "0.05"

After copying "dt", what's left are:x &amp; v.Jump to the next major step (#31) after filling up all the required variables:<a target="_blank" rel="noopener noreferrer nofollow" href="https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04">https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04</a>

Refer back to ChatGPT and copy the rest of the variables required.
Our current focus to copy over is "x" & "v", where it is initiated with 0 as the value.

Type "x"

Type "x0" to initiate 0 as the initial value

Type "v"

Type "v0" to initiate 10 as the initial velocity

The "Evolution" tab implements the algorithm for the motion of the simulation.In this editor systems of Ordinary Differential Equations of first order are defined.

Click on "Evolution" tab

Click on "Click to create a page of ODEs"

A pop-up message to "Create page" will appear.
Click on OK.

Type "t" for the independent variable.

Type "dt" as the increment.

A pop-up message "List of suitable variables" will appear after.

Click on the 1st option under State

Type "x" 

Click on OK

Click on the 2nd option under State

A pop-up message "List of suitable variables" will appear after.This step is to link velocity (v) to the displacement (x)

Click on the 1st option under Rate

A pop-up message "List of suitable variables" will appear after.This step links velocity (v) to the acceleration (a).

Click on the 2nd option under Rate

Select "a : (double) :"

velocity, v = dx / dtacceleration, a = dv / dtusually this is the pedagogical math equation that students are taught in math lessons at secondary level so we will use this instead of computing style of // Update ball position x += v*dt; // or x = x + v*dt

The "Evolution" tab should look like this:

Click on View

Click & Hold the following image under "Interface"
Drag it to "Simulation view" on the left, following the Green markings.

This will appear after dragging the previous icon.

To do this, we will have to shift the "controlPanel" to inside "labelPanel", as indicated with the Red markings.

Now we want to shift the "controlPanel" (in Green) to the top of the page.

The Panel should look like this.

A pop-up message "Create a new element" will appear after.

Drag the highlighted icon (Shape) to the "plottingPanel" .
The Panel should look like this.

Type "Ball"

Sometimes WebEJS might end up creating 2 Shapes instead. Delete the extra 2nd element by clicking on the shape icon here.If this doesn't occur in your case, skip to step #60 here:<a target="_blank" rel="noopener noreferrer nofollow" href="https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-5738dcc1-b731-4fd1-ba87-8a877250e936">https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-5738dcc1-b731-4fd1-ba87-8a877250e936</a>

Click on the Shape Icon to open up its menu for more options.

Click on "Remove" option in the Menu

A pop-up message will appear to confirm the removal of the Shape element.

Click on Remove

Click on the Shape icon to open up its menu for its properties.

Click on "Properties" in the Menu.

Link the X position with the variable "x"

Type "1"

Click on Done

Check "on" for the Live model

"FULL MODEL: Simulation" will appear instead of "PREVIEW: Simulation", indicating that the Live model is on display. 

Wait patiently as the simulation loads up.

Click on "Reset" button to reset the simulation

The ball is moving to the right at a speed of (dx/dt = v = v0 = 10)^ may go to variables to change v0 = 0.6 or any other desired value to slow the speed.

The simulation should look like this as a result.

^ may change the velocity value, v0 to "0.6" for a slower motion.

Go to the "Model" tab under "Evolution".

A pop-up window will appear after.

Click on the "Events" button under "Evol Page 1"

A pop-up window to create the page will appear after.

Click on "Click to create a page of Events"

Let's start by editing the Zero Condition for Event 1

Edit the Zero Condition for Event 1

go back to GPT and ask "provide a JavaScript code in EJSS, about how to make the ball position (x,y) reflect back after hitting the boundary of the screen with velocity is vx and vy"

Copy element titled "canvasWidth"

Paste "canvasWidth" into input

Type "2"

Type "canvasHeight"

Click on ChatGPT 3.5…

Copy element

Designing the Simulation, -Variables - Evolution - PlottingPanel