Tutorial 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 :)
Go to ChatGPT https://chat.openai.com/ to ask what you want to build
Prompt 1: simple
1. 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
2. Click on this icon to submit the comment
3. Read the response from ChatGPT & Copy (ctrl+c) the part on the parameters
Parameters are the variables used to build the simulation.
4. Edit the 1st message by pressing on the pencil icon.
5. 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)
6. 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"
7. The final message could look like this too:
8. Click on Save & Submit
9. 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
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
10. Click on Model
11. Click on "Click to create a page of variables"
12. A pop-up message to "Create page" will appear. Click on OK.
13. Paste "x0" into input
14. Type "0" as the given value.
Refer to ChatGPT generated message to recall the value given.
ChatGPT
15. 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:
WebEJS 1.0beta
16. Paste "v0" into input
17. Type "10" as the Initial Value
WebEJS 1.0beta
18. Paste "a" into input.
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:
19. Type "0" as the given value.
ChatGPT
20. 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:
21. Paste "t" into input
22. Type "0" as the given value.
23. 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:
24. Paste "dt" into input
25. Type "0.05"
The recommended value for the Time Step (dt) is 0.05
26. 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:
27. Type "x"
28. Type "x0" to initiate 0 as the initial value
29. Type "v"
30. Type "v0" to initiate 10 as the initial velocity
🌟 Implementing the motion
31. Click on "Evolution" tab
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.
32. Click on "Click to create a page of ODEs"
33. A pop-up message to "Create page" will appear. Click on OK.
34. Type "t" for the independent variable.
35. Type "dt" as the increment.
36. Click on the 1st option under State
A pop-up message "List of suitable variables" will appear after.
37. Type "x"
OR select "x"
38. Click on OK
39. Click on the 2nd option under State
A pop-up message "List of suitable variables" will appear after.
40. Type "v"
41. Click on OK
42. Click on the 1st option under Rate
A pop-up message "List of suitable variables" will appear after.
This step is to link velocity (v) to the displacement (x)
43. Type "v"
or select "v"
44. Click on OK
45. Click on the 2nd option under Rate
A pop-up message "List of suitable variables" will appear after.
This step links velocity (v) to the acceleration (a).
46. Select "a : (double) :"
or type "a"
47. Click on OK
48. The "Evolution" tab should look like this:
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
🌟 Crafting Plotting Panel View with HTML
49. Click on View
50. Click & Hold the following image under "Interface" Drag it to "Simulation view" on the left, following the Green markings.
51. This will appear after dragging the previous icon.
52. 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.
53. The Panel should look like this.
54. Drag the highlighted icon (Shape) to the "plottingPanel" . The Panel should look like this.
A pop-up message "Create a new element" will appear after.
55. Type "Ball"
56. Click on OK
57. Click on the Shape Icon to open up its menu for more options.
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:
58. Click on "Remove" option in the Menu
59. Click on Remove
A pop-up message will appear to confirm the removal of the Shape element.
60. Click on the Shape icon to open up its menu for its properties.
61. Click on "Properties" in the Menu.
62. Type "x"
Link the X position with the variable "x"
63. Type "1"
SizeX for this case shall be 1.
64. Type "1"
SizeY for this case shall be 1.
65. Click on Done
🌟 PREVIEW: the simulation
66. Check "on" for the Live model
67. "FULL MODEL: Simulation" will appear instead of "PREVIEW: Simulation", indicating that the Live model is on display.
68. Wait patiently as the simulation loads up.
69. Click on "Reset" button to reset the simulation
70. 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.
71. ^ may change the velocity value, v0 to "0.6" for a slower motion.
🌟 use Model - Evolution
Go to the "Model" tab under "Evolution".
72. Click on Model
73. Click on the "Events" button under "Evol Page 1"
A pop-up window will appear after.
74. Click on "Click to create a page of Events"
A pop-up window to create the page will appear after.
75. Click on OK
76. Edit the Zero Condition for Event 1
Let's start by editing the Zero Condition for Event 1
77. 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"
78. Copy element titled "canvasWidth"
use GPT's answers as EJSS variables
79. Paste "canvasWidth" into input
80. Type "2"
81. Type "canvasHeight"
82. Type "2"
Use GPT as AI coding assistant
83. Click on ChatGPT 3.5…
84. Click on ChatGPT 3.5…
85. Copy element
Designing the Simulation, -Variables - Evolution - PlottingPanel
86. Click on Evolution
87. Click on Evol Page 1
88. Click on Event 1
89. copy this inside the Zero condition if (x + radius >= canvasWidth/2 || x - radius <= -canvasWidth/2) { return 0; // Condition for Event } copy this inside the Action // Action for Event 1 vx *= -1
ignore the commented lines // as they are previous lines of codes but not needed now
90. Go to HTMLVIEW- Click on Ball image
91. Click on image
92. Type "radius*2" for both SizeX and SizeY
93. Type "radius*2" for both SizeX and SizeY
reason is SizeX and SizeY are double of the radius
94. Click on Done
95. Go back to Model to introduce your variable
96. Paste "radius" into input
97. Type "0.1"
note that the radius cannot be too big like 1 else it will never be able to meet the event on the ODE event.
98. Add the variable canvasWidth and canvasHeight to the plotingPanel's MinimumX, MaximumX etc , go to Click on View
99. Click on image
100. Click on image
101. Type "-canvasWidth/2"
102. Type "canvasWidth/2"
103. Type "-canvasHeight/2"
104. Copy input titled "canvasHeight/2"
105. Paste "canvasHeight/2" into input
106. To make the PlottingPanel length x and length y equal, Click on SquareAspect
107. Click on Main
108. Click on true
109. Click on OK
110. To make the Width and Height of the PlottingPanel bigger, Click on Width
111. Click on Main
112. Type "100%" and "90vh" respectively as shown. remember to have the quotation "" else it will cause an error remember strings need "", numbers don't need.
113. Example of Error Click on Uncaught ReferenceError: _simulation is not defined (at https://macmath.inf.um.es/static/sessions/78bfa731-67b6-47dd-a7d5-6d9c8a78e9f6/output/_preview.xhtml => line:164)
Run the simulation on a separate tab for best preview
114. After the Simulation is loaded up, it will display the conditions here.
115. Click on Run the simulation
An alternative to watch the simulation is by clicking on the "Run the simulation" icon on the top right corner
116. Simulation should run in a separate tab
117. The simulation should look like this as a result.
🌟 Exporting the file
118. Click on the icon for Simulation properties
119. Click on "Export options"
120. Check "Save the source file in XML format (readable by JavaScript EJS 6)"
121. Click on "Done" button
122. Click on the icon for "Download ZIP with the complete simulation"
A pop-up window will appear after.
123. Rename ZIP file to "MovingBall.zip"
124. Click on Download
125. After Extracting the file, click on "simulation.xhtml" to open up the simulation on your default browser.
