Adicionando botão de play e pause

diegomatos321 · Jul 14, 2024 · f9f168c · f9f168c
1 parent 3ec36b4
commit f9f168c
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 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
@@ -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>
diff --git 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
@@ -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>
diff --git a/...gem-matematica-computacional-2024-01/elastic-collision-implementation/BolasBilharScene.js b/...gem-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/...lagem-matematica-computacional-2024-01/elastic-collision-implementation/BouncingBall.html b/...lagem-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>
diff --git a/...em-matematica-computacional-2024-01/elastic-collision-implementation/BouncingBallScene.js b/...em-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/...tematica-computacional-2024-01/elastic-collision-implementation/ObliqueWallCollision.html b/...tematica-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>
diff --git a/...matematica-computacional-2024-01/elastic-collision-implementation/ObliqueWallCollision.js b/...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)
     }