{source}
<?php 
require_once JPATH_SITE.'/TTcustom/TT_contentparser.php';$parameters = array("topicname" => "00workshop/2024PacoFelix", "modelname" => "ejss_model_tutorial1");echo generateSimHTML($parameters, "EJSS");
?>
{/source}
{source}<h1><a href="https://app.tango.us/app/workflow/6c7eebac-c16f-42ef-9184-3d5721823284?utm_source=magicCopy&utm_medium=magicCopy&utm_campaign=workflow%20export%20links" target='_blank'>Tutorial 1 for Workshop 18-24 July:
Creating a Simple Ball Simulation With ChatGPT and WebEJS</a></h1>
<div><b>Creation Date:</b> Apr 11, 2024</div>
<div><b>Created By:</b> lookang lawrence wee</div>
<div><a href="https://app.tango.us/app/workflow/6c7eebac-c16f-42ef-9184-3d5721823284?utm_source=magicCopy&utm_medium=magicCopy&utm_campaign=workflow%20export%20links" target='_blank'>View most recent version on Tango.us</a></div>
<div style="height: 24px">​</div>
<hr />
<div style="height: 24px">​</div>
<div><h2>🌟 Building a simulation using ChatGPT3.5 (initial variables and scaffolds) with WebEJS (power customisation to meet designer's and users' needs).</h2><p>Let's create a simple ball moving to the right as an idea for this tutorial :)</p>
</div>
<div><h2><a href="https://chat.openai.com/c/5661db71-dd0b-49a5-b017-d22b6c447d4e"># Go to ChatGPT https://chat.openai.com/ to ask what you want to build</a></h2><p>Prompt 1: simple</p>
</div>
<div><h3>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</h3>
<p>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</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/99ccf76a-e1a3-44ab-8ef0-2ca0fb6799c6/31eddd31-cd3e-4754-8e85-a86194ac61e2.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.6093&fp-y=0.8959&fp-z=1.4532&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=81&mark-y=565&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDM3Jmg9MTExJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="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" />
</div>
<div><h3>2. Click on this icon to submit the comment</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/f65e6462-2f01-43df-9768-14c8b5b956de/095a9c67-7c18-4c83-8ecf-7563a51abf9b.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.8809&fp-y=0.9148&fp-z=4.0000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=547&mark-y=401&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xNjEmaD0xNjEmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on this icon to submit the comment" />
</div>
<div><h3>3. Read the response from ChatGPT & Copy (ctrl+c) the part on the parameters</h3>
<p>Parameters are the variables used to build the simulation.</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/f5a0ad28-2f90-440d-a1be-02dbd3fdb13c/86362d6d-2b25-40f3-8f19-4e4271282479.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.6363&fp-y=0.3918&fp-z=1.6161&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=105&mark-y=240&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz05ODkmaD0yNTEmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Read the response from ChatGPT & Copy (ctrl+c) the part on the parameters" />
</div>
<div><h3>4. Edit the 1st message by pressing on the pencil icon.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/4c13eacc-4566-45b9-a8ca-0a1dd155b96f/e032955d-c67b-43a8-9a18-1a64ca3e5637.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.3732&fp-y=0.2307&fp-z=2.8614&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=548&mark-y=314&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDMmaD0xMDMmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Edit the 1st message by pressing on the pencil icon." />
</div>
<div><h3>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.
"</h3>
<p>Responses from ChatGPT may not always be exactly the same. There are times when words are phrased differently with the same concept. </p><p>E.g., it could also be in a form of a sentence like "<em>Define parameters such as initial position, initial velocity, acceleration, and time step.</em>" to copy (<em>ctrl+c</em>) and paste (<em>ctrl+v</em>)</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/3d2ea5b7-4b25-49fd-a03b-14faface0404/a4664be2-24ff-484e-9cfe-84cb02b4a2a7.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.6177&fp-y=0.3211&fp-z=1.5460&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=109&mark-y=252&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz05ODImaD0yMjEmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="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.
"" />
</div>
<div><h3>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"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/95853bd9-c3ff-43a5-9a81-1a8d26d4c7da/0f8b4d0a-dc0c-4a0c-953c-9f4e8769e45c.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=420&mark-y=300&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz02MTYmaD0xMDUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="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"" />
</div>
<div><h3>7. The final message could look like this too:</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/2c719bef-62db-4f11-af2b-3c3d3ecf8e62/fbc8bbd2-d576-40f4-8e4e-dfac78c19fd6.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=136&mark-y=179&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz05ODImaD00MzImZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="The final message could look like this too:" />
</div>
<div><h3>8. Click on Save & Submit</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/5bb35c5e-1bae-4696-a8dc-a88ad737a5f9/a00a80b2-63b3-4cc3-b1e5-f23cd04e69d5.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5932&fp-y=0.5892&fp-z=2.4473&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=441&mark-y=306&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMTkmaD0xMTkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on Save & Submit" />
</div>
<div><h3>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.</h3>
<p>In this case, the variables to take note are:</p><p><em>x0, v0, a, dt, t, x</em> & <em>v</em></p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/9776739e-0dc0-4966-8384-200d494df1e2/fd2e7d12-edd8-4dc3-9e47-ee773a92e1d2.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.6413&fp-y=0.4885&fp-z=1.3283&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=215&mark-y=135&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz04MjYmaD00ODQmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="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." />
</div>
<div><h2><a href="https://macmath.inf.um.es/editor?id=de3ea1ce-f5e4-43de-af9b-c456d20256a7"># 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</a></h2></div>
<div><h3>10. Click on Model</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/6c99da4e-058d-4463-9dc1-1d3129e991d2/d43d3f71-ec5f-46f4-8f01-5202ce482be6.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2269&fp-y=0.0328&fp-z=2.7354&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=492&mark-y=11&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMTUmaD0xMTQmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on Model" />
</div>
<div><h3>11. Click on "Click to create a page of variables"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/ed075e05-29c4-4c96-b2b5-a996c9432547/fa4a9196-5d91-4d7c-965a-3c9776381211.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2567&fp-y=0.4406&fp-z=1.1430&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=4&mark-y=105&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02OTUmaD01NDQmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on "Click to create a page of variables"" />
</div>
<div><h3>12. A pop-up message to "Create page" will appear.
Click on OK.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/2ccea95f-d9f3-4678-a485-3381ff15b857/02a2a3c0-a304-41e7-8492-cf31c34e5f85.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5676&fp-y=0.5353&fp-z=1.7757&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=771&mark-y=442&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz05OSZoPTgxJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="A pop-up message to "Create page" will appear.
Click on OK." />
</div>
<div><h3>13. Paste "x0" into input</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/92c53bf1-0009-4fd4-a5f8-33e6c388adfe/fb558f95-eff2-46b0-a85b-052ca6d28065.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2070&fp-y=0.2073&fp-z=2.4156&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=57&mark-y=387&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Paste "x0" into input" />
</div>
<div><h3>14. Type "0" as the given value. </h3>
<p>Refer to ChatGPT generated message to recall the value given.</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/c20ba69c-95c0-486b-9239-48824c234a8b/4fb91a9a-e984-4abb-9883-e9d26deb3bd3.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2071&fp-y=0.2074&fp-z=2.4166&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=387&mark-y=387&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "0" as the given value. " />
</div>
<div><h2><a href="https://chat.openai.com/c/9e4bc768-432d-41dc-ba1f-7108dc629358"># ChatGPT</a></h2></div>
<div><h3>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.</h3>
<p>After copying "<em>x0"</em>, what's left are:</p><p><em>v0, a, dt, t, x </em>& <em>v</em>.</p><p></p><p>Jump to the next major step <em>(#31)</em> after filling up all the required variables:</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04">https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04</a></p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/d9b32568-d4d6-4202-8c32-91a343e98e95/756e1f58-ff40-4ff1-a163-ee0d43cbb18d.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5590&fp-y=0.3358&fp-z=1.6328&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=264&mark-y=343&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02NzImaD02OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="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." />
</div>
<div><h2># WebEJS 1.0beta</h2></div>
<div><h3>16. Paste "v0" into input</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/705bd502-b603-434a-a7b8-a4057b5e24b2/4277eefa-c518-4ce4-81ac-8bf53a3c6738.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2071&fp-y=0.2748&fp-z=2.4166&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=56&mark-y=348&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Paste "v0" into input" />
</div>
<div><h3>17. Type "10" as the Initial Value</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/e94d3d77-2fea-4a8c-b584-20d10d9677bc/7d535e28-68a6-4a2a-b07c-879a14709f68.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2071&fp-y=0.2074&fp-z=2.4166&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=387&mark-y=471&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "10" as the Initial Value" />
</div>
<div><h2># WebEJS 1.0beta</h2></div>
<div><h3>18. Paste "a" into input.</h3>
<p>After copying "v0", what's left are:</p><p><em>a, dt, t, x </em>& <em>v</em>.</p><p></p><p>Jump to the next major step <em>(#31)</em> after filling up all the required variables:</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04">https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04</a></p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/f5dcd571-0a24-4681-8c07-08e3b7608624/a70fc621-d49d-4397-80f1-51ef428b42e0.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2071&fp-y=0.3181&fp-z=2.4166&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=56&mark-y=351&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Paste "a" into input." />
</div>
<div><h3>19. Type "0" as the given value.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/73e89293-5d40-45ad-ab58-58ae8d3e2ae2/e7b98072-c69b-4f55-a233-defe4487310b.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2071&fp-y=0.3267&fp-z=2.4166&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=387&mark-y=335&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "0" as the given value." />
</div>
<div><h2># ChatGPT</h2></div>
<div><h3>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.</h3>
<p>After copying "a", what's left are:</p><p><em>dt, t, x </em>& <em>v</em>.</p><p></p><p>Jump to the next major step <em>(#31)</em> after filling up all the required variables:</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04">https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04</a></p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/59b1609a-cdc8-4d10-818b-40a8501e7747/0772fe06-e28b-473d-88de-1976d80524fc.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5380&fp-y=0.5089&fp-z=1.6749&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=301&mark-y=323&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01OTcmaD0xMDgmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="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." />
</div>
<div><h3>21. Paste "t" into input</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/5709b9c5-b694-460d-8b6f-fd58ac9a2d32/68def647-5a65-417b-b968-41775c51d535.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2071&fp-y=0.3594&fp-z=2.4166&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=56&mark-y=359&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Paste "t" into input" />
</div>
<div><h3>22. Type "0" as the given value.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/f2d7cced-a419-4540-8142-e51ce0660f0e/767c3b72-5634-43aa-8049-5ceeb9885802.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2071&fp-y=0.3306&fp-z=2.4166&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=387&mark-y=411&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "0" as the given value." />
</div>
<div><h3>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.</h3>
<p>After copying "t", what's left are:</p><p><em>dt, x </em>& <em>v</em>.</p><p></p><p>Jump to the next major step <em>(#31)</em> after filling up all the required variables:</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04">https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04</a></p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/e0055cd2-0c79-4d0b-aed1-4fb39320591b/374dae9c-0c35-41f4-8d41-1a7f84283d2c.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=474&mark-y=6&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz03MjAmaD01NjkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="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." />
</div>
<div><h3>24. Paste "dt" into input</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/1f73d9e6-f74f-4023-a400-c300c369c0d3/abf36a7c-086f-47da-bb1c-6712606c29ad.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2071&fp-y=0.3883&fp-z=2.4166&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=56&mark-y=390&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Paste "dt" into input" />
</div>
<div><h3>25. Type "0.05"</h3>
<p>The recommended value for the Time Step (dt) is 0.05</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/8c386d72-c20c-4d22-a84b-14e6db135893/541342da-491a-4a24-acc8-1ca88e3e067c.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2071&fp-y=0.2911&fp-z=2.4166&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=387&mark-y=567&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "0.05"" />
</div>
<div><h3>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.</h3>
<p>After copying "dt", what's left are:</p><p><em>x </em>& <em>v</em>.</p><p></p><p>Jump to the next major step <em>(#31)</em> after filling up all the required variables:</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04">https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-ebefeb30-01e2-420d-ba57-cef672cd8e04</a></p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/3c6ce1af-1bb2-4806-9c9a-ade460cb684e/f9ec71e3-6458-43bc-9c96-43fbd009645e.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.6116&fp-y=0.5263&fp-z=1.6754&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=225&mark-y=492&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNDAmaD0xMjUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="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." />
</div>
<div><h3>27. Type "x"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/b2d5d96e-bf02-4653-9273-3321c8f1f89f/64a5b041-a951-4511-bfe3-b83ca922a044.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.0774&fp-y=0.5115&fp-z=2.4223&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=61&mark-y=322&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMjgmaD04OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "x"" />
</div>
<div><h3>28. Type "x0" to initiate 0 as the initial value</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/c57e9fc3-33f7-4f91-b89b-c5b54b5232c3/3248f1f0-0bac-4fa7-8acc-9439271f34e3.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1917&fp-y=0.5115&fp-z=2.4223&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=393&mark-y=322&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMjgmaD04OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "x0" to initiate 0 as the initial value" />
</div>
<div><h3>29. Type "v"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/22294b6d-b5c2-4813-b903-f4c723e55271/2b4b2ffd-e8ff-4c63-985e-7925cf2ca508.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2067&fp-y=0.4416&fp-z=2.4230&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=60&mark-y=533&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMjgmaD04OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "v"" />
</div>
<div><h3>30. Type "v0" to initiate 10 as the initial velocity</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/f6579d00-1c07-4048-af2c-286f27426081/5e307494-6c6d-45e5-aa6d-8bb7be69d867.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2067&fp-y=0.4564&fp-z=2.4230&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=392&mark-y=507&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMjgmaD04OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "v0" to initiate 10 as the initial velocity" />
</div>
<div><h2>🌟 Implementing the motion</h2></div>
<div><h3>31. Click on "Evolution" tab</h3>
<p>The "Evolution" tab implements the algorithm for the motion of the simulation.</p><p>In this editor systems of Ordinary Differential Equations of first order are defined.</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/ebefeb30-01e2-420d-ba57-cef672cd8e04/b74b2c67-727f-4e3a-8d89-a66f9dc6dfd7.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1997&fp-y=0.1995&fp-z=2.5079&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=591&mark-y=96&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yOTgmaD04OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on "Evolution" tab" />
</div>
<div><h3>32. Click on "Click to create a page of ODEs"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/6dad9b24-9ca2-4886-ac71-e91e6f860d8f/44775777-f61c-4310-b5ba-053ac4b0225b.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2911&fp-y=0.5965&fp-z=1.3795&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=130&mark-y=210&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz03MDMmaD0zMzQmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on "Click to create a page of ODEs"" />
</div>
<div><h3>33. A pop-up message to "Create page" will appear.
Click on OK.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/55b08099-3883-42e5-ba89-b75cba00b9c7/cdcafbc9-c211-4193-9c26-b9353b65b03e.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.6116&fp-y=0.5159&fp-z=2.7757&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=721&mark-y=520&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xNTUmaD0xMjcmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="A pop-up message to "Create page" will appear.
Click on OK." />
</div>
<div><h3>34. Type "t" for the independent variable.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/d557a127-7c6f-417f-998b-aae30cf38cd3/c911f85c-970e-4114-83d2-330557f7f0b8.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1894&fp-y=0.1892&fp-z=2.6415&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=469&mark-y=339&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNDkmaD0xMTAmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "t" for the independent variable." />
</div>
<div><h3>35. Type "dt" as the increment.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/0f3555f5-2344-4bec-b29f-ce86def149ba/a0355a70-5ad7-41ca-9aac-2e37d7c457f0.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2722&fp-y=0.1909&fp-z=2.6188&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=723&mark-y=336&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNTgmaD0xMDkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "dt" as the increment." />
</div>
<div><h3>36. Click on the 1st option under State</h3>
<p>A pop-up message "<strong>List of suitable variables" will appear after.</strong></p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/d6648731-7ce5-43cf-9c31-22d949459f1d/eb3efae8-e736-4a6a-a76c-4f3adfdb770a.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2763&fp-y=0.2813&fp-z=2.0000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=184&mark-y=359&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMDImaD02MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on the 1st option under State" />
</div>
<div><h3>37. Type "x" </h3>
<p>OR select "x" </p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/699f1aa0-fcb1-4340-bcf7-f31abe0f7f13/c5e0e6f9-452a-45ac-83dc-002142519bb9.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.4941&fp-y=0.5145&fp-z=1.7625&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=290&mark-y=525&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NjYmaD02OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "x" " />
</div>
<div><h3>38. Click on OK</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/fcded0f7-a2d1-4bbb-ada9-1630930a7562/26285d9f-7181-4002-a4c5-5cf3768ebf07.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&fp-z=1.8499&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=947&mark-y=553&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz04NCZoPTcxJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on OK" />
</div>
<div><h3>39. Click on the 2nd option under State</h3>
<p>A pop-up message "<strong>List of suitable variables" will appear after.</strong></p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/e0ea5ea5-8e16-4f3c-82e8-a616b11ab613/deb483cd-e797-4392-9379-c79cefecf863.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1679&fp-y=0.3285&fp-z=2.3194&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=285&mark-y=334&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zNjUmaD04OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on the 2nd option under State" />
</div>
<div><h3>40. Type "v"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/f2ad778a-ae64-4176-9705-9ef3a50193d6/16cab588-bbf3-41b9-8bde-709b1ad81b17.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5118&fp-z=1.7625&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=278&mark-y=529&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NjYmaD02OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "v"" />
</div>
<div><h3>41. Click on OK</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/c2f5361b-74fb-4a46-8a4e-64a80c5e2f90/2c409f47-229b-4c65-a9a9-6407d58f005a.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.4905&fp-y=0.5050&fp-z=1.8499&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=968&mark-y=546&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz04NCZoPTcxJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on OK" />
</div>
<div><h3>42. Click on the 1st option under Rate</h3>
<p>A pop-up message "<strong>List of suitable variables" will appear after.</strong></p><p><strong>This step is to link velocity (<em>v</em>) to the displacement (<em>x</em>) </strong></p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/16f0ffb1-fcd5-4df2-8da3-61b1568dcfa5/c5bb3071-d87c-46ac-82f4-f4a6ceef7fe9.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.3616&fp-y=0.4390&fp-z=1.1414&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=343&mark-y=240&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xNzkmaD00MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on the 1st option under Rate" />
</div>
<div><h3>43. Type "v"</h3>
<p>or select "v"</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/728671cf-1f4d-4aa3-a557-f3b51682980c/65662fd7-ea13-4069-9e3f-81c21f9783a6.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.4982&fp-y=0.5185&fp-z=1.6811&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=266&mark-y=513&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01OTUmaD02OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "v"" />
</div>
<div><h3>44. Click on OK</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/1654c2c7-39ab-4478-9865-79a79daecec5/89daa3b7-6cc0-4bdc-bf71-0b1cce9ef5d7.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5032&fp-y=0.5106&fp-z=1.8036&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=953&mark-y=534&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz04OSZoPTc0JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on OK" />
</div>
<div><h3>45. Click on the 2nd option under Rate</h3>
<p>A pop-up message "<strong>List of suitable variables" will appear after.</strong></p><p><strong>This step links velocity (<em>v</em>) to the acceleration (<em>a</em>).</strong></p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/ac08ede6-d75a-4aec-8954-fd137ebb206c/3b3e9778-3033-4161-a289-2ece8a98c5b6.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.3721&fp-y=0.3613&fp-z=1.8246&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=328&mark-y=339&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NDMmaD01MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on the 2nd option under Rate" />
</div>
<div><h3>46. Select "a : (double) :"</h3>
<p>or type "a" </p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/0ed2a6ed-ecff-42c9-8980-6f77fda55426/acb83fcd-16cd-4265-b604-5241d188cbf1.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5007&fp-y=0.4724&fp-z=1.4143&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=247&mark-y=341&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz03MDUmaD00OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Select "a : (double) :"" />
</div>
<div><h3>47. Click on OK</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/55750b1e-c57b-4d87-8e43-90236078a6de/8809b99e-0551-4742-aa29-905a0c954e46.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.4951&fp-y=0.4986&fp-z=1.8036&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=971&mark-y=597&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz04OSZoPTc0JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on OK" />
</div>
<div><h3>48. The "Evolution" tab should look like this:</h3>
<p>velocity, <em>v = dx / dt</em></p><p>acceleration, <em>a = dv / dt</em></p><p><em>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 </em></p><p>// Update ball position </p><p>x += v*dt; // or x = x + v*dt </p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/e72598e9-1ab6-4f8e-9514-83228675edfc/6234a5cb-b495-498c-a7cb-47ce882d3a97.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="The "Evolution" tab should look like this:" />
</div>
<div><h2>🌟 Crafting Plotting Panel View with HTML </h2></div>
<div><h3>49. Click on View</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/930703e7-a0bf-4212-a7a4-381c70122c6b/15c5bdbd-9071-4e9c-895d-7f6e0794d782.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2272&fp-y=0.1817&fp-z=2.7658&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=706&mark-y=10&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMDUmaD0xMjMmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on View" />
</div>
<div><h3>50. Click & Hold the following image under "Interface"
Drag it to "Simulation view" on the left, following the Green markings.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/041fb598-e3e3-40ed-b38f-00f75e476dfd/b14c99bd-614c-4d46-9df9-872632a6879f.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2653&fp-y=0.2662&fp-z=1.8875&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=651&mark-y=257&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02MyZoPTY1JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click & Hold the following image under "Interface"
Drag it to "Simulation view" on the left, following the Green markings." />
</div>
<div><h3>51. This will appear after dragging the previous icon.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/b58e0671-3ee9-4885-9848-660f1c2306a5/a619d576-5b04-458e-aac7-03b3c1d1f824.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2085&fp-y=0.2500&fp-z=2.0000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=15&mark-y=195&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00OTEmaD01MjUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="This will appear after dragging the previous icon." />
</div>
<div><h3>52. Now we want to shift the "controlPanel" (in Green) to the top of the page.</h3>
<p>To do this, we will have to shift the "controlPanel" to inside "labelPanel", as indicated with the Red markings.</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/9225f1ba-8e1e-4054-9586-790afebcce1c/1210a926-76b0-4136-9626-2fec560db4a8.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=50&mark-y=171&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0xOTMmaD0yMiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Now we want to shift the "controlPanel" (in Green) to the top of the page." />
</div>
<div><h3>53. The Panel should look like this.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/2f50ddec-7864-443e-8ebc-7dc50196e2ec/c6e76e5c-e479-4796-a673-297995df7752.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.3012&fp-y=0.3009&fp-z=1.6626&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=30&mark-y=207&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MDMmaD0xODImZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="The Panel should look like this." />
</div>
<div><h3>54. Drag the highlighted icon (Shape) to the "plottingPanel" .
The Panel should look like this.</h3>
<p>A pop-up message <em>"Create a new element"</em> will appear after.</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/2e2422fe-ae75-4969-9323-4a93f102c75a/3c2b7460-ac8e-4461-bee3-5bbc162f29fb.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5364&fp-y=0.5671&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=599&mark-y=540&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz04OSZoPTY5JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Drag the highlighted icon (Shape) to the "plottingPanel" .
The Panel should look like this." />
</div>
<div><h3>55. Type "Ball"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/1c345b66-38b2-4223-ac3d-e120e1dd2bc7/5994a2ae-92ed-4a84-88c7-5e787d2d017a.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5007&fp-y=0.5201&fp-z=1.4143&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=247&mark-y=331&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz03MDUmaD02OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "Ball"" />
</div>
<div><h3>56. Click on OK</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/8117aea0-3aa5-4f06-80be-f8aa687060b8/a3b12035-d086-46bb-8567-ecf2112e78cb.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.4897&fp-y=0.5153&fp-z=1.7270&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=947&mark-y=470&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDYmaD04NCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on OK" />
</div>
<div><h3>57. Click on the Shape Icon to open up its menu for more options.</h3>
<p>Sometimes WebEJS might end up creating 2 Shapes instead. Delete the extra 2nd element by clicking on the shape icon here.</p><p></p><p>If this doesn't occur in your case, skip to step #60 here:</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-5738dcc1-b731-4fd1-ba87-8a877250e936">https://app.tango.us/app/workflow/Creating-a-Simple-Ball-Simulation-With-ChatGPT-and-WebEJS-6c7eebacc16f42ef91843d5721823284#step-5738dcc1-b731-4fd1-ba87-8a877250e936</a></p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/40f8fa63-f1d1-4c1a-9059-c0bd9feecf1f/d17d6709-db5f-4736-943d-a56bfde55091.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1300&fp-y=0.4522&fp-z=2.8899&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=396&mark-y=317&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDkmaD05NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on the Shape Icon to open up its menu for more options." />
</div>
<div><h3>58. Click on "Remove" option in the Menu</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/f7323326-592d-4b8d-a7ff-fa427750dfb5/62e2944a-1480-4356-9241-94f3a8ae2bbc.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1689&fp-y=0.5132&fp-z=1.4223&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=163&mark-y=141&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNTEmaD00NTAmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on "Remove" option in the Menu" />
</div>
<div><h3>59. Click on Remove</h3>
<p>A pop-up message will appear to confirm the removal of the Shape element.</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/c7bf5209-3c91-4c79-bd88-668cb088483d/f18cb2f7-e6bd-437e-b146-a5ee19f5b613.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5017&fp-y=0.5228&fp-z=1.6776&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=867&mark-y=427&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xNDgmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on Remove" />
</div>
<div><h3>60. Click on the Shape icon to open up its menu for its properties.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/5738dcc1-b731-4fd1-ba87-8a877250e936/9e953307-c5e9-402d-bec3-75c6c4c7738e.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1673&fp-y=0.3887&fp-z=2.8875&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=396&mark-y=371&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDkmaD05NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on the Shape icon to open up its menu for its properties." />
</div>
<div><h3>61. Click on "Properties" in the Menu.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/29640d37-6437-405b-8148-6a5d8a8d891c/9f6c39f1-a009-4696-b9c8-3410923d593f.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1689&fp-y=0.6467&fp-z=1.7556&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=201&mark-y=88&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMTAmaD01NTUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on "Properties" in the Menu." />
</div>
<div><h3>62. Type "x"</h3>
<p>Link the X position with the variable "x"</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/341e96eb-f267-418a-af85-9f4fdc57081e/5e543eff-69ce-4298-87a7-f25dbd808f56.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2500&fp-y=0.2985&fp-z=2.0000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=439&mark-y=299&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNzkmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "x"" />
</div>
<div><h3>63. Type "1"</h3>
<p>SizeX for this case shall be 1.</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/e5c0f66a-8b3e-49b2-82a2-8b062af9cfa1/a3fa6d69-16f4-4186-aeaf-37ff52b8494a.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2411&fp-y=0.4597&fp-z=2.4020&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=432&mark-y=316&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzUmaD05OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "1"" />
</div>
<div><h3>64. Type "1"</h3>
<p>SizeY for this case shall be 1.</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/307067a9-fcac-4628-982d-5473fa003205/2826aa70-09f0-4fdf-90f7-fe8d65825807.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2411&fp-y=0.5046&fp-z=2.4020&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=432&mark-y=316&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzUmaD05OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "1"" />
</div>
<div><h3>65. Click on Done</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/b624d8f1-e259-4517-99c3-49c20edeb649/cbcf4d78-0f79-4a05-9b3f-9f95d1580cf7.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.7507&fp-y=0.7925&fp-z=2.0000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=921&mark-y=608&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xNTEmaD05OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on Done" />
</div>
<div><h2>🌟 PREVIEW: the simulation</h2></div>
<div><h3>66. Check "on" for the Live model</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/ef5e82a8-f6f2-4639-a949-6d66f8cf25b7/df9eba4a-db33-4646-b7a5-61c2bdd2765f.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.7487&fp-y=0.2525&fp-z=1.9868&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=953&mark-y=91&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz04NCZoPTUwJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Check "on" for the Live model" />
</div>
<div><h3>67. "FULL MODEL: Simulation" will appear instead of "PREVIEW: Simulation", indicating that the Live model is on display. </h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/7ccdd9af-4a97-4189-b7d7-b30dec82ec94/508468b7-693b-4171-a5e9-190f52278ee6.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.7123&fp-y=0.0840&fp-z=2.0893&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=121&mark-y=88&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz05NTgmaD04MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt=""FULL MODEL: Simulation" will appear instead of "PREVIEW: Simulation", indicating that the Live model is on display. " />
</div>
<div><h3>68. Wait patiently as the simulation loads up.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/7ab39330-9950-460a-8337-5cccbc608d01/01f8267c-1963-41a8-94dc-a52c4902b19d.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.7512&fp-y=0.3654&fp-z=1.2349&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=465&mark-y=100&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz03MzMmaD00NjAmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Wait patiently as the simulation loads up." />
</div>
<div><h3>69. Click on "Reset" button to reset the simulation</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/72ffb3cc-1dfb-482a-a6d5-b2ec2dd200fc/fbb25f57-9fab-4d59-aef4-368b4aa25261.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.7922&fp-y=0.1600&fp-z=2.8899&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=540&mark-y=289&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTkmaD05NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on "Reset" button to reset the simulation" />
</div>
<div><h3>70. The simulation should look like this as a result.</h3>
<p>The ball is moving to the right at a speed of <em>(dx/dt = v = v0 = 10)</em></p><p><em>^ </em>may go to variables to change <em>v0 = 0.6</em> or <em>any other desired value </em>to slow the speed.</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/26c6eb5d-f7de-42ad-b6be-2b014ee8e46c/7d66f9b3-0ccd-452b-aeef-cbf7ada6abef.gif?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="The simulation should look like this as a result." />
</div>
<div><h3>71. ^ may change the velocity value, v0 to "0.6" for a slower motion.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/f4dd5db6-ae5a-4501-b518-2ffa4b8222c6/f21e9eb3-0cea-4f8d-b889-5ddc42d7245d.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=324&mark-y=255&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0yODAmaD01OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="^ may change the velocity value, v0 to "0.6" for a slower motion." />
</div>
<div><h2>🌟 use Model - Evolution</h2><p>Go to the "Model" tab under "Evolution".</p>
</div>
<div><h3>72. Click on Model</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/202532c3-750e-4a24-8491-b73274f6c9fb/d212b2b5-4881-4e6f-8ce6-f19ef1950f86.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2241&fp-y=0.1841&fp-z=2.7029&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=516&mark-y=11&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMjcmaD0xMjAmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on Model" />
</div>
<div><h3>73. Click on the "Events" button under "Evol Page 1"</h3>
<p>A pop-up window will appear after.</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/288b5146-d140-4658-bb50-808441a86104/d689b6fd-6c61-4264-bd4f-4197babfc467.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2931&fp-y=0.5604&fp-z=2.1414&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=992&mark-y=495&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xNDYmaD0xMDEmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on the "Events" button under "Evol Page 1"" />
</div>
<div><h3>74. Click on "Click to create a page of Events"</h3>
<p>A pop-up window to create the page will appear after.</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/969d81bb-0446-43b2-87b9-7d0ff4a34072/56e510a2-4849-484f-a3d8-161f8b8d28ce.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5004&fp-y=0.5328&fp-z=1.0754&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=45&mark-y=72&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTEwJmg9NTg2JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on "Click to create a page of Events"" />
</div>
<div><h3>75. Click on OK</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/3ab31791-d6e9-4b6f-84f2-41d8dc5c7a0c/8e9c79ea-3ca5-4f20-9814-bff4a7846e20.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.4932&fp-y=0.5139&fp-z=1.7244&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=940&mark-y=465&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDYmaD04NCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on OK" />
</div>
<div><h3>76. Edit the Zero Condition for Event 1</h3>
<p>Let's start by editing the Zero Condition for Event 1</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/bdc0de5d-77c6-4e2f-8312-82c80ecb7d90/e0fade0e-917a-4901-a08c-5b0058e1cc66.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5011&fp-y=0.4304&fp-z=1.0762&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=44&mark-y=245&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTExJmg9MTg2JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Edit the Zero Condition for Event 1" />
</div>
<div><h3>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"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/d7d20397-aa13-45e2-a467-401d4113f8c0/238df7a6-c8cb-4997-9044-5e34986a5db2.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="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"" />
</div>
<div><h3>78. Copy element titled "canvasWidth"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/a7171fc6-3a17-4521-ac21-7043b7ca8950/a911716b-73e9-49dd-b550-5406bf5a90d3.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5882&fp-y=0.6783&fp-z=1.5644&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=202&mark-y=2&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz03OTUmaD03NTAmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Copy element titled "canvasWidth"" />
</div>
<div><h2><a href="https://macmath.inf.um.es/editor?id=78bfa731-67b6-47dd-a7d5-6d9c8a78e9f6"># use GPT's answers as EJSS variables</a></h2></div>
<div><h3>79. Paste "canvasWidth" into input</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/573c807b-0e22-4fde-947e-72ac86e45ad3/52ab89db-e584-49d3-b064-b2cca9a88cb4.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.0767&fp-y=0.5542&fp-z=2.4149&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=57&mark-y=336&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Paste "canvasWidth" into input" />
</div>
<div><h3>80. Type "2"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/fca4b631-8087-4d86-9802-8f68499d33b2/3c17368f-1822-44c1-9d8f-6dcb22b03c33.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1908&fp-y=0.5542&fp-z=2.4149&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=388&mark-y=336&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "2"" />
</div>
<div><h3>81. Type "canvasHeight"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/bb842c63-6a94-49d3-bb5d-28e140ef4201/e3548b8b-e659-42dc-a8a9-d3603de83081.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.0767&fp-y=0.6001&fp-z=2.4149&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=57&mark-y=336&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "canvasHeight"" />
</div>
<div><h3>82. Type "2"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/d69748f4-36a1-4576-8473-9d4fc1dabbeb/0f0ccdf1-eba2-4b3b-9375-2224afc68919.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1908&fp-y=0.6001&fp-z=2.4149&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=388&mark-y=336&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "2"" />
</div>
<div><h2><a href="https://chat.openai.com/c/9ef335aa-27a4-4605-8226-133ef02dc9de"># Use GPT as AI coding assistant</a></h2></div>
<div><h3>83. Click on ChatGPT 3.5…</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/14763f65-3278-4989-a98c-c151deb9d719/cdcf8068-a0c2-4cbe-a7e0-6e1066c22a86.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5882&fp-y=0.5000&fp-z=1.0042&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=449&mark-y=2&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz01MTAmaD03NTEmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on ChatGPT 3.5…" />
</div>
<div><h3>84. Click on ChatGPT 3.5…</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/a1166153-11ff-480a-a018-89a21d28c6bc/6f0695f4-85e9-4a59-bdde-e6fa9b67582a.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5948&fp-y=0.5000&fp-z=1.0042&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=436&mark-y=2&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz01NTImaD03NTEmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on ChatGPT 3.5…" />
</div>
<div><h3>85. Copy element</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/43fb6fdc-7139-4231-a3fa-c14726846b12/21f0995a-26cf-441c-b7ed-2df6562682cf.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5882&fp-y=0.5000&fp-z=1.0042&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=449&mark-y=2&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz01MTAmaD03NTEmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Copy element" />
</div>
<div><h2><a href="https://macmath.inf.um.es/editor?id=78bfa731-67b6-47dd-a7d5-6d9c8a78e9f6"># Designing the Simulation, -Variables - Evolution - PlottingPanel</a></h2></div>
<div><h3>86. Click on Evolution</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/3bfb5223-b466-4c15-adc7-a081f3ed9282/e4615de0-84ba-4477-b3f3-4e21e3c0e5f6.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2462&fp-y=0.0746&fp-z=2.5062&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=451&mark-y=97&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yOTgmaD04OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on Evolution" />
</div>
<div><h3>87. Click on Evol Page 1</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/25e46d52-c3c0-46a3-bbb3-21f756233324/b5a7d42a-5974-4d22-9b61-d6aa8aa4927e.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2911&fp-y=0.4588&fp-z=1.1943&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=113&mark-y=110&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02MDkmaD01MzQmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on Evol Page 1" />
</div>
<div><h3>88. Click on Event 1</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/63a05c43-e422-4a66-aec2-23688a2187a9/756376fc-fd56-4e96-8f45-d0807ade0b0d.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5003&fp-y=0.5506&fp-z=1.1083&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=65&mark-y=76&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDcxJmg9NjA1JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on Event 1" />
</div>
<div><h3>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
</h3>
<p>ignore the commented lines // as they are previous lines of codes but not needed now</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/de454dee-b6a2-4446-be61-2a623e93f52c/5c78021a-4557-4ef4-a943-3bc21c5dce83.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="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
" />
</div>
<div><h3>90. Go to HTMLVIEW- Click on Ball image</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/1dd19f6c-196e-4946-88da-b4320359ac4a/f4c92535-6ea3-4bd3-a155-e1bf56442fda.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1216&fp-y=0.3733&fp-z=2.9265&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=375&mark-y=331&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDQmaD05MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Go to HTMLVIEW- Click on Ball image" />
</div>
<div><h3>91. Click on image</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/40c8be1e-4668-437d-aab4-f77952bcbff7/c79bdb21-621c-4a74-9597-adb7789fd740.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1757&fp-y=0.5819&fp-z=1.6282&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=209&mark-y=136&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNjkmaD00ODImZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on image" />
</div>
<div><h3>92. Type "radius*2" for both SizeX and SizeY</h3>
</div>
<div><h3>93. Type "radius*2" for both SizeX and SizeY</h3>
<p>reason is SizeX and SizeY are double of the radius</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/dd645a7c-2af6-4d7d-91c3-0334de8a209a/0edbeddf-cb22-4ced-916b-dfd5f7a64fe6.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2272&fp-y=0.4635&fp-z=2.2744&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=409&mark-y=333&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zODEmaD04OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "radius*2" for both SizeX and SizeY" />
</div>
<div><h3>94. Click on Done</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/9ad21788-1b33-4647-8775-0a51a0deef6d/cc9fb0c0-6563-4890-8860-ce9693ceba13.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.9174&fp-y=0.9489&fp-z=4.0000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=662&mark-y=509&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yODMmaD0xODMmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on Done" />
</div>
<div><h3>95. Go back to Model to introduce your variable </h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/629d640e-e3f0-48ad-9ee9-9b90843480ef/877308bc-92e4-4cdd-9112-46618df76864.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2269&fp-y=0.0328&fp-z=2.7354&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=492&mark-y=11&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMTUmaD0xMTQmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Go back to Model to introduce your variable " />
</div>
<div><h3>96. Paste "radius" into input</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/6ffb1a64-4e63-4305-b3d6-6713e5e912cf/b83bcaa4-0f9d-45f2-bbf9-96a868937942.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.0767&fp-y=0.6460&fp-z=2.4149&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=57&mark-y=336&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Paste "radius" into input" />
</div>
<div><h3>97. Type "0.1"</h3>
<p>note that the radius cannot be too big like 1 else it will never be able to meet the event on the ODE event.</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/6ed4adc5-a96d-41d6-a885-0099d7db8161/decd2e07-4422-4246-b179-7d19162a74d0.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1816&fp-y=0.6397&fp-z=2.4149&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=361&mark-y=336&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzEmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "0.1"" />
</div>
<div><h3>98. Add the variable canvasWidth and canvasHeight to the plotingPanel's MinimumX, MaximumX etc , go to Click on View</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/40ecb22e-acf3-4747-bfe0-122816b40e70/55fac8c8-6aee-45e4-af3a-8c149d9ed8f2.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2813&fp-y=0.0328&fp-z=2.7956&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=503&mark-y=11&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xOTQmaD0xMTcmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Add the variable canvasWidth and canvasHeight to the plotingPanel's MinimumX, MaximumX etc , go to Click on View" />
</div>
<div><h3>99. Click on image</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/9c8cecd0-7609-44a3-9ab9-88ed14e1bd88/05b2aa8d-b3a1-4c7a-bd84-c5e069bcb927.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.0889&fp-y=0.3399&fp-z=2.9265&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=260&mark-y=331&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDQmaD05MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on image" />
</div>
<div><h3>100. Click on image</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/bb5fdd5e-8612-4c0a-b97f-5eb8115c629d/9ec6f1e7-350c-4c86-a223-289add7ea98c.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1430&fp-y=0.5652&fp-z=1.5468&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=138&mark-y=130&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNTYmaD00OTQmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on image" />
</div>
<div><h3>101. Type "-canvasWidth/2"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/137e350a-2488-4421-b781-1f4d5ee5f1f5/824f01a4-3467-4831-8b43-0e76ff190024.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2252&fp-y=0.3415&fp-z=2.2542&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=406&mark-y=334&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zODgmaD04NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "-canvasWidth/2"" />
</div>
<div><h3>102. Type "canvasWidth/2"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/d576c13b-3c33-4a3f-ad29-4bec45f926c1/9e62b38d-e10b-44b7-a337-a73fa8e1225e.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2252&fp-y=0.3811&fp-z=2.2542&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=406&mark-y=334&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zODgmaD04NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "canvasWidth/2"" />
</div>
<div><h3>103. Type "-canvasHeight/2"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/d8883952-26af-432e-b55e-780470bf2022/1f4be83e-39d4-433c-b2cf-396ca0b76779.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2252&fp-y=0.4218&fp-z=2.2542&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=406&mark-y=334&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zODgmaD04NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Type "-canvasHeight/2"" />
</div>
<div><h3>104. Copy input titled "canvasHeight/2"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/c9153f7c-8996-4fc1-bbf0-9b547593241f/7d8cbb2a-ec82-4120-b06c-4467f13a16f1.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2252&fp-y=0.4218&fp-z=2.2542&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=406&mark-y=334&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zODgmaD04NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Copy input titled "canvasHeight/2"" />
</div>
<div><h3>105. Paste "canvasHeight/2" into input</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/3a97b15f-be04-4687-9abd-231410bc7e5e/7b6787e0-9dfb-4163-b418-830b4f80dda8.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2252&fp-y=0.4625&fp-z=2.2542&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=406&mark-y=334&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zODgmaD04NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Paste "canvasHeight/2" into input" />
</div>
<div><h3>106. To make the PlottingPanel length x and length y equal, Click on SquareAspect</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/d548d4ee-e40c-43d6-a46f-1b4eebbcddc5/95b1b031-cb6f-4ae2-a555-27c43a9efc58.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2252&fp-y=0.5834&fp-z=2.2542&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=406&mark-y=334&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zODgmaD04NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="To make the PlottingPanel length x and length y equal, Click on SquareAspect" />
</div>
<div><h3>107. Click on Main</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/1856f38a-9824-4e4c-9ec3-4a75931d5a54/508c6172-a530-48be-84ab-d4549e70c9d2.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5003&fp-y=0.5078&fp-z=1.0612&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=36&mark-y=133&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTI3Jmg9NDg4JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on Main" />
</div>
<div><h3>108. Click on true</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/5e340b33-7e32-4667-89ef-e14e230a491e/51506183-63f2-4f24-b3a1-1dda5987821e.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.4906&fp-z=1.4517&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=261&mark-y=353&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02NzcmaD00OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on true" />
</div>
<div><h3>109. Click on OK</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/fd617890-a959-4910-be11-2b60d0d1309d/3d018f53-f2cd-4106-a06b-300a34422943.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.6754&fp-y=0.6022&fp-z=2.8482&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=535&mark-y=322&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMzAmaD0xMTAmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on OK" />
</div>
<div><h3>110. To make the Width and Height of the PlottingPanel bigger, Click on Width</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/45a1cad9-18b1-4dd4-b8e4-5fb260606c19/621b95de-8e10-415c-b80b-5074f81cfa46.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.8180&fp-y=0.3811&fp-z=2.8482&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=377&mark-y=322&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00NDYmaD0xMTAmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="To make the Width and Height of the PlottingPanel bigger, Click on Width" />
</div>
<div><h3>111. Click on Main</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/e3fe5e51-b3ad-4e48-993e-28138ba744c5/0b6694ad-cbf9-4a6b-961b-53c83fb17766.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5003&fp-y=0.5078&fp-z=1.0612&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=36&mark-y=133&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTI3Jmg9NDg4JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on Main" />
</div>
<div><h3>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.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/e681d228-013e-43bd-9ad1-595f16f07b2a/8596fa51-fa4b-4e3c-b91d-4177ef31ed14.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="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." />
</div>
<div><h3>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)</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/b8c4f66a-a29c-4208-9052-a2b2d19752a9/c1bdd30d-d038-4e5c-bc5e-8e57dce7b69b.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.8749&fp-z=1.0033&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=2&mark-y=632&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTk2Jmg9NTUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="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)" />
</div>
<div><h2><a href="https://macmath.inf.um.es/editor?id=78bfa731-67b6-47dd-a7d5-6d9c8a78e9f6"># Run the simulation on a separate tab for best preview</a></h2></div>
<div><h3>114. After the Simulation is loaded up, it will display the conditions here.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/cf97b66d-90d2-4566-8bd9-a9dc41fda92d/09c43523-1936-4cb1-ad0b-5b99b6a40c3d.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.7512&fp-y=0.3654&fp-z=1.2349&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=465&mark-y=100&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz03MzMmaD00NjAmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="After the Simulation is loaded up, it will display the conditions here." />
</div>
<div><h3>115. Click on Run the simulation</h3>
<p>An alternative to watch the simulation is by clicking on the "Run the simulation" icon on the top right corner</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/22769997-3cda-43bb-ba43-a8782557c1a1/ab34d387-ad81-405b-bbeb-c3acbfda3949.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.8879&fp-y=0.0345&fp-z=2.7969&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=767&mark-y=12&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTMmaD0xMTgmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on Run the simulation" />
</div>
<div><h3>116. Simulation should run in a separate tab</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/cfb7aefd-b53a-4ffb-b155-bde51ec39f4c/9acae3cf-eb38-4b99-8a4b-b6af2bfc21c9.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.2673&fp-y=0.7612&fp-z=1.8725&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=6&mark-y=636&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMDQ3Jmg9NDcmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Simulation should run in a separate tab" />
</div>
<div><h3>117. The simulation should look like this as a result.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/26ee69f9-9ef5-4723-b407-b20c31175a35/09ce074c-076c-446a-8b3c-fe1ce0f7fe9e.gif?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="The simulation should look like this as a result." />
</div>
<hr/><div>✅ Congratulation! You have successfully crafted a simulation :) Feel free to explore more features of WebEJS before proceeding to export the simulation file.</div><hr/>
<div><h2>🌟 Exporting the file</h2></div>
<div><h3>118. Click on the icon for Simulation properties</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/655daef0-77b9-4580-acbe-d5366a64dd1d/899f7461-923f-4b4b-989c-2bdfea416b09.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.3472&fp-y=0.0362&fp-z=2.7702&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=527&mark-y=12&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xNDcmaD0xMjMmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on the icon for Simulation properties" />
</div>
<div><h3>119. Click on "Export options"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/9a1bce35-2675-4fe5-b0c6-26e460736995/243c2e40-605c-4b55-91f7-446a6f665993.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5004&fp-y=0.3458&fp-z=2.3467&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=422&mark-y=303&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zNTUmaD0xMjQmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on "Export options"" />
</div>
<div><h3>120. Check "Save the source file in XML format (readable by JavaScript EJS 6)"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/2ac4521d-9ebf-42e3-9d72-c2da3fad76ee/309e3553-a8c1-40d0-8735-cfe552310d69.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.3428&fp-y=0.4285&fp-z=2.9868&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=301&mark-y=272&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz03NSZoPTc1JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Check "Save the source file in XML format (readable by JavaScript EJS 6)"" />
</div>
<div><h3>121. Click on "Done" button</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/82a2a223-e459-4774-9bbc-47dac1081922/2d44a2e9-2883-4dd0-b76e-654e84bc29ba.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=836&mark-y=560&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz03NiZoPTQ5JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on "Done" button" />
</div>
<div><h3>122. Click on the icon for "Download ZIP with the complete simulation"</h3>
<p>A pop-up window will appear after.</p>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/3e8343be-b8b8-48f3-92fa-aa72916616a1/47e86946-3012-4f14-9f90-23ab79dd8aee.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.9114&fp-y=0.0345&fp-z=2.7969&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=852&mark-y=12&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDEmaD0xMTgmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on the icon for "Download ZIP with the complete simulation"" />
</div>
<div><h3>123. Rename ZIP file to "MovingBall.zip"</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/73e2b667-bf37-4838-a3b5-a57c625e3fbf/34e8ccf7-8641-4084-a2c9-5c40618608c0.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5357&fp-y=0.4914&fp-z=1.5716&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=276&mark-y=327&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02NDkmaD03NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Rename ZIP file to "MovingBall.zip"" />
</div>
<div><h3>124. Click on Download</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/5a4056ee-735e-417b-8ca9-51eadd2f3d8a/e01daded-eafb-439d-9716-849c88474b00.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.6643&fp-y=0.6145&fp-z=2.6377&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=462&mark-y=301&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNzUmaD0xMjkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="Click on Download" />
</div>
<div><h3>125. After Extracting the file, click on "simulation.xhtml" to open up the simulation on your default browser.</h3>
<img src="https://images.tango.us/workflows/6c7eebac-c16f-42ef-9184-3d5721823284/steps/657551a0-2b33-4a62-a8db-3929b0bcbeef/11ec79c0-c97d-486f-996e-ee03f56b5a87.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n" style="border-radius: 8px; border: 1px solid #F4F2F7;" width="600" alt="After Extracting the file, click on "simulation.xhtml" to open up the simulation on your default browser." />
</div>
<hr/><div>ℹ️ 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</div><hr/>
<hr/><div>✅ 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.</div><hr/>
<br/>
<hr/>
<div>
<span>Created with </span><a href="https://tango.us?utm_source=magicCopy&utm_medium=magicCopy&utm_campaign=workflow%20export%20links" target='_blank' style='color: #256EFF'>Tango.us</a>
</div>{/source}
Version:
Other Resources
[text]
end faq
{accordionfaq faqid=accordion4 faqclass="lightnessfaq defaulticon headerbackground headerborder contentbackground contentborder round5"}