add compress and reset for segments

public/data/images/compress.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M180.001-424.617v-59.999h599.998v59.999H180.001Zm0-115.384V-600h599.998v59.999H180.001Zm270 440v-146.463l-74.001 74-42.153-42.152L480-360.769l146.153 146.153L584-172.464l-74.001-72.77v145.233h-59.998ZM480-663.848 333.847-810.001 376-852.154l74.001 74.001v-146.463h59.998v146.463L584-852.154l42.153 42.153L480-663.848Z"/></svg>

public/data/scripts/ts/manager.ts

@@ -7,6 +7,8 @@ class Manager {
 
     playing = false;
 
+    static Size = 20;
+
     constructor() {
         p.colorMode(p.HSB, 100);
         let count = 100;
@@ -54,6 +56,7 @@ class Manager {
             data(){
                 return {
                     segmentCount: 1,
+                    maxSegmentCount: 30,
                     masses: [],
                     lengths: [],
                     startAngle: 90,
@@ -70,12 +73,27 @@ class Manager {
                 add() {
 
                 },
+                resetMasses(){
+                    for (let i = 0; i < this.maxSegmentCount; i++)
+                        this.masses[i] = 1;
+                },
+                resetLengths() {
+                    for (let i = 0; i < this.maxSegmentCount; i++)
+                        this.lengths[i] = 1;
+                },
+                normalize(){
+                    let L: [number] = this.lengths;
+                    let sum = L.slice(0, this.segmentCount).reduce((p, n) => p + n);
+                    let maxLength = Manager.Size / 2;
+                    let factor = maxLength / sum;
+
+                    for (let i = 0; i < this.segmentCount; i++)
+                        this.lengths[i] *= factor;
+                }
             },
             mounted() {
-                for (let i = 0; i < 20; i++){
+                this.resetMasses();
-                    this.masses.push(1);
+                this.resetLengths();
-                    this.lengths.push(1);
-                }
             },
             name: "Preparation"
         }).mount("#preparation");

public/index.html

@@ -19,7 +19,7 @@
                     <legend>Preparation</legend>
                     <label>
                         Segments: {{ segmentCount }}
-                        <input type="range" v-model.number="segmentCount" min="1" max="20" step="1">
+                        <input type="range" v-model.number="segmentCount" min="1" max="30" step="1">
                     </label>
                     <div id="segment_view">
                         <span id="segment_header_mass">Mass</span><span id="segment_header_length">Length</span>
@@ -28,9 +28,14 @@
                             <span class="segment_label">{{ masses[i - 1] }}kg</span>
                             <input type="range" v-model.number="masses[i - 1]" min="0.1" max="10" step=".1">
                             <span class="segment_label">{{ lengths[i - 1] }}m</span>
-                            <input type="range" v-model.number="lengths[i - 1]" min="0.1" max="5" step=".1">
+                            <input type="range" v-model.number="lengths[i - 1]" min="0.1" max="10" step=".1">
                         </template>
                     </div>
+                    <div class="horizontal_group">
+                        <button class="reset_segments_btn" @click="resetMasses" title="Reset masses to 1"></button>
+                        <button id="normalize_btn" @click="normalize" title="Normalize lengths to fit screen"></button>
+                        <button class="reset_segments_btn" @click="resetLengths" title="Reset lengths to 1"></button>
+                    </div>
                     <label>
                         Starting Angle: {{startAngle}}°
                         <input type="range" v-model.number="startAngle" min="0" max="360" step="1">
@@ -39,39 +44,32 @@
                         Color:
                         <input type="color" v-model="color">
                     </label>
-                    <br>
                     <label>
                         <input type="checkbox" v-model="multiple">
                         Add multiple
                     </label>
-                    <br>
                     <template v-if="multiple">
                         <label>
                             <input type="checkbox" v-model="rainbow">
                             Use rainbow coloring
                         </label>
-                        <br><br>
                         <label>
-                            Add Count: {{pendulumCount}}
+                            Count: {{pendulumCount}}
                             <input type="range" v-model.number="pendulumCount" min="10" max="250" step="10">
                         </label>
                         <span>Property to change slightly:</span>
-                        <br>
                         <label>
                             <input type="radio" value="angle" v-model="changeProperty">
                             Starting Angle
                         </label>
-                        <br>
                         <label>
                             <input type="radio" value="mass" v-model="changeProperty">
                             Specific Mass
                         </label>
-                        <br>
                         <label>
                             <input type="radio" value="length" v-model="changeProperty">
                             Specific Length
                         </label>
-                        <br><br>
                         <label v-show="changeProperty === 'mass' || changeProperty === 'length'">
                             Index: {{ changeIndex }}
                             <input type="range" v-model.number="changeIndex" min="0" :max="segmentCount - 1" step="1">

public/styles.css

@@ -75,14 +75,16 @@ body {
 fieldset {
     border-radius: 5px;
     margin: 10px;
+    display: flex;
+    flex-direction: column;
 }
 
-fieldset > legend {
+fieldset > * {
-    font-size: 25px;
+    margin: 5px 0;
 }
 
-input {
+fieldset > legend {
-    margin: 5px;
+    font-size: 25px;
 }
 
 #preparation {
@@ -109,14 +111,14 @@ input {
 }
 
 button {
-    margin-top: 10px;
     width: 100%;
-    height: 50px;
+    height: 40px;
     border: 3px solid black;
     border-radius: 5px;
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
+    flex-shrink: 0;
 }
 button:hover{
     filter: brightness(80%);
@@ -125,6 +127,27 @@ button:active {
     filter: brightness(60%);
 }
 
+.horizontal_group {
+    display: flex;
+    justify-content: space-between;
+}
+.horizontal_group > * {
+    width: 32%;
+}
+
+#normalize_btn {
+    background-image: url("data/images/compress.svg");
+    background-size: 50% 80%;
+    background-color: #cbcbcb;
+    border-color: #9a9a9a;
+}
+
+.reset_segments_btn {
+    background-image: url("data/images/refresh.svg");
+    background-color: #cbcbcb;
+    border-color: #9a9a9a;
+}
+
 #add_btn{
     border-color: #007a00;
     background-color: #d3ffd3;