From 28a56a6ceaec1e1a8e9a33ad95b7cf687dc7bfe4 Mon Sep 17 00:00:00 2001
From: rgeorgi <russellgeorgi@gmail.com>
Date: Sat, 4 Sep 2021 11:01:39 -0700
Subject: [PATCH] 8-20 and 8-66

---
 8-20.html  | 195 ++++++++++++++++++++++++++++++++++
 8-66.html  | 299 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html |  21 ++++
 3 files changed, 515 insertions(+)
 create mode 100644 8-20.html
 create mode 100644 8-66.html
diff --git a/8-20.html b/8-20.html
new file mode 100644
index 0000000..b6bfe9b
--- /dev/null
+++ b/8-20.html
@@ -0,0 +1,195 @@
+<!--
+    This work is licensed under CC BY-NC-ND 4.0            
+    Link to license: http://creativecommons.org/licenses/by-nc-nd/4.0/
+    Attribute to Russell Georgi
+-->
+<html>
+    <head>
+        <title>
+            Problem 8-20
+        </title>
+        <style>
+            html, body {
+                width:  100%;
+                height: 100%;
+                margin: 0px;
+                border: 0;
+                overflow: hidden;
+                display: block;
+            }
+
+            canvas {
+                position: absolute;
+            }
+
+            .greenSlider {
+                -webkit-appearance: none;
+                border-radius: 5px;
+                height: 10px;
+                background: #d3d3d3;
+                outline: none;
+                opacity: 0.7;
+                -webkit-transition: .2s;
+                transition: opacity .2s;
+
+            }
+
+            .greenSlider::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                appearance: none;
+                background: #000000;
+                border-radius: 50%;
+                width: 15px;
+                height: 15px;
+                cursor: pointer;
+            }
+
+            .greenSlider::-moz-range-thumb {
+                background: #000000;
+                border-radius: 50%;
+                width: 15px;
+                height: 15px;
+                cursor: pointer;
+            }
+        </style>
+    </head>
+    <body>       
+        <canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;">
+        Your browser does not support the HTML5 canvas tag.</canvas>
+        <div class="slidecontainer">
+            <t>Vx</t>
+            <input type="range" min="-200" max="200" value="20" step="0.1" class="greenSlider" id="vxSlider">
+            <br>
+            <t>&#969</t>
+            <input type="range" min="-50" max="50" value="20" step="0.1" class="greenSlider" id="wSlider">
+        </div>
+        
+        <script>
+        var c = document.getElementById("myCanvas");
+        var ctx = c.getContext("2d");
+        c.width = window.innerWidth;
+        c.height = window.innerHeight;
+        //Time step
+        var dt = 0.002;
+        var t = 0;
+        var g = -500;
+        var y = 100;
+        var vy = 0;
+        var x = 0;
+        var vx = 20;
+        var omega = 20;
+        var theta = 0;
+        var r = 10;
+        //Relative position of canvas
+        var xPos = 0;
+        var yPos = -70;
+        //Moves and scales canvas
+        ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
+        ctx.scale(2, -2);
+
+        vxSlider.oninput = function()
+        {
+            vx = parseFloat(this.value);
+            Reset();
+        }
+
+        wSlider.oninput = function()
+        {
+            omega = parseFloat(this.value);
+            Reset();
+        }
+
+        function BounceDown()
+        {
+            vy = -vy;
+            tempVx = vx;
+            vx = 3 * vx / 7 - 4 * r * omega / 7;
+            omega = (-10 * tempVx / 7 - 3 * r * omega / 7) / r;
+        }
+
+        function BounceUp()
+        {
+            vy = -vy;
+            tempVx = vx;
+            vx = 3 * vx / 7 - 4 * r * -omega / 7;
+            omega = - (-10 * tempVx / 7 - 3 * r * -omega / 7) / r;
+        }
+
+        function Clear(ctx)
+        {
+            ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
+        }
+
+        function Update()
+        {
+            Clear(ctx);
+            Draw();
+            t += dt;
+            x += vx * dt;
+            y += vy * dt;
+            vy += g * dt;
+            theta += omega * dt;
+            if (y <= r)
+            {
+                BounceDown();
+            }
+            if (y >= 200 - r)
+            {
+                BounceUp();
+            }
+            setTimeout(Update, 5);
+        }
+
+        function Reset()
+        {
+            x = 0;
+            y = 100;
+            vy = 0;
+            theta = 0;
+            vx = parseFloat(document.getElementById("vxSlider").value);
+            omega = parseFloat(document.getElementById("wSlider").value);
+        }
+
+        function Draw()
+        {
+            ctx.beginPath();
+            ctx.moveTo(-c.width, yPos);
+            ctx.lineTo(c.width, yPos);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.arc(xPos + x, yPos + y, r, 0, Math.PI * 2);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(xPos + x, yPos + y);
+            ctx.lineTo(xPos + x + r * Math.cos(theta), yPos + y + r * Math.sin(theta));
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(xPos + x, yPos + y);
+            ctx.lineTo(xPos + x + r * Math.cos(theta + Math.PI / 2), yPos + y + r * Math.sin(theta + Math.PI / 2));
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(xPos + x, yPos + y);
+            ctx.lineTo(xPos + x + r * Math.cos(theta + Math.PI), yPos + y + r * Math.sin(theta + Math.PI));
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(xPos + x, yPos + y);
+            ctx.lineTo(xPos + x + r * Math.cos(theta - Math.PI / 2), yPos + y + r * Math.sin(theta - Math.PI / 2));
+            ctx.stroke();
+        }
+
+
+        window.addEventListener('resize', function(event) {
+            c.width = window.innerWidth;
+            c.height = window.innerHeight;
+            ctx.translate(c.width / 2, c.height / 2);
+            ctx.scale(2, -2);
+        }, true);
+
+        Update();
+
+        </script>
+    </body>
+    <p xmlns:cc="http://creativecommons.org/ns#" style="font-size: 1vw; bottom: 0px; position: absolute;">
+        This work is licensed under 
+        <a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"></a></p>
+</html>
\ No newline at end of file
diff --git a/8-66.html b/8-66.html
new file mode 100644
index 0000000..e06129e
--- /dev/null
+++ b/8-66.html
@@ -0,0 +1,299 @@
+<!--
+    This work is licensed under CC BY-NC-ND 4.0            
+    Link to license: http://creativecommons.org/licenses/by-nc-nd/4.0/
+    Attribute to Russell Georgi
+-->
+<html>
+    <head>
+        <title>
+            Exercise 8-66
+        </title>
+        <style>
+            html, body {
+                width:  100%;
+                height: 100%;
+                margin: 0px;
+                border: 0;
+                overflow: hidden;
+                display: block;
+            }
+
+            canvas {
+                position: absolute;
+            }
+
+            .greenSlider {
+                -webkit-appearance: none;
+                border-radius: 5px;
+                height: 10px;
+                background: #d3d3d3;
+                outline: none;
+                opacity: 0.7;
+                -webkit-transition: .2s;
+                transition: opacity .2s;
+
+            }
+
+            .greenSlider::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                appearance: none;
+                background: #000000;
+                border-radius: 50%;
+                width: 15px;
+                height: 15px;
+                cursor: pointer;
+            }
+
+            .greenSlider::-moz-range-thumb {
+                background: #000000;
+                border-radius: 50%;
+                width: 15px;
+                height: 15px;
+                cursor: pointer;
+            }
+        </style>
+    </head>
+    <body>       
+        <canvas id="myCanvas" width="1" height="1" style="border:1px solid #ffffff;">
+        Your browser does not support the HTML5 canvas tag.</canvas>
+        <div class="slidecontainer">
+            <t>Vx</t>
+            <input type="range" min="-200" max="200" value="20" step="0.1" class="greenSlider" id="vxSlider">
+            <br>
+            <br>
+            <t>&#969</t>
+            <input type="range" min="-50" max="50" value="20" step="0.1" class="greenSlider" id="wSlider">
+            <br>
+            <br>
+            <t>y</t>
+            <input type="range" min="20" max="300" value="110" step="0.1" class="greenSlider" id="ySlider">
+            <br>
+            <br>
+            <t>g</t>
+            <input type="range" min="0" max="1000" value="500" step="0.1" class="greenSlider" id="gSlider">
+            <br>
+            <br>
+            <t>h</t>
+            <input type="range" min="30" max="200" value="120" step="0.1" class="greenSlider" id="hSlider">
+            <br>
+            <br>
+            <t>vy</t>
+            <input type="range" min="-200" max="200" value="0" step="0.1" class="greenSlider" id="vySlider">
+            <br>
+            <br>
+            <t>r</t>
+            <input type="range" min="5" max="40" value="10" step="0.1" class="greenSlider" id="rSlider">
+        </div>
+        
+        <script>
+        var c = document.getElementById("myCanvas");
+        var ctx = c.getContext("2d");
+        c.width = window.innerWidth;
+        c.height = window.innerHeight;
+        //Time step
+        var dt = 0.002;
+        var t = 0;
+        var g = -500;
+        var y = 110;
+        var vy = 0;
+        var x = 0;
+        var vx = 20;
+        var h = 120;
+        var omega = 20;
+        var theta = 0;
+        var r = 10;
+        var positionsX = [0];
+        var positionsY = [110];
+        var canBounce = false;
+        var numBounces = 0;
+        var maxBounces = 3;
+        //Relative position of canvas
+        var xPos = 0;
+        var yPos = -120;
+        //Moves and scales canvas
+        ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2)
+        ctx.scale(2, -2);
+        Reset();
+
+        vxSlider.oninput = function()
+        {
+            vx = parseFloat(this.value);
+            Reset();
+        }
+
+        wSlider.oninput = function()
+        {
+            omega = parseFloat(this.value);
+            Reset();
+        }
+
+        ySlider.oninput = function()
+        {
+            y = parseFloat(this.value);
+            Reset();
+        }
+
+        gSlider.oninput = function()
+        {
+            g = -parseFloat(this.value);
+            Reset();
+        }
+
+        hSlider.oninput = function()
+        {
+            h = parseFloat(this.value);
+            Reset();
+        }
+
+        rSlider.oninput = function()
+        {
+            r = parseFloat(this.value);
+            Reset();
+        }
+
+        vySlider.oninput = function()
+        {
+            vy = parseFloat(this.value);
+            Reset();
+        }
+
+        function BounceDown()
+        {
+            vy = -vy;
+            tempVx = vx;
+            vx = 3 * vx / 7 - 4 * r * omega / 7;
+            omega = (-10 * tempVx / 7 - 3 * r * omega / 7) / r;
+        }
+
+        function BounceUp()
+        {
+            vy = -vy;
+            tempVx = vx;
+            vx = 3 * vx / 7 - 4 * r * -omega / 7;
+            omega = - (-10 * tempVx / 7 - 3 * r * -omega / 7) / r;
+        }
+
+        function Clear(ctx)
+        {
+            ctx.clearRect(-c.width, -c.height, c.width * 2, c.height * 2);
+        }
+
+        function Update()
+        {
+            Clear(ctx);
+            Draw();
+            t += dt;
+            x += vx * dt;
+            y += vy * dt;
+            vy += g * dt;
+            positionsX.push(x);
+            positionsY.push(y);
+            theta += omega * dt;
+            if (y <= r - 0.1 && canBounce)
+            {
+                BounceDown();
+                numBounces += 1;
+                if (numBounces >= maxBounces)
+                {
+                    canBounce = false;
+                }
+            }
+            if (y >= h + 0.1 - r && canBounce)
+            {
+                BounceUp();
+                numBounces += 1;
+                if (numBounces >= maxBounces)
+                {
+                    canBounce = false;
+                }
+            } else if (y < r + 1 && numBounces == 0)
+            {
+                canBounce = true;
+            }
+            setTimeout(Update, 5);
+        }
+
+        function Reset()
+        {
+            numBounces = 0;
+            x = 0;
+            y = parseFloat(document.getElementById("ySlider").value);
+            if (y > h - r)
+            {
+                canBounce = false;
+            } else
+            {
+                canBounce = true;
+            }
+            vy = parseFloat(document.getElementById("vySlider").value);
+            theta = 0;
+            vx = parseFloat(document.getElementById("vxSlider").value);
+            omega = parseFloat(document.getElementById("wSlider").value);
+            positionsX = [0];
+            positionsY = [y];
+        }
+
+        function Draw()
+        {
+            ctx.strokeStyle = "#000000";
+            ctx.beginPath();
+            ctx.moveTo(-c.width, yPos);
+            ctx.lineTo(c.width, yPos);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(-c.width, yPos + h);
+            ctx.lineTo(c.width, yPos + h);
+            ctx.stroke();
+            ctx.fillStyle = "#ffffff";
+            if (!canBounce)
+            {
+                ctx.beginPath();
+                ctx.arc(xPos + x, yPos + y, r + r, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            
+            ctx.beginPath();
+            ctx.arc(xPos + x, yPos + y, r, 0, Math.PI * 2);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(xPos + x, yPos + y);
+            ctx.lineTo(xPos + x + r * Math.cos(theta), yPos + y + r * Math.sin(theta));
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(xPos + x, yPos + y);
+            ctx.lineTo(xPos + x + r * Math.cos(theta + Math.PI / 2), yPos + y + r * Math.sin(theta + Math.PI / 2));
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(xPos + x, yPos + y);
+            ctx.lineTo(xPos + x + r * Math.cos(theta + Math.PI), yPos + y + r * Math.sin(theta + Math.PI));
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(xPos + x, yPos + y);
+            ctx.lineTo(xPos + x + r * Math.cos(theta - Math.PI / 2), yPos + y + r * Math.sin(theta - Math.PI / 2));
+            ctx.stroke();
+            ctx.strokeStyle = "#ee0000";
+            ctx.beginPath();
+            ctx.moveTo(xPos + positionsX[0], yPos + positionsY[0]);
+            for (i = 1; i < positionsX.length; i++)
+            {
+                ctx.lineTo(xPos + positionsX[i], yPos + positionsY[i]);
+            }
+            ctx.stroke();
+        }
+
+
+        window.addEventListener('resize', function(event) {
+            c.width = window.innerWidth;
+            c.height = window.innerHeight;
+            ctx.translate(c.width / 2, c.height / 2);
+            ctx.scale(2, -2);
+        }, true);
+
+        Update();
+
+        </script>
+    </body>
+    <p xmlns:cc="http://creativecommons.org/ns#" style="font-size: 1vw; bottom: 0px; position: absolute;">
+        This work is licensed under 
+        <a href="http://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"></a></p>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 78e609c..aaf74f6 100644
--- a/index.html
+++ b/index.html
@@ -184,6 +184,27 @@
                     <t>Other example problem from chapter 4</t>
                 </td>
             </tr>
+            <tr>
+                <th colspan = "2">
+                    <t>Chapter 8: Angular momentum part 1</t>
+                </th>
+            </tr>
+            <tr>
+                <td>
+                    <a href='8-20.html'>Problem 8-20</a>
+                </td>
+                <td>
+                    <t>Superball bouncing</t>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a href='8-66.html'>Exercises 8-66 & 8-77</a>
+                </td>
+                <td>
+                    <t>Superball bouncing under a table</t>
+                </td>
+            </tr>
         </table>
         <p xmlns:cc="http://creativecommons.org/ns#" >
             This work is licensed under 
