polygon collision style change

BurntWaffleCake · Dec 11, 2023 · b2c9c08 · b2c9c08
1 parent 57a812e
commit b2c9c08
Show file tree

Hide file tree

Showing 6 changed files with 909 additions and 890 deletions.
diff --git a/projects/Physics/BallCollisionOptimization/index.html b/projects/Physics/BallCollisionOptimization/index.html
@@ -78,6 +78,22 @@ <h3>Pros and Cons</h3>
           simulate fluids and particle interactions.
         </p>
 
+        <p
+          class="codepen"
+          data-height="500"
+          data-default-tab="html,result"
+          data-slug-hash="RwvdGxZ"
+          data-user="WaffleCake-the-decoder"
+          style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em"
+        >
+          <span
+            >See the Pen <a href="https://codepen.io/WaffleCake-the-decoder/pen/RwvdGxZ"> Untitled</a> by WaffleCake (<a href="https://codepen.io/WaffleCake-the-decoder">@WaffleCake-the-decoder</a>)
+            on <a href="https://codepen.io">CodePen</a>.</span
+          >
+        </p>
+        <a href="./massBall/index.html" target="_blank" style="color: white">Click to open in new tab</a>
+        <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+
         <h3>Recursive Spatial Partitioning</h3>
         <p>
           The term "recursive spatial partitioning" can be attributed to a number of different types of spatial partitioning. Some of these include binary partitioning, octal and quad trees, and an

diff --git a/projects/Physics/massBall/index.html → ...CollisionOptimization/massBall/index.html b/projects/Physics/massBall/index.html → ...CollisionOptimization/massBall/index.html
@@ -18,6 +18,7 @@
       height: 100%;
       width: 100%;
     }
+
     body {
       display: flex;
       background-color: black;
@@ -31,13 +32,6 @@
       color: white;
     }
 
-    a {
-      position: absolute;
-      bottom: 15px;
-      left: 15px;
-      font-size: x-large;
-    }
-
     #container {
       display: flex;
       justify-content: center;
@@ -48,45 +42,44 @@
     }
 
     form {
-      width: 10rem;
       padding: 1rem;
     }
 
     #source {
-      width: 50%;
-      /* margin-left: auto; */
-      /* margin-right: auto; */
+      aspect-ratio: 1;
+      height: 100%;
+      box-sizing: border-box;
       align-self: center;
-      background-color: white;
       border: 3px solid white;
       flex-shrink: 1;
     }
 
     options {
+      color: white;
+      max-width: 30rem;
       position: absolute;
       top: 1rem;
       left: 1rem;
     }
 
     #instructions {
       display: none;
-      color: white;
 
       padding: 1rem;
       margin: 0;
-      width: 10rem;
+      max-width: 50%;
     }
 
     #settings {
       display: none;
-      color: white;
     }
   </style>
 
   <body>
     <options>
       <button id="enableSettings">Settings</button>
       <button id="enableInstructions">Instructions</button>
+
       <form id="settings">
         <p id="simulation-fps">FPS:</p>
         <label for="gravity-input">Gravity:</label>
@@ -104,12 +97,13 @@
         <input autocomplete="off" type="button" value="Clear" id="simulation-clear" /><br /><br />
         <input autocomplete="off" type="button" value="Reset" id="simulation-reset" /><br /><br />
       </form>
+
       <ul id="instructions">
         Instructions:
         <li>Click to add more balls</li>
         <li>Press Space to launch balls up</li>
-        <li>Restitiution describes how bouncy the balls are</li>
-        <li>Simulation Substeps changes the number of calculation<br />cycles per frame, increase to add more stability to the simulation in exchange of performance</li>
+        <li>Restitution describes how bouncy the balls are</li>
+        <li>Simulation Substeps changes the number of calculation cycles per frame, increase to add more stability to the simulation in exchange of performance</li>
       </ul>
     </options>