terrain-generator

commit c6f22171057e786acc6f7dd8783f8534ba8429b7
parent 13cdb00a3c3fe433a3a6454ccb4c4f416aa5c1b0
Author: tongong <tongong@gmx.net>
Date:   Fri, 30 Aug 2019 18:59:42 +0200

added sliders in the settings menu

Diffstat:
M
index.html
 | 
12
++++++++++++
M
scripts/interface.js
 | 
3
+--
M
scripts/main.js
 | 
25
+++++++------------------
M
styles.css
 | 
29
++++++++++++++++++++++++++++-

4 files changed, 48 insertions(+), 21 deletions(-)
diff --git a/index.html b/index.html
@@ -26,6 +26,18 @@
         </svg>
     </div>
     <div id="settings">
+        <p>VIEWANGLE</p>
+        <div class="slidecontainer">
+            <input type="range" min="0" max="100" value="50" class="slider" id="viewSlider">
+        </div>
+        <p>RANDOMNESS</p>
+        <div class="slidecontainer">
+            <input type="range" min="0" max="100" value="50" class="slider" id="randomSlider">
+        </div>
+        <p>SIZE</p>
+        <div class="slidecontainer">
+            <input type="range" min="1" max="8" value="4" class="slider" id="sizeSlider">
+        </div>
         <p id="tongong">made by <a href="https://github.com/tongong">@tongong</a></p>
     </div>
 </body>
diff --git a/scripts/interface.js b/scripts/interface.js
@@ -11,8 +11,7 @@ function initIconAnimation() {
         this.classList.remove("animated");
     }, false);
     reload.addEventListener("click", function() {
-            refreshTime = millis();
-            //state = 4;
+        refreshTime = millis();
     }, false);
     reload.addEventListener('touchstart', function() {
         this.classList.add("animated");
diff --git a/scripts/main.js b/scripts/main.js
@@ -6,9 +6,9 @@ var CENTER;
 var ANGLE;
 var SIZE;
 
-var RANDOM_FACTOR = 0.5;
-var MAX_STATE = 4;
-var ANGLE_FACTOR = 1.5;
+var RANDOM_FACTOR = 0.5; // 0 - 1
+var MAX_STATE = 4; // 1 - 8
+var ANGLE_FACTOR = 1.5; // 0.5 - 2.5
 
 var state;
 var statePercentage = 0;
@@ -87,25 +87,14 @@ function draw() {
             }
             break;
         case 2:
-            statePercentage = time() / 10 - 300;
+            statePercentage = time() / 10 - 100 * (3 + stateNumber);
             currentField.transform(endField, 0.1);
-            currentField.render(SIZE, SIZE, getRotation());
-            if (statePercentage >= 100) {
-                state = 3;
-                statePercentage = 0;
-                currentField = currentField.scaleUp();
-                endField = currentField.addRandom(RANDOM_FACTOR);
-            }
-            break;
-        case 3:
-            statePercentage = time() / 10 - 100 * (4 + stateNumber);
-            currentField.transform(endField, 0.1);
-            currentField.render(SIZE / pow(2, stateNumber + 1), SIZE, getRotation());
-            if (statePercentage >= 100 && stateNumber < MAX_STATE - 2) {
+            currentField.render(SIZE / pow(2, stateNumber), SIZE, getRotation());
+            if (statePercentage >= 100 && stateNumber < MAX_STATE - 1) {
                 statePercentage = 0;
                 stateNumber++;
                 currentField = currentField.scaleUp();
-                endField = currentField.addRandom(pow(RANDOM_FACTOR, stateNumber + 1));
+                endField = currentField.addRandom(pow(RANDOM_FACTOR, stateNumber));
             }
             break;
     }
diff --git a/styles.css b/styles.css
@@ -45,7 +45,7 @@
     position: absolute;
     top: 50px;
     width: 270px;
-    height: 270px;
+    height: 250px;
     background-color: #000000;
     border-radius: 20px;
     padding: 15px;
@@ -99,4 +99,31 @@ a:before {
 
 a:hover:before {
     transform: translateX(0);
+}
+
+.slider {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 10px;
+    border-radius: 5px;
+    background: #ffffff;
+    outline: none;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: white;
+    border: none;
+}
+
+.slider::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: white;
+    border: none;
 }
 \ No newline at end of file