From f9f168c66ae0c2dd19e66c0cc35149f87ae76dc3 Mon Sep 17 00:00:00 2001
From: diegomatos <diegovasconcelos62@gmail.com>
Date: Sun, 14 Jul 2024 11:58:15 -0300
Subject: [PATCH] =?UTF-8?q?Adicionando=20bot=C3=A3o=20de=20play=20e=20paus?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AirTrack.html                             | 22 +++++++++++++------
 .../AirTrackScene.js                          | 17 ++++++++++----
 .../BolasBilhar.html                          | 18 ++++++++++-----
 .../BolasBilharScene.js                       | 12 ++++++++--
 .../BouncingBall.html                         | 14 +++++++++---
 .../BouncingBallScene.js                      | 12 ++++++++--
 .../ObliqueWallCollision.html                 | 14 +++++++++---
 .../ObliqueWallCollision.js                   | 12 ++++++++--
 8 files changed, 93 insertions(+), 28 deletions(-)

diff --git a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/AirTrack.html b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/AirTrack.html
index 055f32d..a54dfaf 100644
--- a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/AirTrack.html
+++ b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/AirTrack.html
@@ -31,7 +31,7 @@
         <button 
             x-data
             class="flex md:hidden flex-col items-center align-middle" 
-            x-on:click="console.log('Disparando evento'); $dispatch('teste')"
+            x-on:click="$dispatch('showMenu')"
         >
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
@@ -44,7 +44,7 @@
     <!-- Mobile menu -->
     <aside 
         x-data="{ show: false }"
-        x-on:teste.window="show = true" 
+        x-on:showMenu.window="show = true" 
         x-show="show"
         x-cloak
         x-transition:enter="transition ease-out duration-300"
@@ -56,7 +56,7 @@
         class="fixed top-0 left-0 w-screen h-screen z-10"
     >
         <nav 
-            class="relative w-1/2 h-full p-4 bg-white  shadow" 
+            class="relative w-10/12 h-full p-4 bg-white shadow" 
             x-on:click.outside="show = false"
         >
             <!-- Close Button -->
@@ -83,17 +83,25 @@ <h1 class="text-3xl"><strong>Colisão 1D de trilho de ar</strong></h1>
                 <p>Reprodução da demonstração de AirTrack do professor Walter Lewin.</p>
             </div>
 
-            <iframe width="560" height="315" class="mb-4 mx-auto" src="https://www.youtube.com/embed/aIhScO3_I50?si=WTqKeADF6U-xJC2Y&amp;start=1967" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+            <iframe style="height: 315px;" class="w-full md:w-[560px] mb-4 mx-auto" src="https://www.youtube.com/embed/aIhScO3_I50?si=WTqKeADF6U-xJC2Y&amp;start=1967" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
-            <div id="vtk" style="margin: auto; width: 80%;"></div>
+            <div x-data="{ isPlaying: false }" id="vtk" style="margin: auto; width: 80%;" class="relative">
+                <div class="absolute top-2 left-2 bg-white p-4 rounded">
+                    <button x-on:click="isPlaying = !isPlaying; $dispatch('toggleAnimation', { isPlaying })" class="px-4 py-2 shadow hover:bg-gray-200">
+                        <template x-if="!isPlaying"><span>Start Animation</span></template>
+                        <template x-if="isPlaying"><span>Stop Animation</span></template>
+                    </button>
+                </div>
+            </div>
         </section>
     </main>
 
     <script type="module">
         import AirTrackScene from "./AirTrackScene.js";
 
-        const Scene = new AirTrackScene()
-        Scene.Start()
+        const Scene = new AirTrackS()
+        window.addEventListener("DOMContentLoaded", () => Scene.Start())
+        window.addEventListener("toggleAnimation", (e) => Scene.isPlaying = e.detail.isPlaying)
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/AirTrackScene.js b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/AirTrackScene.js
index 72800cf..a29294b 100644
--- a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/AirTrackScene.js
+++ b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/AirTrackScene.js
@@ -43,16 +43,18 @@ export default class AirTrackScene {
         },
         vtkActorRef: null
     }
+
     fullScreenRenderer = null
     previousTimestamp = 0
+    isPlaying = false
 
     constructor() { }
 
     Start() {
         this.vtkSetup()
         this.vtkPipeline()
-        
-        window.requestAnimationFrame(this.Anim)
+
+        this.Anim()
     }
 
     vtkSetup() {
@@ -119,15 +121,22 @@ export default class AirTrackScene {
     }
 
     Anim = (timeStamp) => {
+        // Por algum motivo na primeira iteração o argumento vem nulo/undefined
         if (timeStamp === undefined) {
             timeStamp = 0
         }
+
         const dt = (timeStamp - this.previousTimestamp) / 1000 // Proximo passo da animação em segundos
         this.previousTimestamp = timeStamp
 
-        this.Update(dt)
-        this.Render()
+        // Quando pausar eu só não atualizo a fisica, mas renderizo o último
+        // estado na tela
+
+        if (this.isPlaying) {
+            this.Update(dt)
+        }
 
+        this.Render()
         window.requestAnimationFrame(this.Anim)
     }
 
diff --git a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BolasBilhar.html b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BolasBilhar.html
index e42aeb0..4590927 100644
--- a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BolasBilhar.html
+++ b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BolasBilhar.html
@@ -30,7 +30,7 @@
         <button 
             x-data
             class="flex md:hidden flex-col items-center align-middle" 
-            x-on:click="console.log('Disparando evento'); $dispatch('teste')"
+            x-on:click="$dispatch('showMenu')"
         >
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
@@ -43,7 +43,7 @@
     <!-- Mobile menu -->
     <aside 
         x-data="{ show: false }"
-        x-on:teste.window="show = true" 
+        x-on:showMenu.window="show = true" 
         x-show="show"
         x-cloak
         x-transition:enter="transition ease-out duration-300"
@@ -55,7 +55,7 @@
         class="fixed top-0 left-0 w-screen h-screen z-10"
     >
         <nav 
-            class="relative w-1/2 h-full p-4 bg-white  shadow" 
+            class="relative w-10/12 h-full p-4 bg-white shadow" 
             x-on:click.outside="show = false"
         >
             <!-- Close Button -->
@@ -81,7 +81,14 @@
                 <h1 class="text-3xl"><strong>Colisão oblíqua entre duas bolas de bilhar</strong></h1>
             </div>
 
-            <div id="vtk" style="margin: auto; width: 80%;"></div>
+            <div x-data="{ isPlaying: false }" id="vtk" style="margin: auto; width: 80%;" class="relative">
+                <div class="absolute top-2 left-2 bg-white p-4 rounded">
+                    <button x-on:click="isPlaying = !isPlaying; $dispatch('toggleAnimation', { isPlaying })" class="px-4 py-2 shadow hover:bg-gray-200">
+                        <template x-if="!isPlaying"><span>Start Animation</span></template>
+                        <template x-if="isPlaying"><span>Stop Animation</span></template>
+                    </button>
+                </div>
+            </div>
         </section>
     </main>
 
@@ -90,7 +97,8 @@ <h1 class="text-3xl"><strong>Colisão oblíqua entre duas bolas de bilhar</stron
         import BolasBilharScene from "./BolasBilharScene.js";
 
         const Scene = new BolasBilharScene()
-        Scene.Start()
+        window.addEventListener("DOMContentLoaded", () => Scene.Start())
+        window.addEventListener("toggleAnimation", (e) => Scene.isPlaying = e.detail.isPlaying)
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BolasBilharScene.js b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BolasBilharScene.js
index dc9acc0..50d73a4 100644
--- a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BolasBilharScene.js
+++ b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BolasBilharScene.js
@@ -45,6 +45,7 @@ export default class BolasBilharScene {
     }
     fullScreenRenderer = null
     previousTimestamp = 0
+    isPlaying = false
 
     constructor() { }
 
@@ -115,15 +116,22 @@ export default class BolasBilharScene {
     }
 
     Anim = (timeStamp) => {
+        // Por algum motivo na primeira iteração o argumento vem nulo/undefined
         if (timeStamp === undefined) {
             timeStamp = 0
         }
+
         const dt = (timeStamp - this.previousTimestamp) / 1000 // Proximo passo da animação em segundos
         this.previousTimestamp = timeStamp
 
-        this.Update(dt)
-        this.Render()
+        // Quando pausar eu só não atualizo a fisica, mas renderizo o último
+        // estado na tela
 
+        if (this.isPlaying) {
+            this.Update(dt)
+        }
+
+        this.Render()
         window.requestAnimationFrame(this.Anim)
     }
 
diff --git a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BouncingBall.html b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BouncingBall.html
index 36c2496..271e050 100644
--- a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BouncingBall.html
+++ b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BouncingBall.html
@@ -55,7 +55,7 @@
         class="fixed top-0 left-0 w-screen h-screen z-10"
     >
         <nav 
-            class="relative w-1/2 h-full p-4 bg-white  shadow" 
+            class="relative w-10/12 h-full p-4 bg-white  shadow" 
             x-on:click.outside="show = false"
         >
             <!-- Close Button -->
@@ -81,7 +81,14 @@
                 <h1 class="text-3xl"><strong>Colisão inelastica</strong></h1>
             </div>
 
-            <div id="vtk" style="margin: auto; width: 80%;"></div>
+            <div x-data="{ isPlaying: false }" id="vtk" style="margin: auto; width: 80%;" class="relative">
+                <div class="absolute top-2 left-2 bg-white p-4 rounded">
+                    <button x-on:click="isPlaying = !isPlaying; $dispatch('toggleAnimation', { isPlaying })" class="px-4 py-2 shadow hover:bg-gray-200">
+                        <template x-if="!isPlaying"><span>Start Animation</span></template>
+                        <template x-if="isPlaying"><span>Stop Animation</span></template>
+                    </button>
+                </div>
+            </div>
         </section>
     </main>
 
@@ -90,7 +97,8 @@ <h1 class="text-3xl"><strong>Colisão inelastica</strong></h1>
         import BouncingBallScene from "./BouncingBallScene.js";
 
         const Scene = new BouncingBallScene()
-        Scene.Start()
+        window.addEventListener("DOMContentLoaded", () => Scene.Start())
+        window.addEventListener("toggleAnimation", (e) => Scene.isPlaying = e.detail.isPlaying)
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BouncingBallScene.js b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BouncingBallScene.js
index e69b326..737fe43 100644
--- a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BouncingBallScene.js
+++ b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/BouncingBallScene.js
@@ -22,6 +22,7 @@ export default class BouncingBallScene {
     }
     fullScreenRenderer = null
     previousTimestamp = 0
+    isPlaying = false
 
     constructor() { }
     
@@ -86,15 +87,22 @@ export default class BouncingBallScene {
     }
 
     Anim = (timeStamp) => {
+        // Por algum motivo na primeira iteração o argumento vem nulo/undefined
         if (timeStamp === undefined) {
             timeStamp = 0
         }
+
         const dt = (timeStamp - this.previousTimestamp) / 1000 // Proximo passo da animação em segundos
         this.previousTimestamp = timeStamp
 
-        this.Update(dt)
-        this.Render()
+        // Quando pausar eu só não atualizo a fisica, mas renderizo o último
+        // estado na tela
 
+        if (this.isPlaying) {
+            this.Update(dt)
+        }
+
+        this.Render()
         window.requestAnimationFrame(this.Anim)
     }
 
diff --git a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/ObliqueWallCollision.html b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/ObliqueWallCollision.html
index 80e6da3..65de6d1 100644
--- a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/ObliqueWallCollision.html
+++ b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/ObliqueWallCollision.html
@@ -55,7 +55,7 @@
         class="fixed top-0 left-0 w-screen h-screen z-10"
     >
         <nav 
-            class="relative w-1/2 h-full p-4 bg-white  shadow" 
+            class="relative w-10/12 h-full p-4 bg-white shadow" 
             x-on:click.outside="show = false"
         >
             <!-- Close Button -->
@@ -81,7 +81,14 @@
                 <h1 class="text-3xl"><strong>Colisão obliqua com superficie</strong></h1>
             </div>
 
-            <div id="vtk" style="margin: auto; width: 80%;"></div>
+            <div x-data="{ isPlaying: false }" id="vtk" style="margin: auto; width: 80%;" class="relative">
+                <div class="absolute top-2 left-2 bg-white p-4 rounded">
+                    <button x-on:click="isPlaying = !isPlaying; $dispatch('toggleAnimation', { isPlaying })" class="px-4 py-2 shadow hover:bg-gray-200">
+                        <template x-if="!isPlaying"><span>Start Animation</span></template>
+                        <template x-if="isPlaying"><span>Stop Animation</span></template>
+                    </button>
+                </div>
+            </div>
         </section>
     </main>
 
@@ -90,7 +97,8 @@ <h1 class="text-3xl"><strong>Colisão obliqua com superficie</strong></h1>
         import ObliqueWallCollision from "./ObliqueWallCollision.js";
 
         const Scene = new ObliqueWallCollision()
-        Scene.Start()
+        window.addEventListener("DOMContentLoaded", () => Scene.Start())
+        window.addEventListener("toggleAnimation", (e) => Scene.isPlaying = e.detail.isPlaying)
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/ObliqueWallCollision.js b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/ObliqueWallCollision.js
index ef07728..6f9bc43 100644
--- a/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/ObliqueWallCollision.js
+++ b/modelagem-matematica-computacional-2024-01/elastic-collision-implementation/ObliqueWallCollision.js
@@ -22,6 +22,7 @@ export default class ObliqueWallCollision {
     }
     fullScreenRenderer = null
     previousTimestamp = 0
+    isPlaying = false
 
     constructor() { }
 
@@ -86,15 +87,22 @@ export default class ObliqueWallCollision {
     }
 
     Anim = (timeStamp) => {
+        // Por algum motivo na primeira iteração o argumento vem nulo/undefined
         if (timeStamp === undefined) {
             timeStamp = 0
         }
+
         const dt = (timeStamp - this.previousTimestamp) / 1000 // Proximo passo da animação em segundos
         this.previousTimestamp = timeStamp
 
-        this.Update(dt)
-        this.Render()
+        // Quando pausar eu só não atualizo a fisica, mas renderizo o último
+        // estado na tela
 
+        if (this.isPlaying) {
+            this.Update(dt)
+        }
+
+        this.Render()
         window.requestAnimationFrame(this.Anim)
     }