Using WebEJS to Create and Run Simulations for Moving Ball
llw

lookang lawrence wee

Created Feb 08, 2024

Using WebEJS to Create and Run Simulations for Moving Ball

45
    m

macmath.inf.um.es

15 Steps
1

Click on Click to start WebEJS

Click on Click to start WebEJS
2

Click on Model

Click on Model
3

Click on Evolution

Click on Evolution
4

Click on Click to create a page of ODEs

Click on Click to create a page of ODEs
5

Drag highlighted input

Drag highlighted input
6

Click on OK

Click on OK
7

Type "t" to introduce a variable called t for time

Type "t" to introduce a variable called t for time
8

Type "dt" to introduce a variable called delta time

Type "dt" to introduce a variable called delta time
9

Click on Variables, to start declaring them

Click on Variables, to start declaring them
10

Click on Click to create a page of variables

Click on Click to create a page of variables
11

Click on OK

Click on OK
12

Type "t"

Type "t"
13

Type "0"

Type "0"
14

Type "dt"

Type "dt"
15

Type "0.05"

Type "0.05"
    m

To continue the same idea, declare position x

5 Steps
16

Type "x"

Type "x"
17

Type "0" to set the initial value to zero

Type "0" to set the initial value to zero
18

Type "y" for position in y direction

Type "y" for position in y direction
19

Type "0", again is to set initial value to zero

Type "0", again is to set initial value to zero
20

Click on Evolution, to add ability to move variable x and y

Click on Evolution, to add ability to move variable x and y
    m

In the Evolution page, click on d/dt

26 Steps
21

Click on Evol Page 1

Click on Evol Page 1
22

Click on x : (double) : or alternatively type in x in the Value field

Click on x : (double) : or alternatively type in x in the Value field
23

Click on Value

Click on Value
24

Click on OK

Click on OK
25

Click on Evol Page 1, at the d/dt to try to insert the variable y

Click on Evol Page 1, at the d/dt to try to insert the variable y
26

Click on y : (double) : or alternatively type in y on the Value field

Click on y : (double) : or alternatively type in y on the Value field
27

Click on Value

Click on Value
28

Click on OK

Click on OK
29

Click on Evol Page 1, on the right of the = sign to try to add the Rate value for dx/dt

Click on Evol Page 1, on the right of the = sign to try to add the Rate value for dx/dt
30

Type "vx"

Type "vx"
31

Click on OK

Click on OK
32

Click on Evol Page 1

Click on Evol Page 1
33

Type "vy"

Type "vy"
34

Click on OK

Click on OK
35

Click on Variables

Click on Variables
36

Type "vx"

Type "vx"
37

Type "1"

Type "1"
38

Type "vy"

Type "vy"
39

Type "0"

Type "0"
40

Click on Play/Pause

Click on Play/Pause
41

Click on Reset

Click on Reset
42

Click on Play/Pause

Click on Play/Pause
43

Click on Evolution

Click on Evolution
44

Uncheck Autoplay

Uncheck Autoplay
45

Click on Reset

Click on Reset
46

Click on Play/Pause

Click on Play/Pause
    m

WebEJS 1.0beta

1 Step
47

Click on Run the simulation

Click on Run the simulation
    m

Web EJS launches it own preview on a new tab such as macmath.inf.um.es/static/sessions/da387ee8-b2d2-4639-86c3-8ec4ca0ab275/output/_preview.xhtml

2 Steps
48

Click on Play/Pause

Click on Play/Pause
49

Click on Reset

Click on Reset
    m

WebEJS 1.0beta

19 Steps
50

Click on View

Click on View
51

Click on narrativePanel

Click on narrativePanel
52

Click on image

Click on image
53

Click on controlPanel…

Click on controlPanel…
54

Click on image

Click on image
55

Click on IO

Click on IO
56

Click on image

Click on image
57

Click on controlPanel

Click on controlPanel
58

Drag highlighted image

Drag highlighted image
59

Click on OK

Click on OK
60

Click on controlPanel

Click on controlPanel
61

Click on slider

Click on slider
62

Type "vx"

Type "vx"
63

Type "-1"

Type "-1"
64

Type "1"

Type "1"
65

Type "0.5"

Type "0.5"
66

Type "slider for velocity in x direction"

Type "slider for velocity in x direction"
67

Click on Done

Click on Done
68

Click on Run the simulation

Click on Run the simulation
    m

macmath.inf.um.es/static/sessions/da387ee8-b2d2-4639-86c3-8ec4ca0ab275/output/_preview.xhtml

2 Steps
69

To debug the error, go to developer mode (click the top right corner, 3 dots and choose'More Tools' and "Developer Tools"

To debug the error, go to developer mode (click the top right corner, 3 dots and choose'More Tools' and "Developer Tools"
70

inspect the error message and look for clue why it doesn't display correctly. The hint is sometimes unclear, so it is important to add small chunks of edits slowly and check regularly.the error is caused bythe tooltip is missing the quotations "" for the strings

inspect the error message and look for clue why it doesn't display correctly. The hint is sometimes unclear, so it is important to add small chunks of edits slowly and check regularly. the error is caused by the tooltip is missing the quotations "" for the strings
    m

WebEJS 1.0beta

8 Steps
71

Type ""slider for velocity in x direction""

Type ""slider for velocity in x direction""
72

Click on Done

Click on Done
73

Click on Play/Pause

Click on Play/Pause
74

Click on Reset

Click on Reset
75

Type "-1"

Type "-1"
76

Click on Play/Pause

Click on Play/Pause
77

Click on Buttons

Click on Buttons
78

Drag highlighted image

Drag highlighted image
    m

WebEJS 1.0beta

56 Steps
79

Drag highlighted image

Drag highlighted image
80

Click on OK

Click on OK
81

Click on firstRowPanel

Click on firstRowPanel
82

Drag highlighted element

Drag highlighted element
83

Click on image

Click on image
84

Click on slider

Click on slider
85

Click on image

Click on image
86

Click on Close

Click on Close
87

Click on firstRowPanel…

Click on firstRowPanel…
88

Click on controlPanel

Click on controlPanel
89

Click on image

Click on image
90

Click on label

Click on label
91

Click on image

Click on image
92

Click on label

Click on label
93

Click on Text

Click on Text
94

Click on Main

Click on Main
95

Type ""vx = ""

Type ""vx = ""
96

Click on Done

Click on Done
97

Click on firstRowPanel

Click on firstRowPanel
98

Click on image

Click on image
99

Click on label

Click on label
100

Click on image

Click on image
101

Click on slider

Click on slider
102

Click on image

Click on image
103

Drag highlighted input

Drag highlighted input
104

Click on plottingPanel…

Click on plottingPanel…
105

Click on image

Click on image
106

Click on MinimumX

Click on MinimumX
107

Type "100%"

Type "100%"
108

Type "80vh"

Type "80vh"
109

Click on Done

Click on Done
110

Click on plottingPanel…

Click on plottingPanel…
111

Type ""100%""

Type ""100%""
112

Type ""80vh""

Type ""80vh""
113

Click on Done

Click on Done
114

Click on  …

Click on  …
115

Click on controlPanel

Click on controlPanel
116

Type ""100%""

Type ""100%""
117

Click on Done

Click on Done
118

Click on  …

Click on  …
119

Click on controlPanel

Click on controlPanel
120

Type "{"display":"inline-block"}"

Type "{"display":"inline-block"}"
121

Click on Done

Click on Done
122

Click on firstRowPanel

Click on firstRowPanel
123

Type ""inline-block""

Type ""inline-block""
124

Click on Done

Click on Done
125

Click on firstRowPanel

Click on firstRowPanel
126

Click on executionPanel

Click on executionPanel
127

Click on runPauseButton

Click on runPauseButton
128

Type ""Play""

Type ""Play""
129

Type ""Pause""

Type ""Pause""
130

Click on Done

Click on Done
131

Click on Play

Click on Play
132

Click on resetButton

Click on resetButton
133

Type ""Reset""

Type ""Reset""
134

Click on Done

Click on Done
    m

WebEJS 1.0beta

63 Steps
135

Click on Model

Click on Model
136

Click on Evol Page 1

Click on Evol Page 1
137

Click on Click to create a page of Events

Click on Click to create a page of Events
138

Click on Page name

Click on Page name
139

Click on Create page…

Click on Create page…
140

Type "hit right border"

Type "hit right border"
141

Click on OK

Click on OK
142

Click on hit right border

Click on hit right border
143

Type "return x -xmax1.0; // Condition for hit right border"

Type "return x -xmax1.0; // Condition for hit right border "
144

Click on hit right border

Click on hit right border
145

Type "vx = -vx"

Type "vx = -vx "
146

Click on Done

Click on Done
147

Click on Variables

Click on Variables
148

Type "xmin"

Type "xmin"
149

Type "-1"

Type "-1"
150

Type "xmax"

Type "xmax"
151

Type "1"

Type "1"
152

Type "ymin"

Type "ymin"
153

Type "-1"

Type "-1"
154

Type "ymax"

Type "ymax"
155

Type "1"

Type "1"
156

Click on Initialization

Click on Initialization
157

Click on Evolution

Click on Evolution
158

Click on Play

Click on Play
159

Click on Reset

Click on Reset
160

Click on Variables

Click on Variables
161

Click on vx

Click on vx
162

Type "dx"

Type "dx"
163

Type "0.3"

Type "0.3"
164

Type "dy"

Type "dy"
165

Type "0.3"

Type "0.3"
166

Click on View

Click on View
167

Click on shape2D

Click on shape2D
168

Click on Main

Click on Main
169

Click on SizeX

Click on SizeX
170

Click on Main

Click on Main
171

Type "dx"

Type "dx"
172

Click on SizeY

Click on SizeY
173

Click on Main

Click on Main
174

Type "dy"

Type "dy"
175

Click on Done

Click on Done
176

Click on Play

Click on Play
177

Click on Reset

Click on Reset
178

Click on Model

Click on Model
179

Click on Evolution

Click on Evolution
180

Click on Evol Page 1

Click on Evol Page 1
181

Click on hit right border

Click on hit right border
182

Type "return (x+dx) -xmax; // Condition for hit right border"

Type "return (x+dx) -xmax; // Condition for hit right border "
183

Click on Done

Click on Done
184

Click on Play

Click on Play
185

Click on Reset

Click on Reset
186

Click on Evol Page 1

Click on Evol Page 1
187

Click on hit right border

Click on hit right border
188

Type "return (x+dx/2) -xmax; // Condition for hit right border"

Type "return (x+dx/2) -xmax; // Condition for hit right border "
189

Click on Done

Click on Done
190

Click on Play

Click on Play
191

Click on Reset

Click on Reset
192

Click on Evol Page 1

Click on Evol Page 1
193

Click on hit right border

Click on hit right border
194

Type "_pause()"

Type "_pause() "
195

Click on Done

Click on Done
196

Click on Play

Click on Play
197

Click on Run the simulation

Click on Run the simulation
    m

macmath.inf.um.es/static/sessions/da387ee8-b2d2-4639-86c3-8ec4ca0ab275/output/_preview.xhtml

2 Steps
198

Click on Play

Click on Play
199

Click on Reset

Click on Reset
    m

WebEJS 1.0beta

10 Steps
200

Click on Evol Page 1

Click on Evol Page 1
201

Drag highlighted element

Drag highlighted element
202

Cut text area titled "_pause()"

Cut text area titled "_pause()"
203

Click on hit right border

Click on hit right border
204

Type "vx = -vx"

Type "vx = -vx "
205

Click on Done

Click on Done
206

Click on Reset

Click on Reset
207

Click on Play

Click on Play
208

Click on Reset

Click on Reset
209

Click on Run the simulation

Click on Run the simulation
    m

macmath.inf.um.es/static/sessions/da387ee8-b2d2-4639-86c3-8ec4ca0ab275/output/_preview.xhtml

1 Step
210

Click on Play

Click on Play
    m

WebEJS 1.0beta

2 Steps
211

Click on Run the simulation

Click on Run the simulation
212

Click on Play

Click on Play
Well done!
Create how-to guides like this in a snap. Get Tango now.