Pages

Monday, April 29, 2024

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

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

Creation Date: Apr 11, 2024
Created By: lookang lawrence wee and coco

🌟 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 :)

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

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

2. Click on this icon to submit the comment

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.

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

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

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)

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.
"

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"

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:

The final message could look like this too:

8. Click on Save & Submit

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

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.

10. Click on Model

Click on Model

11. Click on "Click to create a page of variables"

Click on "Click to create a page of variables"

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

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

13. Paste "x0" into input

Paste "x0" into input

14. Type "0" as the given value.

Refer to ChatGPT generated message to recall the value given.

Type "0" as the given value.

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:

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

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.

# WebEJS 1.0beta

16. Paste "v0" into input

Paste "v0" into input

17. Type "10" as the Initial Value

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:

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

Paste "a" into input.

19. Type "0" as the given value.

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:

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

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.

21. Paste "t" into input

Paste "t" into input

22. Type "0" as the given value.

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:

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

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.

24. Paste "dt" into input

Paste "dt" into input

25. Type "0.05"

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

Type "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:

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

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.

27. Type "x"

Type "x"

28. Type "x0" to initiate 0 as the initial value

Type "x0" to initiate 0 as the initial value

29. Type "v"

Type "v"

30. Type "v0" to initiate 10 as the initial velocity

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.

Click on "Evolution" tab

32. Click on "Click to create a page of ODEs"

Click on "Click to create a page of ODEs"

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

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

34. Type "t" for the independent variable.

Type "t" for the independent variable.

35. Type "dt" as the increment.

Type "dt" as the increment.

36. Click on the 1st option under State

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

Click on the 1st option under State

37. Type "x"

OR select "x"

Type "x"

38. Click on OK

Click on OK

39. Click on the 2nd option under State

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

Click on the 2nd option under State

40. Type "v"

Type "v"

41. Click on OK

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)

Click on the 1st option under Rate

43. Type "v"

or select "v"

Type "v"

44. Click on OK

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).

Click on the 2nd option under Rate

46. Select "a : (double) :"

or type "a"

Select "a : (double) :"

47. Click on OK

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

The "Evolution" tab should look like this:

🌟 Crafting Plotting Panel View with HTML

49. Click on View

Click on View

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

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.

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.

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

53. The Panel should look like this.

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.

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

55. Type "Ball"

Type "Ball"

56. Click on OK

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:

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

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

58. Click on "Remove" option in the Menu

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.

Click on Remove

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

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

61. Click on "Properties" in the Menu.

Click on "Properties" in the Menu.

62. Type "x"

Link the X position with the variable "x"

Type "x"

63. Type "1"

SizeX for this case shall be 1.

Type "1"

64. Type "1"

SizeY for this case shall be 1.

Type "1"

65. Click on Done

Click on Done

🌟 PREVIEW: the simulation

66. Check "on" for the Live model

Check "on" for the Live model

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

"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.

Wait patiently as the simulation loads up.

69. Click on "Reset" button to reset the simulation

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.

The simulation should look like this as a result.

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

^ 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

Click on Model

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

A pop-up window will appear after.

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

74. Click on "Click to create a page of Events"

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

Click on "Click to create a page of Events"

75. Click on OK

Click on OK

76. Edit the Zero Condition for Event 1

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

Edit 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"

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"

Copy element titled "canvasWidth"

79. Paste "canvasWidth" into input

Paste "canvasWidth" into input

80. Type "2"

Type "2"

81. Type "canvasHeight"

Type "canvasHeight"

82. Type "2"

Type "2"

83. Click on ChatGPT 3.5…

Click on ChatGPT 3.5…

84. Click on ChatGPT 3.5…

Click on ChatGPT 3.5…

85. Copy element

Copy element

86. Click on Evolution

Click on  Evolution

87. Click on Evol Page 1

Click on Evol Page 1

88. Click on Event 1

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

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

90. Go to HTMLVIEW- Click on Ball image

Go to HTMLVIEW- Click on Ball image

91. Click on image

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

Type "radius*2" for both SizeX and SizeY

94. Click on Done

Click on Done

95. Go back to Model to introduce your variable

Go back to Model to introduce your variable

96. Paste "radius" into input

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.

Type "0.1"

98. Add the variable canvasWidth and canvasHeight to the plotingPanel's MinimumX, MaximumX etc , go to Click on View

Add the variable canvasWidth and canvasHeight to the plotingPanel's MinimumX, MaximumX etc , go to Click on View

99. Click on image

Click on image

100. Click on image

Click on image

101. Type "-canvasWidth/2"

Type "-canvasWidth/2"

102. Type "canvasWidth/2"

Type "canvasWidth/2"

103. Type "-canvasHeight/2"

Type "-canvasHeight/2"

104. Copy input titled "canvasHeight/2"

Copy input titled "canvasHeight/2"

105. Paste "canvasHeight/2" into input

Paste "canvasHeight/2" into input

106. To make the PlottingPanel length x and length y equal, Click on SquareAspect

To make the PlottingPanel length x and length y equal, Click on SquareAspect

107. Click on Main

Click on Main

108. Click on true

Click on true

109. Click on OK

Click on OK

110. To make the Width and Height of the PlottingPanel bigger, Click on Width

To make the Width and Height of the PlottingPanel bigger, Click on Width

111. Click on Main

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.

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)

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)

114. After the Simulation is loaded up, it will display the conditions here.

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

Click on Run the simulation

116. Simulation should run in a separate tab

Simulation should run in a separate tab

117. The simulation should look like this as a result.

The simulation should look like this as a result.

✅ 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

118. Click on the icon for Simulation properties

Click on the icon for Simulation properties

119. Click on "Export options"

Click on "Export options"

120. Check "Save the source file in XML format (readable by JavaScript EJS 6)"

Check "Save the source file in XML format (readable by JavaScript EJS 6)"

121. Click on "Done" button

Click on "Done" button

122. Click on the icon for "Download ZIP with the complete simulation"

A pop-up window will appear after.

Click on the icon for "Download ZIP with the complete simulation"

123. Rename ZIP file to "MovingBall.zip"

Rename ZIP file to "MovingBall.zip"

124. Click on Download

Click on Download

125. After Extracting the file, click on "simulation.xhtml" to open up the simulation on your default browser.

After Extracting the file, click on "simulation.xhtml" to open up the simulation on your default browser.

ℹ️ Click on this link to cross-reference your work with tutorial simulation!https://www.um.es/fem/wikis/runwebejs/?url=https://iwant2study.org/lookangejss/00workshop/2024PacoFelix/ejss_model_tutorial1.zip


✅ 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.



Created with Tango.us

No comments:

Post a Comment