Tutorial 1 for Workshop 18-24 July: Creating a Simple Ball Simulation With ChatGPT and WebEJS

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

Parameters are the variables used to build the simulation.

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)

In this case, the variables to take note are:

x0, v0, a, dt, t, x & v

Refer to ChatGPT generated message to recall the value given.

After copying "x0", what's left are:

v0, a, dt, t, x & v.

Jump to the next major step (#31) after filling up all the required variables:

https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04

After copying "v0", what's left are:

a, dt, t, x & v.

Jump to the next major step (#31) after filling up all the required variables:

https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04

After copying "a", what's left are:

dt, t, x & v.

Jump to the next major step (#31) after filling up all the required variables:

https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04

After copying "t", what's left are:

dt, x & v.

Jump to the next major step (#31) after filling up all the required variables:

https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04

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

After copying "dt", what's left are:

x & v.

Jump to the next major step (#31) after filling up all the required variables:

https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04

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.

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

OR select "x"

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

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

This step is to link velocity (v) to the displacement (x)

or select "v"

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

This step links velocity (v) to the acceleration (a).

or type "a"

velocity, v = dx / dt

acceleration, a = dv / dt

usually 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

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

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

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:

https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-5738dcc1-b731-4fd1-ba87-8a877250e936

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

Link the X position with the variable "x"

SizeX for this case shall be 1.

SizeY for this case shall be 1.

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.

A pop-up window will appear after.

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

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

ignore the commented lines // as they are previous lines of codes but not needed now

reason is SizeX and SizeY are double of the radius

note that the radius cannot be too big like 1 else it will never be able to meet the event on the ODE event.

An alternative to watch the simulation is by clicking on the "Run the simulation" icon on the top right corner

A pop-up window will appear after.