mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-16 17:31:24 +01:00
v. 0.59.13b
This commit is contained in:
Azgaar
parent
b1309eae71
commit
2f66891ecf
3 changed files with 49 additions and 20 deletions
28
index.html
28
index.html
|
|
@ -30,10 +30,9 @@
|
|||
<script src="libs/jquery-ui.min.js"></script>
|
||||
<script src="libs/polylabel.min.js"></script>
|
||||
<script src="libs/quantize.min.js" defer></script>
|
||||
<script src="libs/d3-hexbin.v0.2.min.js" defer></script>
|
||||
<script src="libs/jquery.ui.touch-punch.min.js" defer></script>
|
||||
<link rel="stylesheet" type="text/css" href="index.css?version=0.59.10b"/>
|
||||
<link rel="stylesheet" type="text/css" href="icons.css?version=0.59.10b"/>
|
||||
<link rel="stylesheet" type="text/css" href="index.css?version=0.59.12b"/>
|
||||
<link rel="stylesheet" type="text/css" href="icons.css?version=0.59.12b"/>
|
||||
<link rel="stylesheet" type="text/css" href="libs/jquery-ui.css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -195,18 +194,18 @@
|
|||
</select>
|
||||
<p>Displayed layers. Drag to move, click to toggle</p>
|
||||
<ul id="mapLayers">
|
||||
<li onmouseover="tip('Toggle Ocean pattern')" id="toggleOcean" onclick="$('#oceanPattern').fadeToggle()" class="solid">Ocean</li>
|
||||
<li onmouseover="tip('Toggle Heightmap')" id="toggleHeight" class="buttonoff">Heightmap</li>
|
||||
<li onmouseover="tip('Toggle Ocean pattern (see Style tab for styling)')" id="toggleOcean" onclick="$('#oceanPattern').fadeToggle()" class="solid">Ocean</li>
|
||||
<li onmouseover="tip('Toggle Heightmap (see Style tab for styling and Customize for editting)')" id="toggleHeight" class="buttonoff">Heightmap</li>
|
||||
<li onmouseover="tip('Toggle Grid')" id="toggleGrid" class="buttonoff" onclick="$('#grid').fadeToggle()">Grid</li>
|
||||
<li onmouseover="tip('Toggle Overlay (overlay type can be set in Style tab)')" id="toggleOverlay" class="buttonoff">Overlay</li>
|
||||
<li onmouseover="tip('Toggle Cultural map (does not work good when counties layer is on)')" id="toggleCultures" class="buttonoff">Cultures</li>
|
||||
<li onmouseover="tip('Toggle Routes')" id="toggleRoutes" onclick="$('#routes').fadeToggle()">Routes</li>
|
||||
<li onmouseover="tip('Toggle Rivers')" id="toggleRivers" onclick="$('#rivers').fadeToggle()">Rivers</li>
|
||||
<li onmouseover="tip('Toggle Countries')" id="toggleCountries">Countries</li>
|
||||
<li onmouseover="tip('Toggle Countries (open Customize tab for editting)')" id="toggleCountries">Countries</li>
|
||||
<li onmouseover="tip('Toggle Borders')" id="toggleBorders" onclick="$('#borders').fadeToggle()">Borders</li>
|
||||
<li onmouseover="tip('Toggle Relief icons')" id="toggleRelief" onclick="$('#terrain').fadeToggle()">Relief</li>
|
||||
<li onmouseover="tip('Toggle Labels')" id="toggleLabels" onclick="$('#labels').fadeToggle()">Labels</li>
|
||||
<li onmouseover="tip('Toggle Icons')" id="toggleIcons" onclick="$('#icons').fadeToggle()">Icons</li>
|
||||
<li onmouseover="tip('Toggle Relief icons (draft version)')" id="toggleRelief" onclick="$('#terrain').fadeToggle()">Relief</li>
|
||||
<li onmouseover="tip('Toggle Labels (label groups can be toggled separately in Style tab)')" id="toggleLabels" onclick="$('#labels').fadeToggle()">Labels</li>
|
||||
<li onmouseover="tip('Toggle Burg icons')" id="toggleIcons" onclick="$('#icons').fadeToggle()">Icons</li>
|
||||
</ul>
|
||||
<div id="layoutCheckboxes">
|
||||
<input id="toggleTooltips" class="checkbox" type="checkbox" checked onclick="$('#tooltip').fadeToggle()">
|
||||
|
|
@ -246,12 +245,13 @@
|
|||
<div id="styleOverlay">
|
||||
<br><span>Ensure Overlay layer is active (see Layout tab)</span><br>
|
||||
<br>Overlay type: <select id="styleOverlayType" class="pureInput">
|
||||
<option value="hex" selected>Hex grid</option>
|
||||
<option value="pointyHex" selected>Hex grid (pointy)</option>
|
||||
<option value="flatHex">Hex grid (flat)</option>
|
||||
<option value="square">Square grid</option>
|
||||
<option value="windrose">Wind rose</option>
|
||||
</select><br>
|
||||
<br>Size: <input id="styleOverlaySize" type="range" min="2" max="20" step="0.2" value="5">
|
||||
<output id="styleOverlaySizeOutput">5</output>
|
||||
<br>Size: <input id="styleOverlaySize" type="range" min="2" max="50" step="0.1" value="10">
|
||||
<output id="styleOverlaySizeOutput">10</output>
|
||||
</div>
|
||||
<div id="styleOcean">
|
||||
<br>Elements:
|
||||
|
|
@ -292,6 +292,7 @@
|
|||
<br>Radius: <button class="whiteButton" onmouseover="tip('Multiply Radius by 1.1')" id="styleFillPlus">+</button><button class="whiteButton" onmouseover="tip('Multiply Radius by 0.9')" id="styleFillMinus">-</button>
|
||||
<span> Stroke: </span><button class="whiteButton" onmouseover="tip('Multiply Stroke-width by 1.1')" id="styleStrokePlus">+</button><button class="whiteButton" onmouseover="tip('Multiply Stroke-width by 0.9')" id="styleStrokeMinus">-</button>
|
||||
</div>
|
||||
|
||||
<div id="styleOpacity">
|
||||
<br>Opacity: <input id="styleOpacityInput" type="range" min="0" max="1" step="0.01" value="1">
|
||||
<output id="styleOpacityOutput">1</output>
|
||||
|
|
@ -309,7 +310,6 @@
|
|||
<option value="url(#outline)">Outline</option>
|
||||
<option value="url(#pencil)">Pencil</option>
|
||||
<option value="url(#turbulence)">Turbulence</option>
|
||||
<option value="url(#water)">Water</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="styleScheme">
|
||||
|
|
@ -1152,5 +1152,5 @@
|
|||
<input type="file" accept=".txt" id="namesbaseToLoad">
|
||||
</div>
|
||||
|
||||
<script src="script.js?version=0.59.10b"></script>
|
||||
<script src="script.js?version=0.59.12b"></script>
|
||||
</body>
|
||||
|
|
|
|||
2
libs/d3-hexbin.v0.2.min.js
vendored
2
libs/d3-hexbin.v0.2.min.js
vendored
|
|
@ -1,2 +0,0 @@
|
|||
// https://github.com/d3/d3-hexbin Version 0.2.2. Copyright 2017 Mike Bostock.
|
||||
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(n.d3=n.d3||{})}(this,function(n){"use strict";function t(n){return n[0]}function r(n){return n[1]}var e=Math.PI/3,u=[0,e,2*e,3*e,4*e,5*e],o=function(){function n(n){var t,r={},e=[],u=n.length;for(t=0;t<u;++t)if(!isNaN(i=+d.call(null,o=n[t],t,n))&&!isNaN(c=+p.call(null,o,t,n))){var o,i,c,s=Math.round(c/=f),h=Math.round(i=i/a-(1&s)/2),l=c-s;if(3*Math.abs(l)>1){var v=i-h,M=h+(i<h?-1:1)/2,x=s+(c<s?-1:1),g=i-M,m=c-x;v*v+l*l>g*g+m*m&&(h=M+(1&s?1:-1)/2,s=x)}var y=h+"-"+s,j=r[y];j?j.push(o):(e.push(j=r[y]=[o]),j.x=(h+(1&s)/2)*a,j.y=s*f)}return e}function o(n){var t=0,r=0;return u.map(function(e){var u=Math.sin(e)*n,o=-Math.cos(e)*n,i=u-t,a=o-r;return t=u,r=o,[i,a]})}var i,a,f,c=0,s=0,h=1,l=1,d=t,p=r;return n.hexagon=function(n){return"m"+o(null==n?i:+n).join("l")+"z"},n.centers=function(){for(var n=[],t=Math.round(s/f),r=Math.round(c/a),e=t*f;e<l+i;e+=f,++t)for(var u=r*a+(1&t)*a/2;u<h+a/2;u+=a)n.push([u,e]);return n},n.mesh=function(){var t=o(i).slice(0,4).join("l");return n.centers().map(function(n){return"M"+n+"m"+t}).join("")},n.x=function(t){return arguments.length?(d=t,n):d},n.y=function(t){return arguments.length?(p=t,n):p},n.radius=function(t){return arguments.length?(i=+t,a=2*i*Math.sin(e),f=1.5*i,n):i},n.size=function(t){return arguments.length?(c=s=0,h=+t[0],l=+t[1],n):[h-c,l-s]},n.extent=function(t){return arguments.length?(c=+t[0][0],s=+t[0][1],h=+t[1][0],l=+t[1][1],n):[[c,s],[h,l]]},n.radius(1)};n.hexbin=o,Object.defineProperty(n,"__esModule",{value:!0})});
|
||||
39
script.js
39
script.js
|
|
@ -4774,9 +4774,11 @@ function fantasyMap() {
|
|||
if (overlay.selectAll("*").size() === 0) {
|
||||
var type = styleOverlayType.value;
|
||||
var size = +styleOverlaySize.value;
|
||||
if (type === "hex") {
|
||||
var hexbin = d3.hexbin().radius(size).size([svgWidth, svgHeight]);
|
||||
overlay.append("path").attr("d", round(hexbin.mesh(), 0));
|
||||
if (type === "pointyHex" || type === "flatHex") {
|
||||
let points = getHexGridPoints(size, type);
|
||||
let hex = "m" + getHex(size, type).slice(0, 4).join("l");
|
||||
let d = points.map(function(p) {return "M" + p + hex;}).join("");
|
||||
overlay.append("path").attr("d", d);
|
||||
} else if (type === "square") {
|
||||
var x = d3.range(size, svgWidth, size);
|
||||
var y = d3.range(size, svgHeight, size);
|
||||
|
|
@ -4799,6 +4801,35 @@ function fantasyMap() {
|
|||
}
|
||||
}
|
||||
|
||||
function getHex(radius, type) {
|
||||
let x0 = 0, y0 = 0;
|
||||
let s = type === "pointyHex" ? 0 : Math.PI / -6;
|
||||
let thirdPi = Math.PI / 3;
|
||||
let angles = [s, s + thirdPi, s + 2 * thirdPi, s + 3 * thirdPi, s + 4 * thirdPi, s + 5 * thirdPi];
|
||||
return angles.map(function(angle) {
|
||||
var x1 = Math.sin(angle) * radius,
|
||||
y1 = -Math.cos(angle) * radius,
|
||||
dx = x1 - x0,
|
||||
dy = y1 - y0;
|
||||
x0 = x1, y0 = y1;
|
||||
return [dx, dy];
|
||||
});
|
||||
}
|
||||
|
||||
function getHexGridPoints(size, type) {
|
||||
let points = [];
|
||||
const rt3 = Math.sqrt(3);
|
||||
const off = type === "pointyHex" ? rt3 * size / 2 : size * 3 / 2;
|
||||
const ySpace = type === "pointyHex" ? size * 3 / 2 : rt3 * size / 2;
|
||||
const xSpace = type === "pointyHex" ? rt3 * size : size * 3;
|
||||
for (let y = 0, l = 0; y < graphHeight; y += ySpace, l++) {
|
||||
for (let x = l % 2 ? 0 : off; x < graphWidth; x += xSpace) {
|
||||
points.push([x, y]);
|
||||
}
|
||||
}
|
||||
return points;
|
||||
}
|
||||
|
||||
// clean data to get rid of redundand info
|
||||
function cleanData() {
|
||||
console.time("cleanData");
|
||||
|
|
@ -9071,7 +9102,7 @@ function fantasyMap() {
|
|||
if (!$("#toggleOverlay").hasClass("buttonoff")) toggleOverlay();
|
||||
});
|
||||
|
||||
$("#styleOverlaySize").on("input", function() {
|
||||
$("#styleOverlaySize").on("change", function() {
|
||||
styleOverlaySizeOutput.value = this.value;
|
||||
overlay.selectAll("*").remove();
|
||||
if (!$("#toggleOverlay").hasClass("buttonoff")) toggleOverlay();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue