lookang lawrence wee
Created Apr 11, 2024Tutorial 1 for Workshop 18-24 July: Creating a Simple Ball Simulation With ChatGPT and WebEJS
🌟
Building a simulation using ChatGPT3.5 (initial variables and scaffolds) with WebEJS (power customisation to meet designer's and users' needs).
Let's create a simple ball moving to the right as an idea for this tutorial :)
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
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
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.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."
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)
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.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.
In this case, the variables to take note are:
x0, v0, a, dt, t, x & v
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.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.
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:
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.#
WebEJS 1.0beta
#
WebEJS 1.0beta
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:
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.#
ChatGPT
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.
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:
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.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.
After copying "t", what's left are:
dt, x & v.
Jump to the next major step (#31) after filling up all the required variables:
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.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.
After copying "dt", what's left are:
x & v.
Jump to the next major step (#31) after filling up all the required variables:
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.🌟
Implementing the motion
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.
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.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
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.🌟
Crafting Plotting Panel View with HTML
Now we want to shift the "controlPanel" (in Green) to the top of the page.
To do this, we will have to shift the "controlPanel" to inside "labelPanel", as indicated with the Red markings.
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.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:
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.🌟
PREVIEW: the simulation
The simulation should look like this as a result.
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.
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.^ may change the velocity value, v0 to "0.6" for a slower motion.
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.🌟
use Model - Evolution
Go to the "Model" tab under "Evolution".
copy this inside the Zero conditionif (x + radius >= canvasWidth/2 || x - radius <= -canvasWidth/2) { return 0; // Condition for Event }copy this inside the Action// Action for Event 1vx *= -1
ignore the commented lines // as they are previous lines of codes but not needed now
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.The simulation should look like this as a result.
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.Congratulation! You have successfully crafted a simulation :) Feel free to explore more features of WebEJS before proceeding to export the simulation file.
🌟
Exporting the file
After Extracting the file, click on "simulation.xhtml" to open up the simulation on your default browser.
This image is temporarily unavailable
Our servers may be down. Try waiting a few minutes before refreshing the page.Click on this link to cross-reference your work with tutorial simulation!
Congratulation! You have come to the end of the tutorial :)
Hope you enjoyed the process 😄 Do play around with WebEJS at your own time to discover more features it has.