Poles to have Different Temperature (Ref: Axial Tilt suggestion) (#964)

* Initial Idea

* Changed Names:
Currently still only on NorthTemperature reliant, compadible version

* Restored Generation of Temperature

* Temperature Function found

* Version Bump

* Scuffed Saving solution

* Current Version(without the save changes)

* Globe Temperature Display

* Individual Regeneration of Temperatures

* Fixed Loading and Saving
New Maps save a Dummy 0 at settings[17]

* Final Version Bump
(currently no description for the Update)

---------

Co-authored-by: Azgaar <maxganiev@yandex.com>

index.html

@@ -2363,12 +2363,18 @@
               </label>
             </div>
             <div>
-              <i data-locked="0" id="lock_temperaturePole" class="icon-lock-open"></i>
               <label data-tip="Set temperature near poles">
-                <i>Poles:</i>
+                <i data-locked="0" id="lock_temperatureNorthPole" class="icon-lock-open"></i>
-                <input id="temperaturePoleInput" data-stored="temperaturePole" type="number" min="-50" max="50" />°C =
+                <i>North Pole</i>
-                <span id="temperaturePoleF"></span>°F
+                <input id="temperatureNorthPoleInput" data-stored="temperatureNorthPole" type="number" min="-50" max="50" />°C =
-                <input id="temperaturePoleOutput" data-stored="temperaturePole" type="range" min="-50" max="50" />
+                <span id="temperatureNorthPoleF"></span>°F
+                <input id="temperatureNorthPoleOutput" data-stored="temperatureNorthPole" type="range" min="-50" max="50" />
+                <br>
+                <i data-locked="0" id="lock_temperatureSouthPole" class="icon-lock-open"></i>
+                <i>South Pole</i>
+                <input id="temperatureSouthPoleInput" data-stored="temperatureSouthPole" type="number" min="-50" max="50" />°C =
+                <span id="temperatureSouthPoleF"></span>°F
+                <input id="temperatureSouthPoleOutput" data-stored="temperatureSouthPole" type="range" min="-50" max="50" />
               </label>
             </div>
             <div>
@@ -2427,13 +2433,13 @@
           <svg id="globe" width="22em" height="22em" viewBox="-20 -25 240 240">
             <defs>
               <linearGradient id="temperatureGradient" x1="0" x2="0" y1="0" y2="1">
-                <stop class="tempGradient90" offset="0%" stop-color="blue" />
+                <stop class="tempNorthGradient90" offset="0%" stop-color="blue" />
-                <stop class="tempGradient60" offset="16.6%" stop-color="green" />
+                <stop class="tempNorthGradient60" offset="16.6%" stop-color="green" />
-                <stop class="tempGradient30" offset="33.3%" stop-color="yellow" />
+                <stop class="tempNorthGradient30" offset="33.3%" stop-color="yellow" />
                 <stop class="tempGradient0" offset="50%" stop-color="red" />
-                <stop class="tempGradient30" offset="66.6%" stop-color="yellow" />
+                <stop class="tempSouthGradient30" offset="66.6%" stop-color="yellow" />
-                <stop class="tempGradient60" offset="83.3%" stop-color="green" />
+                <stop class="tempSouthGradient60" offset="83.3%" stop-color="green" />
-                <stop class="tempGradient90" offset="100%" stop-color="blue" />
+                <stop class="tempSouthGradient90" offset="100%" stop-color="blue" />
               </linearGradient>
             </defs>
             <g id="globeNoteLines">
@@ -7891,14 +7897,14 @@
     <script src="modules/ui/stylePresets.js?v=1.89.11"></script>
 
     <script src="modules/ui/general.js?v=1.87.03"></script>
-    <script src="modules/ui/options.js?v=1.89.19"></script>
+    <script src="modules/ui/options.js?v=1.90.00"></script>
-    <script src="main.js?v=1.89.32"></script>
+    <script src="main.js?v=1.90.00"></script>
 
     <script defer src="modules/relief-icons.js"></script>
     <script defer src="modules/ui/style.js"></script>
     <script defer src="modules/ui/editors.js?v=1.89.35"></script>
     <script defer src="modules/ui/tools.js?v=1.89.27"></script>
-    <script defer src="modules/ui/world-configurator.js"></script>
+    <script defer src="modules/ui/world-configurator.js?v=1.90.00"></script>
     <script defer src="modules/ui/heightmap-editor.js?v=1.89.06"></script>
     <script defer src="modules/ui/provinces-editor.js?v=1.89.00"></script>
     <script defer src="modules/ui/biomes-editor.js"></script>
@@ -7934,8 +7940,8 @@
     <script defer src="libs/rgbquant.min.js"></script>
     <script defer src="libs/jquery.ui.touch-punch.min.js"></script>
 
-    <script defer src="modules/io/save.js?v=1.89.29"></script>
+    <script defer src="modules/io/save.js?v=1.90.00"></script>
-    <script defer src="modules/io/load.js?v=1.89.30"></script>
+    <script defer src="modules/io/load.js?v=1.90.00"></script>
     <script defer src="modules/io/cloud.js"></script>
     <script defer src="modules/io/export.js?v=1.89.17"></script>
     <script defer src="modules/io/formats.js"></script>

main.js

@@ -184,6 +184,8 @@ let options = {
   pinNotes: false,
   showMFCGMap: true,
   winds: [225, 45, 225, 315, 135, 315],
+  tempNorthPole: 0,
+  tempSouthPole: 0,
   stateLabelsMode: "auto"
 };
 let mapCoordinates = {}; // map coordinates on globe
@@ -1008,16 +1010,20 @@ function calculateTemperatures() {
   TIME && console.time("calculateTemperatures");
   const cells = grid.cells;
   cells.temp = new Int8Array(cells.i.length); // temperature array
-
   const tEq = +temperatureEquatorInput.value;
-  const tPole = +temperaturePoleInput.value;
+  const tNorthPole = +temperatureNorthPoleInput.value;
-  const tDelta = tEq - tPole;
+  const tSouthPole = +temperatureSouthPoleInput.value;
+  //Update Settings to match the slider(there may be a better solution)
+  options.tempSouthPole = +tSouthPole;
+  options.tempNorthPole = +tNorthPole;
+  const tNDelta = tEq - tNorthPole;
+  const tSDelta = tEq - tSouthPole;
   const int = d3.easePolyInOut.exponent(0.5); // interpolation function
 
   d3.range(0, cells.i.length, grid.cellsX).forEach(function (r) {
     const y = grid.points[r][1];
-    const lat = Math.abs(mapCoordinates.latN - (y / graphHeight) * mapCoordinates.latT); // [0; 90]
+    const lat = (mapCoordinates.latN - (y / graphHeight) * mapCoordinates.latT); // [-90; 90]
-    const initTemp = tEq - int(lat / 90) * tDelta;
+    const initTemp = tEq - (Math.max(rn(lat / 90, 2), 0) * tNDelta - Math.min(rn(lat / 90, 2), 0) * tSDelta);
     for (let i = r; i < r + grid.cellsX; i++) {
       cells.temp[i] = minmax(initTemp - convertToFriendly(cells.h[i]), -128, 127);
     }

modules/dynamic/auto-update.js

@@ -636,4 +636,10 @@ export function resolveVersionConflicts(version) {
       if (coa?.shield === "state") delete coa.shield;
     });
   }
+
+  if (version < 1.89) {
+    //May need a major bump
+    options.tempNorthPole = +temperatureNorthPoleInput.value;
+    options.tempSouthPole = +temperatureNorthPoleInput.value;
+  }
 }

modules/dynamic/export-json.js

@@ -109,7 +109,7 @@ function getSettings() {
     mapSize: mapSizeOutput.value,
     latitudeO: latitudeOutput.value,
     temperatureEquator: temperatureEquatorOutput.value,
-    temperaturePole: temperaturePoleOutput.value,
+    temperaturePole: 0, //Moved to options
     prec: precOutput.value,
     options: options,
     mapName: mapName.value,

modules/io/load.js

@@ -219,7 +219,7 @@ async function parseLoadedData(data) {
       if (settings[14]) mapSizeInput.value = mapSizeOutput.value = minmax(settings[14], 1, 100);
       if (settings[15]) latitudeInput.value = latitudeOutput.value = minmax(settings[15], 0, 100);
       if (settings[16]) temperatureEquatorInput.value = temperatureEquatorOutput.value = settings[16];
-      if (settings[17]) temperaturePoleInput.value = temperaturePoleOutput.value = settings[17];
+      if (settings[17]) temperatureNorthPoleInput.value = temperatureNorthPoleOutput.value = settings[17]; //Not used see options: only for compatibility
       if (settings[18]) precInput.value = precOutput.value = settings[18];
       if (settings[19]) options = JSON.parse(settings[19]);
       if (settings[20]) mapName.value = settings[20];
@@ -589,6 +589,8 @@ async function parseLoadedData(data) {
     // set options
     yearInput.value = options.year;
     eraInput.value = options.era;
+    temperatureNorthPoleOutput.value = temperatureNorthPoleInput.value = options.tempNorthPole;
+    temperatureSouthPoleOutput.value = temperatureSouthPoleInput.value = options.tempSouthPole;
     shapeRendering.value = viewbox.attr("shape-rendering") || "geometricPrecision";
 
     if (window.restoreDefaultEvents) restoreDefaultEvents();

modules/io/save.js

@@ -25,7 +25,7 @@ function getMapData() {
     mapSizeOutput.value,
     latitudeOutput.value,
     temperatureEquatorOutput.value,
-    temperaturePoleOutput.value,
+    0, //Dummy for tempNorthOutput.value
     precOutput.value,
     JSON.stringify(options),
     mapName.value,

modules/ui/options.js

@@ -612,8 +612,10 @@ function randomizeOptions() {
     tMin = -30; // temperature extremes
   if (randomize || !locked("temperatureEquator"))
     temperatureEquatorOutput.value = temperatureEquatorInput.value = rand(tMax - 10, tMax);
-  if (randomize || !locked("temperaturePole"))
+  if (randomize || !locked("temperatureNorthPole")) 
-    temperaturePoleOutput.value = temperaturePoleInput.value = rand(tMin, tMin + 30);
+    temperatureNorthPoleOutput.value = temperatureNorthPoleInput.value = rand(tMin, tMin + 30);
+  if (randomize || !locked("temperatureSouthPole"))
+    temperatureSouthPoleOutput.value = temperatureSouthPoleInput.value = rand(tMin, tMin + 30);
 
   // 'Units Editor' settings
   const US = navigator.language === "en-US";

modules/ui/world-configurator.js

@@ -107,12 +107,19 @@ function editWorld() {
   function updateGlobeTemperature() {
     const tEq = +document.getElementById("temperatureEquatorOutput").value;
     document.getElementById("temperatureEquatorF").innerHTML = rn((tEq * 9) / 5 + 32);
-    const tPole = +document.getElementById("temperaturePoleOutput").value;
+    const tNorthPole = +document.getElementById("temperatureNorthPoleOutput").value;
-    document.getElementById("temperaturePoleF").innerHTML = rn((tPole * 9) / 5 + 32);
+    document.getElementById("temperatureNorthPoleF").innerHTML = rn((tNorthPole * 9) / 5 + 32);
-    globe.selectAll(".tempGradient90").attr("stop-color", clr(1 - (tPole - tMin) / (tMax - tMin)));
+    const tSouthPole = +document.getElementById("temperatureSouthPoleOutput").value;
-    globe.selectAll(".tempGradient60").attr("stop-color", clr(1 - (tEq - ((tEq - tPole) * 2) / 3 - tMin) / (tMax - tMin)));
+    document.getElementById("temperatureSouthPoleF").innerHTML = rn((tSouthPole * 9) / 5 + 32);
-    globe.selectAll(".tempGradient30").attr("stop-color", clr(1 - (tEq - ((tEq - tPole) * 1) / 3 - tMin) / (tMax - tMin)));
+
+    //North to Equator to South
+    globe.select(".tempNorthGradient90").attr("stop-color", clr(1 - (tNorthPole - tMin) / (tMax - tMin)));
+    globe.select(".tempNorthGradient60").attr("stop-color", clr(1 - (tEq - ((tEq - tNorthPole) * 2) / 3 - tMin) / (tMax - tMin)));
+    globe.select(".tempNorthGradient30").attr("stop-color", clr(1 - (tEq - ((tEq - tNorthPole) * 1) / 3 - tMin) / (tMax - tMin)));
     globe.select(".tempGradient0").attr("stop-color", clr(1 - (tEq - tMin) / (tMax - tMin)));
+    globe.select(".tempSouthGradient30").attr("stop-color", clr(1 - (tEq - ((tEq - tSouthPole) * 1) / 3 - tMin) / (tMax - tMin)));
+    globe.select(".tempSouthGradient60").attr("stop-color", clr(1 - (tEq - ((tEq - tSouthPole) * 2) / 3 - tMin) / (tMax - tMin)));
+    globe.select(".tempSouthGradient90").attr("stop-color", clr(1 - (tSouthPole - tMin) / (tMax - tMin)));
   }
 
   function updateWindDirections() {

versioning.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.89.37"; // generator version, update each time
+const version = "1.90.00"; // generator version, update each time
 
 {
   document.title += " v" + version;