backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 09:41:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

burg temperature graph - corrections

Browse source
This commit is contained in:
Azgaar 2022-02-04 00:13:10 +03:00
parent ccb75570da
commit 5f0be0401e
3 changed files with 253 additions and 209 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -1990,7 +1990,7 @@
<div id="burgBody" style="padding-bottom: .3em">
<div style="display: flex; align-items: center">
<svg data-tip="Burg emblem. Click to edit" class="pointer" viewBox="0 0 200 200" width="13em" height="13em"><use id="burgEmblem"></use></svg>
<div>
<div style="display: grid; grid-auto-rows: minmax(1.6em, auto)">
<div id="burgProvinceAndState" style="font-style: italic; max-width: 16em"></div>
<div>
@ -2039,6 +2039,7 @@
<div class="label">Temperature:</div>
<span id="burgTemperature"></span>, like in
<span id="burgTemperatureLikeIn"></span>
<i id="burgTemperatureGraph" data-tip="Show temperature graph for the burg" class="icon-chart-area pointer"></i>
</div>
<div data-tip="Burg height above mean sea level">
@ -2085,7 +2086,6 @@
<button id="burglLegend" data-tip="Edit free text notes (legend) for this burg" class="icon-edit"></button>
<button id="burgLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
<button id="burgRemove" data-tip="Remove non-capital burg. Shortcut: Delete" class="icon-trash fastDelete"></button>
<button id="burgTemperatureGraph" data-tip="Shows the temperature graph in the burg" class="icon-chart-area"></button>
</div>
</div>

10
modules/ui/burg-editor.js
View file

@ -52,7 +52,7 @@ function editBurg(id) {
document.getElementById("burglLegend").addEventListener("click", editBurgLegend);
document.getElementById("burgLock").addEventListener("click", toggleBurgLockButton);
document.getElementById("burgRemove").addEventListener("click", removeSelectedBurg);
document.getElementById("burgTemperatureGraph").addEventListener("click", showTemperatureGraphs);
document.getElementById("burgTemperatureGraph").addEventListener("click", showTemperatureGraph);
function updateBurgValues() {
const id = +elSelected.attr("data-id");
@ -543,11 +543,11 @@ function editBurg(id) {
const name = elSelected.text();
editNotes("burg" + id, name);
}
function showTemperatureGraphs() {
const id = elSelected.attr("data-id");
showTGForBurg(id);
}
function showTemperatureGraph() {
const id = elSelected.attr("data-id");
showBurgTemperatureGraph(id);
}
function removeSelectedBurg() {
const id = +elSelected.attr("data-id");

162
modules/ui/temperature-graph.js
View file

@ -1,14 +1,14 @@
"use strict";
function showTGForBurg(id) {
function showBurgTemperatureGraph(id) {
const b = pack.burgs[id];
const lat = mapCoordinates.latN - (b.y / graphHeight) * mapCoordinates.latT;
const temperature = grid.cells.temp[pack.cells.g[b.cell]];
const prec = grid.cells.prec[pack.cells.g[b.cell]];
// prettier-ignore
const weights = [
[// Layer0
//IN0 IN1
[10.782752257744338, 2.7100404240962126],
[-2.8226802110591462, 51.62920138583541],
[-6.6250956268643835, 4.427939197315455],
@ -39,36 +39,39 @@ function showTGForBurg(id) {
let lastIn = In1;
let lstOut = [];
for (let levelN = 0; levelN < weights.length; levelN++) {
let layerN = weights[levelN];
const layerN = weights[levelN];
for (let i = 0; i < layerN.length; i++) {
lstOut[i] = 0;
for (let j = 0; j < layerN[i].length ; j++)
for (let j = 0; j < layerN[i].length; j++) {
lstOut[i] = lstOut[i] + lastIn[j] * layerN[i][j];
//Sigmoid
}
// sigmoid
lstOut[i] = 1 / (1 + Math.exp(-lstOut[i]));
}
lastIn = lstOut.slice(0);
}
//From [0,1] to [min,max]
//Standard deviation for average temperature for the year
// Standard deviation for average temperature for the year from [0,1] to [min,max]
const yearSig = lstOut[0] * 62.9466411977018 + 0.28613807855649165;
// Standard deviation for the difference between the minimum and maximum temperatures for the year
const yearDelTmpSig = (lstOut[1]*13.541688670361175+0.1414213562373084) > yearSig ? yearSig : (lstOut[1]*13.541688670361175+0.1414213562373084);
const yearDelTmpSig = lstOut[1] * 13.541688670361175 + 0.1414213562373084 > yearSig ? yearSig : lstOut[1] * 13.541688670361175 + 0.1414213562373084;
// Expected value for the difference between the minimum and maximum temperatures for the year
const yearDelTmpMu = lstOut[2] * 15.266666666666667 + 0.6416666666666663;
// Temperature change shape
//const formTmp = -Math.cos(data*2*Math.PI) / 2;
const delT = yearDelTmpMu/2+0.5*yearDelTmpSig/2;
const minT = temperature - ((yearSig+delT) > 15 ? (yearSig+delT) : 15);
const delT = yearDelTmpMu / 2 + (0.5 * yearDelTmpSig) / 2;
const minT = temperature - (yearSig + delT > 15 ? yearSig + delT : 15);
const maxT = temperature + (temperature - minT);
const chartWidth = window.innerWidth/2,
chartHeight = 300; // height of our land/sea profile, excluding the biomes data below
const xOffset = 80,
yOffset = 10; // this is our drawing starting point from top-left (y = 0) of SVG
// height of land/sea profile, excluding the biomes data below
const chartWidth = window.innerWidth / 2;
const chartHeight = 300;
// drawing starting point from top-left (y = 0) of SVG
const xOffset = 80;
const yOffset = 10;
const xscale = d3.scaleLinear().domain([0, 360]).range([0, chartWidth]);
const xscale_inv = d3.scaleLinear().domain([0, chartWidth]).range([0, 360]);
@ -78,64 +81,108 @@ function showTGForBurg(id) {
const dataAverTmp = [];
const dataMinTmp = [];
const dataMaxTmp = [];
for (let i = 0; i < 360; i++) {
let formTmp = Math.cos(i/360*2*Math.PI) / 2;
let formTmp = Math.cos((i / 360) * 2 * Math.PI) / 2;
if (lat > 0) formTmp = -formTmp;
const averT = formTmp * yearSig + temperature;
const delT = yearDelTmpMu/2+formTmp*yearDelTmpSig/2;
const delT = yearDelTmpMu / 2 + (formTmp * yearDelTmpSig) / 2;
dataAverTmp.push({x: xscale(i) + xOffset, y: yscale(averT) + yOffset});
dataMinTmp.push({x: xscale(i) + xOffset, y: yscale(averT - delT) + yOffset});
dataMaxTmp.push({x: xscale(i) + xOffset, y: yscale(averT + delT) + yOffset});
}
document.getElementById("epControls").style.visibility = "hidden";
drawGraph();
$("#alert").dialog({title: "Anual temperature in " + b.name, position: {my: "center", at: "center", of: "svg"}});
$("#elevationProfile").dialog({
title: "Seasonal temperature schedule",
resizable: false,
width: window.width,
close: closeTGForBurg,
position: {my: "left top", at: "left+20 bottom-500", of: window, collision: "fit"}
});
function drawGraph() {
alertMessage.innerHTML = "";
draw();
function draw() {
document.getElementById("elevationGraph").innerHTML = "";
const legendSize = 60;
const chart = d3
.select("#elevationGraph")
.select("#alertMessage")
.append("svg")
.attr("width", chartWidth + 120)
.attr("height", chartHeight + yOffset + legendSize)
.attr("id", "elevationSVG")
.attr("class", "epbackground");
// arrow-head definition
chart.append("defs").append("marker").attr("id", "arrowhead").attr("orient", "auto").attr("markerWidth", "2").attr("markerHeight", "4").attr("refX", "0.1").attr("refY", "2");
let Gen = d3.line().curve(d3.curveBasis).x((p) => p.x).y((p) => p.y);
// arrow-head definition
chart
.append("defs")
.append("marker")
.attr("id", "arrowhead")
.attr("orient", "auto")
.attr("markerWidth", "2")
.attr("markerHeight", "4")
.attr("refX", "0.1")
.attr("refY", "2");
let Gen = d3
.line()
.curve(d3.curveBasis)
.x(p => p.x)
.y(p => p.y);
//print graphs
chart.append("g").append("path").attr("d", Gen(dataAverTmp))
.attr("fill", "none").attr("stroke", "orange").on("mousemove", printVal).style("stroke-width", "2");
chart.append("g").append("path").attr("d", Gen(dataMinTmp))
.attr("fill", "none").attr("stroke", "blue").on("mousemove", printVal).style("stroke-width", "2");
chart.append("g").append("path").attr("d", Gen(dataMaxTmp))
.attr("fill", "none").attr("stroke", "red").on("mousemove", printVal).style("stroke-width", "2");
chart
.append("g")
.append("path")
.attr("d", Gen(dataAverTmp))
.attr("fill", "none")
.attr("stroke", "orange")
.on("mousemove", printVal)
.style("stroke-width", "2");
chart
.append("g")
.append("path")
.attr("d", Gen(dataMinTmp))
.attr("fill", "none")
.attr("stroke", "blue")
.on("mousemove", printVal)
.style("stroke-width", "2");
chart.append("g").append("path").attr("d", Gen(dataMaxTmp)).attr("fill", "none").attr("stroke", "red").on("mousemove", printVal).style("stroke-width", "2");
//print legend
chart.append("circle").attr("cx",chartWidth*1/4).attr("cy",chartHeight + yOffset + legendSize*0.8).attr("r", 4).style("fill", "red")
chart.append("text").attr("x", chartWidth*1/4+20).attr("y", chartHeight + yOffset + legendSize*0.8)
.text("Day temperature").style("font-size", "10px").attr("alignment-baseline","middle")
chart.append("circle").attr("cx",chartWidth*2/4).attr("cy",chartHeight + yOffset + legendSize*0.8).attr("r", 4).style("fill", "orange")
chart.append("text").attr("x", chartWidth*2/4+20).attr("y", chartHeight + yOffset + legendSize*0.8)
.text("Average daily temperature").style("font-size", "10px").attr("alignment-baseline","middle")
chart.append("circle").attr("cx",chartWidth*3/4).attr("cy",chartHeight + yOffset + legendSize*0.8).attr("r", 4).style("fill", "blue")
chart.append("text").attr("x", chartWidth*3/4+20).attr("y", chartHeight + yOffset + legendSize*0.8)
.text("Night temperature").style("font-size", "10px").attr("alignment-baseline","middle")
chart
.append("circle")
.attr("cx", (chartWidth * 1) / 4)
.attr("cy", chartHeight + yOffset + legendSize * 0.8)
.attr("r", 4)
.style("fill", "red");
chart
.append("text")
.attr("x", (chartWidth * 1) / 4 + 20)
.attr("y", chartHeight + yOffset + legendSize * 0.8)
.text("Day temperature")
.style("font-size", "10px")
.attr("alignment-baseline", "middle");
chart
.append("circle")
.attr("cx", (chartWidth * 2) / 4)
.attr("cy", chartHeight + yOffset + legendSize * 0.8)
.attr("r", 4)
.style("fill", "orange");
chart
.append("text")
.attr("x", (chartWidth * 2) / 4 + 20)
.attr("y", chartHeight + yOffset + legendSize * 0.8)
.text("Average daily temperature")
.style("font-size", "10px")
.attr("alignment-baseline", "middle");
chart
.append("circle")
.attr("cx", (chartWidth * 3) / 4)
.attr("cy", chartHeight + yOffset + legendSize * 0.8)
.attr("r", 4)
.style("fill", "blue");
chart
.append("text")
.attr("x", (chartWidth * 3) / 4 + 20)
.attr("y", chartHeight + yOffset + legendSize * 0.8)
.text("Night temperature")
.style("font-size", "10px")
.attr("alignment-baseline", "middle");
//print title
let timerId = setTimeout(() => chart.attr("data-tip", "Seasonal temperature schedule"), 1000);
@ -145,7 +192,7 @@ function showTGForBurg(id) {
function printVal() {
let m = d3.mouse(this);
let tmp = convertTemperature(yscale_inv(m[1] - yOffset).toFixed(1));
let month = months[parseInt(xscale_inv(m[0]-xOffset)/360*12)];
let month = months[parseInt((xscale_inv(m[0] - xOffset) / 360) * 12)];
chart.attr("data-tip", tmp + " in " + month);
clearTimeout(timerId);
timerId = setTimeout(() => chart.attr("data-tip", "Seasonal temperature schedule"), 1000);
@ -155,7 +202,7 @@ function showTGForBurg(id) {
.axisBottom(xscale)
.ticks(10)
.tickFormat(function (d) {
return months[parseInt(d/360*12)];
return months[parseInt((d / 360) * 12)];
});
const yAxis = d3
.axisLeft(yscale)
@ -195,7 +242,9 @@ function showTGForBurg(id) {
if (minT < 0 && maxT > 0) {
//add zero lv
chart.append("g").append("line")
chart
.append("g")
.append("line")
.attr("x1", xscale(0) + xOffset)
.attr("y1", yscale(0) + yOffset)
.attr("x2", xscale(360) + xOffset)
@ -212,9 +261,4 @@ function showTGForBurg(id) {
.attr("transform", "translate(" + xOffset + "," + yOffset + ")")
.call(yGrid);
}
function closeTGForBurg() {
document.getElementById("epControls").style.visibility = "visible";
document.getElementById("elevationGraph").innerHTML = "";
modules.elevation = false;
}
}