Skip to content

Instantly share code, notes, and snippets.

@Azgaar
Last active November 22, 2023 14:26
Show Gist options
  • Star 21 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save Azgaar/b845ce22ea68090d43a4ecfb914f51bd to your computer and use it in GitHub Desktop.
Save Azgaar/b845ce22ea68090d43a4ecfb914f51bd to your computer and use it in GitHub Desktop.
Fantasy Map Generator
license: gpl-3.0
height: 570
border: no

Azgaar's Fantasy Map Generator demo, v. 0.5b. Based on D3 Voronoi diagram rendered to a scalable svg.

Project goal is a procedurally generated map for my Medieval Dynasty simulator. Map should be interactive, scalable, fast and plausible. There should be enought space to place at least 500 manors within 7 regions. The imagined area is about 200.000 km2.

Click on the arrow to open the Options. Click on New map to genarate a random map based on options setup. Check out the project wiki for guidance.

This is a demo version, some new cool features are developed, but not yet deployed. Details are covered in my blog Fantasy Maps for fun and glory. Comments and ideas are highly welcomed, kindly contact me via email. For bug reports and change requests please use the main project issues page.

Inspiration:

@font-face {
font-family: 'Architects Daughter';
font-style: normal;
font-weight: 400;
src: local('Architects Daughter Regular'), local('ArchitectsDaughter-Regular'), url(https://fonts.gstatic.com/s/architectsdaughter/v8/RXTgOOQ9AAtaVOHxx0IUBM3t7GjCYufj5TXV5VnA2p8.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Bangers';
font-style: normal;
font-weight: 400;
src: local('Bangers Regular'), local('Bangers-Regular'), url(https://fonts.gstatic.com/s/bangers/v10/yJQgrSMUoqRj-0SbnQsv4g.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 400;
src: local('Bitter Regular'), local('Bitter-Regular'), url(https://fonts.gstatic.com/s/bitter/v12/zfs6I-5mjWQ3nxqccMoL2A.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Chewy';
font-style: normal;
font-weight: 400;
src: local('Chewy Regular'), local('Chewy-Regular'), url(https://fonts.gstatic.com/s/chewy/v9/rb3O4cUMVLYzfgbaJOdJHw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 400;
src: local('Cinzel Regular'), local('Cinzel-Regular'), url(https://fonts.gstatic.com/s/cinzel/v7/zOdksD_UUTk1LJF9z4tURA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 700;
src: local('Comfortaa Bold'), local('Comfortaa-Bold'), url(https://fonts.gstatic.com/s/comfortaa/v12/fND5XPYKrF2tQDwwfWZJI-gdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Dancing Script';
font-style: normal;
font-weight: 700;
src: local('Dancing Script Bold'), local('DancingScript-Bold'), url(https://fonts.gstatic.com/s/dancingscript/v9/KGBfwabt0ZRLA5W1ywjowUHdOuSHeh0r6jGTOGdAKHA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Gloria Hallelujah';
font-style: normal;
font-weight: 400;
src: local('Gloria Hallelujah'), local('GloriaHallelujah'), url(https://fonts.gstatic.com/s/gloriahallelujah/v9/CA1k7SlXcY5kvI81M_R28cNDay8z-hHR7F16xrcXsJw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Great Vibes';
font-style: normal;
font-weight: 400;
src: local('Great Vibes'), local('GreatVibes-Regular'), url(https://fonts.gstatic.com/s/greatvibes/v5/6q1c0ofG6NKsEhAc2eh-3Y4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'IM Fell English';
font-style: normal;
font-weight: 400;
src: local('IM FELL English Roman'), local('IM_FELL_English_Roman'), url(https://fonts.gstatic.com/s/imfellenglish/v7/xwIisCqGFi8pff-oa9uSVAkYLEKE0CJQa8tfZYc_plY.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 400;
src: local('Josefin Sans Regular'), local('JosefinSans-Regular'), url(https://fonts.gstatic.com/s/josefinsans/v12/xgzbb53t8j-Mo-vYa23n5ugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Kaushan Script';
font-style: normal;
font-weight: 400;
src: local('Kaushan Script'), local('KaushanScript-Regular'), url(https://fonts.gstatic.com/s/kaushanscript/v6/qx1LSqts-NtiKcLw4N03IEd0sm1ffa_JvZxsF_BEwQk.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: local('Lobster Regular'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v20/cycBf3mfbGkh66G5NhszPQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Montez';
font-style: normal;
font-weight: 400;
src: local('Montez Regular'), local('Montez-Regular'), url(https://fonts.gstatic.com/s/montez/v8/aq8el3-0osHIcFK6bXAPkw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Orbitron';
font-style: normal;
font-weight: 400;
src: local('Orbitron Regular'), local('Orbitron-Regular'), url(https://fonts.gstatic.com/s/orbitron/v9/HmnHiRzvcnQr8CjBje6GQvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Satisfy';
font-style: normal;
font-weight: 400;
src: local('Satisfy Regular'), local('Satisfy-Regular'), url(https://fonts.gstatic.com/s/satisfy/v8/2OzALGYfHwQjkPYWELy-cw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Shadows Into Light';
font-style: normal;
font-weight: 400;
src: local('Shadows Into Light'), local('ShadowsIntoLight'), url(https://fonts.gstatic.com/s/shadowsintolight/v7/clhLqOv7MXn459PTh0gXYFK2TSYBz0eNcHnp4YqE4Ts.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Yellowtail';
font-style: normal;
font-weight: 400;
src: local('Yellowtail Regular'), local('Yellowtail-Regular'), url(https://fonts.gstatic.com/s/yellowtail/v8/GcIHC9QEwVkrA19LJU1qlPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 700;
src: local('Amatic SC Bold'), local('AmaticSC-Bold'), url(https://fonts.gstatic.com/s/amaticsc/v11/IDnkRTPGcrSVo50UyYNK7-gdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
svg {
background-color: #5E4FA2;
border: 1px solid #5e4fa2;
position: absolute;
}
canvas {
position: absolute;
display: none;
}
.grayscale {
filter: grayscale(1);
}
.sepia {
filter: sepia(1) saturate(0.8);
}
.tint {
filter: sepia(1) hue-rotate(200deg);
}
.dingy {
filter: contrast(1) saturate(1.8) sepia(.6);
}
#terrs {
stroke-width: 0.7;
stroke-linejoin: round;
mask: url(#shape);
}
#cults {
stroke-width: 0.7;
stroke-linejoin: round;
mask: url(#shape);
opacity: 0.6;
pointer-events:none;
}
#grid {
display: none;
fill: none;
stroke-width: 0.1;
stroke: gray;
}
#landmass {
stroke: none;
fill-rule: evenodd;
}
#lakes {
stroke: #477794;
stroke-width: 0.3;
fill-rule: evenodd;
}
#coastline {
fill: none;
stroke-linejoin: round;
stroke: #1f3846;
stroke-width: 0.7;
opacity: 0.5;
filter: url(#blurFilter);
}
#regions {
stroke-width: 0.1;
fill-rule: evenodd;
stroke-linejoin: round;
mask: url(#shape);
pointer-events:none;
}
#borders {
fill: none;
stroke: #56566d;
opacity: 0.8;
}
#stateBorders {
stroke-width: 0.5;
stroke-dasharray: 1.2 1.5;
}
#neutralBorders {
stroke-width: 0.3;
stroke-dasharray: 1 1.5;
}
#oceanLayers {
filter: url(#blurFilter);
fill-rule: evenodd;
}
#rivers {
stroke-width: 0;
mask: url(#shape);
cursor: pointer;
}
#burgs {
stroke: #3e3e4b;
fill: white;
fill-opacity: 0.6;
cursor: pointer;
}
#hills {
stroke-width: 0.1px;
fill: #999999;
}
#mounts {
stroke-width: 0.1px;
fill: white;
}
#strokes {
stroke-width: 0.08px;
width: 2px;
stroke: #5c5c70;
stroke-dasharray: 0.5, 0.7;
stroke-linecap: round;
}
#routes {
fill: none;
stroke-linecap: round;
opacity: 0.8;
}
#roads {
stroke-width: 0.4;
stroke-dasharray: 1 2;
mask: url(#shape);
}
#trails {
stroke-width: 0.1;
stroke-dasharray: 0.5 1;
mask: url(#shape);
}
#searoutes {
stroke-width: 0.2;
stroke-dasharray: 1 2;
}
#swamps {
stroke-width: 0.05px;
fill: none;
stroke: #5c5c70;
}
#forests {
stroke-width: 0.1px;
stroke: #5c5c70;
}
#options .pressed {
background-color: #916e7f;
font-style: italic;
}
.ui-dialog button.pressed {
box-shadow: inset 1px 1px 0px 0px #ccc;
}
body .editorDialog {
padding: 1px;
}
.editorDialog .editorDialogTitle {
font-size: 14px;
}
.editTrigger {
display: none;
position: relative;
width: 60px;
}
.editTrigger[type="number"] {
width: 40px;
height: 14px;
}
.editTrigger[type="range"] {
width: 132px;
cursor: pointer;
}
#editGroupSelect {
width: 165px;
}
#editGroupInput {
display: none;
width: 161px;
}
#editSizeIcon, #editOpacityIcon, #editShadowIcon {
display: none;
}
#editText {
width: 160px;
}
#editFontSelect {
width: 129px;
}
#editFontInput {
width: 125px;
}
#editColor {
height: 20px;
background-color: white;
}
#editAngle {
height: 8px;
}
#riverAngle {
height: 8px;
width: 47px;
}
#riverScale {
width: 43px;
}
.editButton {
cursor: pointer;
}
.editButtonS {
display: none;
cursor: pointer;
}
i.dialog-icon {
display: none;
margin: 0 -1px 0 4px;
}
.editValue {
display: none;
cursor: default;
font-size: small;
font-weight: bold;
width: 34px;
}
#labels {
text-anchor: middle;
dominant-baseline: alphabetic;
text-shadow: 0 0 4px white;
cursor: pointer;
}
#countries {
dominant-baseline: central;
}
.tag {
fill: #fffa90;
stroke: #333333;
stroke-width: 1.4px;
}
.line {
stroke: #666666;
stroke-width: 1px;
}
.drag {
text-shadow: 0 0 6px red;
}
.draggable {
cursor: move;
}
.ui-dialog, #optionsContainer {
user-select: none;
}
#options {
margin: 10px;
display: none;
font-size: smaller;
font-family: monospace;
position: absolute;
background-color: rgba(168, 130, 147, 0.85);
border: solid 1px #5e4fa2;
}
.tab {
overflow: hidden;
border-bottom: 1px solid #5d4651;;
}
button.options {
background-color: #997c89;
font-family: monospace;
font-weight: bold;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 8px 16px;
transition: 0.1s;
font-size: 1em;
}
#options p {
font-style: italic;
font-weight: bold;
}
#options input[type="color"] {
width: 38px;
padding: 0px;
border: 0;
background: none;
cursor: pointer;
}
#options input[type="range"] {
outline: none;
width: 120px;
height: 2px;
background: #ffffff;
top: -2px;
position: relative;
-webkit-appearance: none;
appearance: none;
}
#options input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 15%;
width: 10px;
height: 10px;
background: #916e7f;
border: 1px solid #5d4651;
cursor: pointer;
}
#options input[type="range"]::-moz-range-thumb {
appearance: none;
border-radius: 15%;
width: 10px;
height: 10px;
background: #916e7f;
border: 1px solid #5d4651;
cursor: pointer;
}
#options select {
height: 14px;
width: 122px;
border: 0;
outline: none;
font-size: smaller;
font-family: monospace;
cursor: pointer;
}
#options .buttonoff {
background-color: #b6b4b440;
color: grey;
}
#sticked {
padding: 0 13px;
}
#sticked button {
background-color: rgba(153, 124, 137, 0);
padding: 0px;
margin: 2px;
}
#collapsible {
padding: 10.5px;
position: absolute;
z-index: 2;
}
#optionsTrigger {
display: block;
padding: 5.5px 5.5px;
opacity: 0.6;
}
#regenerate {
display: none;
opacity: 0.9;
padding: 7px 10px;
}
button.options:hover {
background-color: #806070;
color: white;
}
button.active {
background-color: #916e7f;
color: white;
}
#layoutTab {
margin-left: 19px;
}
.tabcontent {
max-width: 280px;
display: none;
padding: 0px 6px 0 12px;
opacity: 0.8;
}
.tabcontent button {
background-color: #997c89;
font-family: monospace;
border: none;
outline: none;
cursor: pointer;
padding: 5px 8px;
margin: 4px 0px;
transition: 0.1s;
font-size: 1em;
}
.tabcontent button:hover {
background-color: #a8879d;
}
#mapLayers {
display: inline-block;
}
.tabcontent li {
list-style-type: none;
background-color: #997c89;
cursor: pointer;
padding: 5px 8px;
margin: 4px;
transition: 0.1s;
float: left;
}
.tabcontent li:hover {
background-color: #a8879d;
}
.tabcontent li.solid {
color: #42383f;
}
#customizeTools button {
margin-right: 6px;
}
p {
margin-bottom: 0;
}
#optionsContainer span {
cursor: default;
}
#statusbar {
display: block;
font-family: monospace;
position: absolute;
top: 548px;
}
table {
table-layout: fixed;
width: 288px;
}
table td:nth-of-type(1) {
text-decoration: underline dotted gray;
cursor: help;
width: 126px;
}
table td:nth-of-type(3) {
text-align: right;
}
#icons {
stroke: #0d0d0d;
fill: grey;
}
#fileToLoad {
display: none;
}
#customizationMenu {
display: none;
}
.setColors {
display: inline-block;
}
#templateDialog button {
font: normal normal normal 14px/1 FontAwesome;
cursor: pointer;
padding: 2px;
width: 23px;
font-family: monospace;
}
#templateDialog > div {
margin: 2px 0px;
}
#templateBody > div {
border: 1px solid #949494;
border-radius: 1px;
background-image: linear-gradient(to right, #ffffff 0%, #fafafa 51%, #ebebeb 100%);
margin: 1px 1px;
width: 93%;
padding: 1px 2px;
font-size: 9px;
}
#templateBody > div:hover {
border-color: #808080;
background-image: linear-gradient(to right, #fcfcfc 0%, #ededed 51%, #dedede 100%);
}
#templateBody span {
display: inline-block;
margin: 0 1px;
float: right;
cursor: pointer;
}
#templateBody span:hover {
color: #297cb8;
}
#templateBody label {
float: right;
margin-right: 4px;
}
#templateBody label:first-of-type {
margin-right: 12px;
}
#templateBody input {
height: 4px;
width: 38px;
font-size: 10px;
font-family: monospace;
}
#templateBody select {
border: 0;
background-color: rgba(255, 255, 255, 0);
width: 58px;
cursor: pointer;
}
.riverPoints {
fill: red;
stroke: none;
stroke-width: 0.1;
cursor: move;
}
.riverPoints circle:hover {
stroke: brown;
}
.drag-trigger{
border-left: 12px solid transparent;
border-right: 12px solid #916e7f;
border-top: 12px solid transparent;
position: absolute;
right: 0px;
top: 100%;
margin-top: -12px;
}
.drag-trigger:hover{
cursor: move;
border-right-color: #5e4fa2;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Azgaar's Fantasy Map Generator Demo v. 0.5b</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://mewo2.com/js/priority-queue.js"></script>
<script src="https://rawgit.com/LuisSevillano/9f6c9edd7f90ac6cca54ed744e28f3ee/raw/38f9774f83f00b286360db1ea97d851f79e594aa/polylabel.js"></script>
<script src="names.js"></script>
<link rel="stylesheet" type="text/css" href="index.css"/>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<script async src="https://use.fontawesome.com/b6af125a10.js"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540">
<defs>
<filter id="blurFilter" x="-1" y="-1" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.2" />
</filter>
<g id="deftemp">
<mask id="shape" x="0" y="0" width="100%" height="100%" fill="black"></mask>
</g>
<g id="defs-icons">
<symbol id="icon-anchor" viewBox="0 0 28 28">
<title>Anchor</title>
<path d="M15 4c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM28 18.5v5.5c0 0.203-0.125 0.391-0.313 0.469-0.063 0.016-0.125 0.031-0.187 0.031-0.125 0-0.25-0.047-0.359-0.141l-1.453-1.453c-2.453 2.953-6.859 4.844-11.688 4.844s-9.234-1.891-11.688-4.844l-1.453 1.453c-0.094 0.094-0.234 0.141-0.359 0.141-0.063 0-0.125-0.016-0.187-0.031-0.187-0.078-0.313-0.266-0.313-0.469v-5.5c0-0.281 0.219-0.5 0.5-0.5h5.5c0.203 0 0.391 0.125 0.469 0.313s0.031 0.391-0.109 0.547l-1.563 1.563c1.406 1.891 4.109 3.266 7.203 3.687v-10.109h-3c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h3v-2.547c-1.188-0.688-2-1.969-2-3.453 0-2.203 1.797-4 4-4s4 1.797 4 4c0 1.484-0.812 2.766-2 3.453v2.547h3c0.547 0 1 0.453 1 1v2c0 0.547-0.453 1-1 1h-3v10.109c3.094-0.422 5.797-1.797 7.203-3.687l-1.563-1.563c-0.141-0.156-0.187-0.359-0.109-0.547s0.266-0.313 0.469-0.313h5.5c0.281 0 0.5 0.219 0.5 0.5z"></path>
</symbol>
</g>
<pattern id="oceanPattern" width="100" height="100" patternUnits="userSpaceOnUse">
<filter id='image'>
<feImage x="0" y="0" width="100" height="100" xlink:href="data:image/png;base64,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">
</filter>
<rect width='100' height='100' filter="url(#image)" opacity='0.2'/>
</pattern>
<pattern id="mottling" width="16" height="9" patternUnits="userSpaceOnUse">
<filter id='turb'>
<feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='10' stitchTiles='stitch'/>
</filter>
<rect width='16' height='9' filter="url(#turb)"/>
</pattern>
</defs>
</svg>
<div id="optionsContainer">
<div id="collapsible">
<button id="optionsTrigger" class="options" title="Click to display Options"></button>
<button id="regenerate" class="options" title="Click to generate a new map">New Map!</button>
</div>
<div id="options">
<div class="drag-trigger"></div>
<div class="tab">
<button id="layoutTab" class="options">Layout</button>
<button id="styleTab" class="options">Style</button>
<button id="optionsTab" class="options">Options</button>
<button id="customizeTab" class="options">Customize</button>
</div>
<div id="layoutContent" class="tabcontent">
<p style="display: inline-block;">Select preset:</p>
<select id="layoutPreset">
<option value="layoutPolitical" selected>Political map</option>
<option value="layoutCultural">Cultural map</option>
<option value="layoutEconomical">Economical map</option>
<option value="layoutHeightmap">Heightmap</option>
<option value="layoutLandmass">Pure landmass</option>
</select>
<p>Displayed layers. Drag to move, click to toggle</p>
<div id="mapLayers">
<li title="Toggle Ocean, not movable" id="toggleOcean" onclick="$('#oceanPattern').fadeToggle()" class="solid">Ocean</li>
<li title="Toggle Landmass, not movable" id="toggleLandmass" onclick="$('#landmass').fadeToggle()" class="solid">Landmass</span></li>
<li title="Toggle Heightmap" id="toggleHeight" class="buttonoff">Heightmap</li>
<li title="Toggle Cultures map" id="toggleCultures" class="buttonoff">Cultures</li>
<li title="Toggle Routes" id="toggleRoutes" onclick="$('#routes').fadeToggle()">Routes</li>
<li title="Toggle Rivers" id="toggleRivers" onclick="$('#rivers').fadeToggle()">Rivers</li>
<li title="Toggle Countries" id="toggleCountries">Countries</li>
<li title="Toggle Borders" id="toggleBorders" onclick="$('#borders').fadeToggle()">Borders</li>
<li title="Toggle Relief icons" id="toggleRelief" onclick="$('#terrain').fadeToggle()">Relief</li>
<li title="Toggle Grid" id="toggleGrid" class="buttonoff" onclick="$('#grid').fadeToggle()">Grid</li>
<li title="Toggle Labels" id="toggleLabels" onclick="$('#labels').fadeToggle()">Labels</li>
<li title="Toggle Burg icons" id="toggleIcons" onclick="$('#burgs').fadeToggle()">Burgs</li>
</div>
</div>
<div id="styleContent" class="tabcontent">
<p style="display: inline-block;">Select element:</p>
<select id="styleElementSelect">
<option value="oceanBase" selected>Ocean</option>
<option value="landmass">Landmass</option>
<option value="regions">Countries</option>
<option value="rivers">Rivers</option>
<option value="lakes">Lakes</option>
<option value="roads">Roads</option>
<option value="searoutes">Searoutes</option>
<option value="terrs">Heightmap</option>
<option value="terrain">Relief</option>
<option value="labels">Labels</option>
</select>
<div id="styleColor" style="height: 10px;">
Color: <input id="styleColorInput" type="color" value="#5E4FA2" onchange="styleColorOutput.value = this.value"/>
<output id="styleColorOutput">#5E4FA2</output>
</div>
<div id="styleRegionColors" style="display: none;">Colors:</div>
<div id="styleOpacity">
<br>Opacity: <input id="styleOpacityInput" type="range" min="0" max="1" step="0.02" value="1" onchange="styleOpacityOutput.value = this.value">
<output id="styleOpacityOutput">1</output>
</div>
<p>Toggle filters:</p>
<button onclick="$('svg').toggleClass('grayscale')" class="buttonoff">Grayscale</button>
<button onclick="$('svg').toggleClass('sepia')" class="buttonoff">Sepia</button>
<button onclick="$('svg').toggleClass('tint')" class="buttonoff">Tint</button>
<button onclick="$('svg').toggleClass('dingy')" class="buttonoff">Dingy</button>
</div>
<div id="optionsContent" class="tabcontent">
<p>Generate new map to apply the options!</p>
<table>
<tr>
<td title="Select template to be used for a Heightmap generation">Heightmap template</td>
<td>
<select id="templateInput">
<option value="Random" selected>Random</option>
<option value="Volcano">Volcano</option>
<option value="High Island">High Island</option>
<option value="Low Island">Low Island</option>
<option value="Continents">Continents</option>
<option value="Archipelago">Archipelago</option>
<option value="Atoll">Atoll</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td title="Set the graph size. A non-default values are not properly tested yet!">Graph size</td>
<td>
<input id="sizeInput" type="range" min="0.8" max="3" step="0.1" value="1">
</td>
<td>
<output id="sizeOutput">1</output>
</td>
</tr>
<tr>
<td title="Define how many Settlements should be placed">Burgs count</td>
<td>
<input id="manorsInput" type="range" min="0" max="1000" value="500">
</td>
<td>
<output id="manorsOutput">500</output>
</td>
</tr>
<tr>
<td title="Define how many Countries should be created">Countries count</td>
<td>
<input id="regionsInput" type="range" min="0" max="100" value="13">
</td>
<td>
<output id="regionsOutput">13</output>
</td>
</tr>
<tr>
<td title="Define Countries size variety. Set to 0 to have all countries sized the same">Countries disbalance</td>
<td>
<input id="powerInput" type="range" min="0" max="10" step="0.2" value="5">
</td>
<td>
<output id="powerOutput">5</output><br>
</td>
</tr>
<tr>
<td title="Maximum distance to a closer manor to consider polygon as a Neutral Land">Burg influence radius</td>
<td>
<input id="neutralInput" type="range" min="1" max="100" step="1" value="100">
</td>
<td>
<output id="neutralOutput">100</output>
</td>
</tr>
<tr>
<td title="Define the land swampiness. Increase to see more marshes (turn on 'Relief' layer)">Swampness</td>
<td>
<input id="swampinessInput" type="range" min="0" max="100" value="10">
</td>
<td>
<output id="swampinessOutput">10</output>
</td>
</tr>
<tr>
<td title="Define the coastline sharpness. Decrease for a more round land shape">Coastline curvature</td>
<td>
<input id="sharpnessInput" type="range" min="0.1" max="0.2" value="0.2" step="0.05">
</td>
<td>
<output id="sharpnessOutput">0.2</output>
</td>
</tr>
<tr>
<td title="Define the Land outline layers scheme">Coast outline layers</td>
<td>
<select id="outlineLayers">
<option value="random">Random</option>
<option value="-6,-3,-1" selected>-6,-3,-1</option>
<option value="-9,-6,-3,-1">-9,-6,-3,-1</option>
<option value="-6,-5,-4,-3,-2,-1">-6,-5,-4,-3,-2,-1</option>
<option value="-9,-8,-7,-6,-5,-4,-3,-2,-1">-9,-8,-7,-6,-5,-4,-3,-2,-1</option>
<option value="-6,-4,-2">-6,-4,-2</option>
<option value="-8,-6,-4,-2">-8,-6,-4,-2</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td title="Select the coastline rendering style">Coastline style</td>
<td>
<select id="curveType">
<option value="Catmull–Rom" selected>Catmull–Rom</option>
<option value="Linear">Linear</option>
<option value="Basis">Basis</option>
<option value="Cardinal">Cardinal</option>
<option value="Step">Step</option>
</select>
</td>
<td></td>
</tr>
</table>
</div>
<div id="customizeContent" class="tabcontent" style="display: block;">
<p title="Click &quot;Start&quot; to initiate customization, &quot;Complete&quot; to finalize the Heightmap">Heightmap customization:</p>
<div id="customizationMain">
<button title="Start from scratch" id="start">Start / Clear</button>
<button class="buttonoff" title="Finalize the Heightmap. Not allowed if insufficient land area available" id="getMap" disabled="disabled">Complete</button>
</div>
<div id="customizationMenu" style="display: none;">
<div id="customizeTools">
<label title="Customization Tools">Tools:</label><br><button title="Open template editor" id="applyTemplate">Apply Template</button><button class="buttonoff" title="Increase landmass elevation" id="rescalePlus">H+</button><button class="buttonoff" title="Decrease landmass elevation" id="rescaleMinus">H-</button><button class="buttonoff" title="Smooth heights" id="smoothHeights">H≈</button></div><div id="customizeBrushes">
<label title="Select brush and click on the map to use it">Free Draw brushes:</label><br>
<button id="brushElevate" title="Click and drag the map to increase cells elevation" class="radio"></button>
<button id="brushDepress" title="Click and drag the map to decrease cells elevation" class="radio"></button>
<button id="brushAlign" title="Click and drag the map to align cells elevation" class="radio">=</button>
<button id="brushSmooth" title="Click and drag the map to smooth cells elevation" class="radio">~</button>
<button id="brushHill" title="Click on the map to place a Hill" class="radio pressed">H</button>
<button id="brushPit" title="Click on the map to place a Pit" class="radio">P</button>
<button id="brushRange" title="Select two points to place a Range" class="radio">R</button>
<button id="brushTrough" title="Select two points to place a Trought" class="radio">T</button>
<br><label title="Set the brush power">Brush power:</label>
<input id="brushPower" type="range" min="0.01" max="0.3" step="0.01" value="0.05">
<output id="brushPowerOutput">0.05</output><br>
</div><br>
<label title="Count of Land cells and Land-Map ratio">Landmass: <span id="landmassCounter">0</span></label><hr>
</div>
<p>Click to add a Label:</p>
<button id="addLabel" class="radio">Label</button>
<button id="addBurg" class="radio">Burg</button>
<div>
<p>Save / Load map:</p>
<button id="saveMap" title="Save in .map format to be loaded later as fully functional map">Save Map</button>
<button id="loadMap" title="Load fully functional map in a .map format">Load Map</button>
<button id="savePNG" title="Download the visible part of the map as .png image">Get PNG</button>
<button id="saveSVG" title="Download the map as .svg image for later use in vector graphics editors">Get SVG</button>
<input type="file" accept=".map" id="fileToLoad">
</div>
</div>
<div id="sticked">
<button id="randomMap" title="Generate new random map based on options being set" class="options">New Map</button>
<div style="float:right; margin-right:5px;">
<!-- Zoom should be smooth and centrified, to be fixed later
<button id="zoomMinus" title="Zoom out" class="options">-</button>
<button id="zoomPlus" title="Zoom in" class="options">+</button>
-->
<button id="zoomReset" title="Reset map zoom to default" class="options">Reset Zoom</button>
</div>
</div>
</div>
</div>
<div id="editDialog" style="display: none">
<button id="editGroupButton" title="Edit label Group" class="editButton"><i class="fa fa-list-ul" aria-hidden="true"></i></button>
<select id="editGroupSelect" title="Select Group for this label" class="editTrigger"/></select>
<input id="editGroupInput" placeholder="new name" title="Declare new Group for this label" class="editTrigger"/>
<span id="editGroupNew" title="Declare new Group for this label" class="editButtonS"><i class="fa fa-plus" aria-hidden="true"></i></span>
<span id="editGroupRemove" title="Remove the Group with all labels" class="editButtonS"><i class="fa fa-trash-o" aria-hidden="true"></i></span>
<button id="editTextButton" title="Edit label Text" class="editButton"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<input id="editText" class="editTrigger"/>
<span id="editTextRandom" title="Generate random name" class="editButtonS"><i class="fa fa-refresh" aria-hidden="true"></i></span>
<button id="editFontButton" title="Select Font for the entire Group" class="editButton"><i class="fa fa-font" aria-hidden="true"></i></button>
<span id="editExternalFont" title="Fetch fonts by linking @font-face declaration" class="editButtonS"><i class="fa fa-at" aria-hidden="true"></i></span>
<select id="editFontSelect" class="editTrigger" title="Select one of the default Fonts"></select>
<input id="editFontInput" placeholder="link to @font-face" title="Fetch fonts by linking @font-face declaration" class="editTrigger"/>
<i id="editSizeIcon" class="fa fa-text-height" aria-hidden="true"></i>
<input id="editSize" title="Change Font size for the entire Group" class="editTrigger" value="14" type="number" min="1" max="100" step=".5"/>
<button id="editStyleButton" title="Select Color for the entire Group" class="editButton"><i class="fa fa-paint-brush" aria-hidden="true"></i></button>
<input id="editColor" type="color" class="editTrigger" value="#3e3e4b">
<i id="editOpacityIcon" class="fa fa-adjust" aria-hidden="true"></i>
<input id="editOpacity" title="Change Opacity for the entire Group" class="editTrigger" value="1" type="number" min="0" max="1" step="0.02">
<i id="editShadowIcon" class="fa fa-clone" aria-hidden="true"></i>
<input id="editShadow" title="Change Shadow for the entire Group" class="editTrigger" value="1" type="number" min="0" max="1" step="0.02" disabled="true">
<button id="editAngleButton" title="Rotate the label" class="editButton"><i class="fa fa-refresh" aria-hidden="true"></i></button>
<input id="editAngle" class="editTrigger" value="0" type="range" min="-180" max="180" step="0.2" oninput="editAngleValue.innerHTML = Math.abs(this.value)+'°'">
<span id="editAngleValue" class="editValue"></span>
<button id="editCopy" title="Copy the label" class="editButton"><i class="fa fa-files-o" aria-hidden="true"></i></button>
<button id="editRemoveSingle" title="Remove the label" class="editButton"><i class="fa fa-trash" aria-hidden="true"></i></button>
</div>
<div id="editRiver" style="display: none">
<button id="riverRisize" title="Resize (rotate, scale) river" class="editButton"><i class="fa fa-arrows-alt" aria-hidden="true"></i></button>
<i id="riverAngleIcon" title="Rotate river" class="dialog-icon fa fa-refresh" aria-hidden="true"></i>
<input id="riverAngle" class="editTrigger" value="0" type="range" min="-180" max="180" step="0.2">
<span id="riverAngleValue" class="editValue"></span>
<i id="riverScaleIcon" title="Change river scale" class="dialog-icon fa fa-expand" aria-hidden="true"></i>
<input id="riverScale" class="editTrigger" value="1" type="number" min="0.1" max="3" step="0.01">
<span id="riverReset" title="Reset transformation" class="editButtonS"><i class="fa fa-ban" aria-hidden="true"></i></span>
<button id="riverRenegerate" title="Regenerate river" class="editButton"><i class="fa fa-random" aria-hidden="true"></i></button>
<button id="riverAddPoint" title="Click to add a river point" class="editButton"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button id="riverRemovePoint" title="Click on red circle to remove river point" class="editButton"><i class="fa fa-minus" aria-hidden="true"></i></button>
<button id="riverCopy" title="Copy river" class="editButton"><i class="fa fa-files-o" aria-hidden="true"></i></button>
<button id="riverRemove" title="Remove river" class="editButton"><i class="fa fa-trash" aria-hidden="true"></i></button>
<button id="riverNew" title="Create new river clicking on map" class="editButton"><i class="fa fa-plus-square" aria-hidden="true"></i></button>
</div>
<div id="templateDialog" style="display: none">
<div id="templateTop">
Base template: <select id="templateSelect" data-prev="templateNew" title="Select base template"/>
<option value="templateCustom" selected>Custom</option>
<option value="templateVolcano">Volcano</option>
<option value="templateHighIsland">High Island</option>
<option value="templateLowIsland">Low Island</option>
<option value="templateContinens">Continents</option>
<option value="templateArchipelago">Archipelago</option>
<option value="templateAtoll">Atoll</option>
</select>
</div>
<div id="templateTools">
<button id="templateMountain" title="Mountain: high big blob. Can be placed only once and only as a first step">M</button>
<button id="templateHill" title="Hill: small blob">H</button>
<button id="templatePit" title="Pit: round depression">P</button>
<button id="templateRange" title="Pit: elongated elevation">R</button>
<button id="templateTrough" title="Trough: elongated depression">T</button>
<button id="templateStrait" title="Strait: centered vertical depression">S</button>
<button id="templateAdd" title="Add or subtract value from all heights">+</button>
<button id="templateMultiply" title="Multiply all heights by factor">*</button>
<button id="templateSmooth" title="Smooth the map replacing cell heights by an average values of its neighbors"></button>
</div>
<div id="templateBody" data-changed=0>
<div data-type="Mountain">Mountain
<span class="templateElRemove" title="Remove the line"><i class="fa fa-trash-o" aria-hidden="true"></i></span>
<span class="templateElDown" title="Remove the line down"><i class="fa fa-sort-desc" aria-hidden="true"></i></span>
<span class="templateElUp" title="Remove the line up"><i class="fa fa-sort-asc" aria-hidden="true"></i></span>
</div>
</div>
<div id="templateBottom">
<button id="templateRun" title="Apply current template">🚀</button>
<button id="templateLoad" title="Open previously saved template">💻</button>
<input type="file" accept=".txt" id="templateToLoad" style="display: none;">
<button id="templateSave" title="Save template">💾</button>
</div>
</div>
<div id="statusbar">
Coord: <span id="lx">0</span>/<span id="ly">0</span>;
Cell: <span id="cell">0</span>;
Height: <span id="height">0</span>;
Type: <span id="feature">no</span>;
Flux: <span id="flux">0</span>;
Region: <span id="region">no</span>;
Culture: <span id="culture">no</span>;
River: <span id="river">no</span>;
Path: <span id="path">no</span>;
Score: <span id="score">no</span>.
</div>
<script type="text/javascript" src="script.js"></script>
</body>
var cultures = ["Shwazen","Angshire","Luari","Latian","Toledi","Slovian","Varangian"];
var manorNames = [
["Achern","Aichhalden","Aitern","Albbruck","Alpirsbach","Altensteig","Althengstett","Appenweier","Auggen","Wildbad","Badenen","Badenweiler","Baiersbronn","Ballrechten","Bellingen","Berghaupten","Bernau","Biberach","Biederbach","Binzen","Birkendorf","Birkenfeld","Bischweier","Blumberg","Bollen","Bollschweil","Bonndorf","Bosingen","Braunlingen","Breisach","Breisgau","Breitnau","Brigachtal","Buchenbach","Buggingen","Buhl","Buhlertal","Calw","Dachsberg","Dobel","Donaueschingen","Dornhan","Dornstetten","Dottingen","Dunningen","Durbach","Durrheim","Ebhausen","Ebringen","Efringen","Egenhausen","Ehrenkirchen","Ehrsberg","Eimeldingen","Eisenbach","Elzach","Elztal","Emmendingen","Endingen","Engelsbrand","Enz","Enzklosterle","Eschbronn","Ettenheim","Ettlingen","Feldberg","Fischerbach","Fischingen","Fluorn","Forbach","Freiamt","Freiburg","Freudenstadt","Friedenweiler","Friesenheim","Frohnd","Furtwangen","Gaggenau","Geisingen","Gengenbach","Gernsbach","Glatt","Glatten","Glottertal","Gorwihl","Gottenheim","Grafenhausen","Grenzach","Griesbach","Gutach","Gutenbach","Hag","Haiterbach","Hardt","Harmersbach","Hasel","Haslach","Hausach","Hausen","Hausern","Heitersheim","Herbolzheim","Herrenalb","Herrischried","Hinterzarten","Hochenschwand","Hofen","Hofstetten","Hohberg","Horb","Horben","Hornberg","Hufingen","Ibach","Ihringen","Inzlingen","Kandern","Kappel","Kappelrodeck","Karlsbad","Karlsruhe","Kehl","Keltern","Kippenheim","Kirchzarten","Konigsfeld","Krozingen","Kuppenheim","Kussaberg","Lahr","Lauchringen","Lauf","Laufenburg","Lautenbach","Lauterbach","Lenzkirch","Liebenzell","Loffenau","Loffingen","Lorrach","Lossburg","Mahlberg","Malsburg","Malsch","March","Marxzell","Marzell","Maulburg","Monchweiler","Muhlenbach","Mullheim","Munstertal","Murg","Nagold","Neubulach","Neuenburg","Neuhausen","Neuried","Neuweiler","Niedereschach","Nordrach","Oberharmersbach","Oberkirch","Oberndorf","Oberbach","Oberried","Oberwolfach","Offenburg","Ohlsbach","Oppenau","Ortenberg","otigheim","Ottenhofen","Ottersweier","Peterstal","Pfaffenweiler","Pfalzgrafenweiler","Pforzheim","Rastatt","Renchen","Rheinau","Rheinfelden","Rheinmunster","Rickenbach","Rippoldsau","Rohrdorf","Rottweil","Rummingen","Rust","Sackingen","Sasbach","Sasbachwalden","Schallbach","Schallstadt","Schapbach","Schenkenzell","Schiltach","Schliengen","Schluchsee","Schomberg","Schonach","Schonau","Schonenberg","Schonwald","Schopfheim","Schopfloch","Schramberg","Schuttertal","Schwenningen","Schworstadt","Seebach","Seelbach","Seewald","Sexau","Simmersfeld","Simonswald","Sinzheim","Solden","Staufen","Stegen","Steinach","Steinen","Steinmauern","Straubenhardt","Stuhlingen","Sulz","Sulzburg","Teinach","Tiefenbronn","Tiengen","Titisee","Todtmoos","Todtnau","Todtnauberg","Triberg","Tunau","Tuningen","uhlingen","Unterkirnach","Reichenbach","Utzenfeld","Villingen","Villingendorf","Vogtsburg","Vohrenbach","Waldachtal","Waldbronn","Waldkirch","Waldshut","Wehr","Weil","Weilheim","Weisenbach","Wembach","Wieden","Wiesental","Wildberg","Winzeln","Wittlingen","Wittnau","Wolfach","Wutach","Wutoschingen","Wyhlen","Zavelstein"],
["Abingdon","Albrighton","Alcester","Almondbury","Altrincham","Amersham","Andover","Appleby","Ashboume","Atherstone","Aveton","Axbridge","Aylesbury","Baldock","Bamburgh","Barton","Basingstoke","Berden","Bere","Berkeley","Berwick","Betley","Bideford","Bingley","Birmingham","Blandford","Blechingley","Bodmin","Bolton","Bootham","Boroughbridge","Boscastle","Bossinney","Bramber","Brampton","Brasted","Bretford","Bridgetown","Bridlington","Bromyard","Bruton","Buckingham","Bungay","Burton","Calne","Cambridge","Canterbury","Carlisle","Castleton","Caus","Charmouth","Chawleigh","Chichester","Chillington","Chinnor","Chipping","Chisbury","Cleobury","Clifford","Clifton","Clitheroe","Cockermouth","Coleshill","Combe","Congleton","Crafthole","Crediton","Cuddenbeck","Dalton","Darlington","Dodbrooke","Drax","Dudley","Dunstable","Dunster","Dunwich","Durham","Dymock","Exeter","Exning","Faringdon","Felton","Fenny","Finedon","Flookburgh","Fowey","Frampton","Gateshead","Gatton","Godmanchester","Grampound","Grantham","Guildford","Halesowen","Halton","Harbottle","Harlow","Hatfield","Hatherleigh","Haydon","Helston","Henley","Hertford","Heytesbury","Hinckley","Hitchin","Holme","Hornby","Horsham","Kendal","Kenilworth","Kilkhampton","Kineton","Kington","Kinver","Kirby","Knaresborough","Knutsford","Launceston","Leighton","Lewes","Linton","Louth","Luton","Lyme","Lympstone","Macclesfield","Madeley","Malborough","Maldon","Manchester","Manningtree","Marazion","Marlborough","Marshfield","Mere","Merryfield","Middlewich","Midhurst","Milborne","Mitford","Modbury","Montacute","Mousehole","Newbiggin","Newborough","Newbury","Newenden","Newent","Norham","Northleach","Noss","Oakham","Olney","Orford","Ormskirk","Oswestry","Padstow","Paignton","Penkneth","Penrith","Penzance","Pershore","Petersfield","Pevensey","Pickering","Pilton","Pontefract","Portsmouth","Preston","Quatford","Reading","Redcliff","Retford","Rockingham","Romney","Rothbury","Rothwell","Salisbury","Saltash","Seaford","Seasalter","Sherston","Shifnal","Shoreham","Sidmouth","Skipsea","Skipton","Solihull","Somerton","Southam","Southwark","Standon","Stansted","Stapleton","Stottesdon","Sudbury","Swavesey","Tamerton","Tarporley","Tetbury","Thatcham","Thaxted","Thetford","Thornbury","Tintagel","Tiverton","Torksey","Totnes","Towcester","Tregoney","Trematon","Tutbury","Uxbridge","Wallingford","Wareham","Warenmouth","Wargrave","Warton","Watchet","Watford","Wendover","Westbury","Westcheap","Weymouth","Whitford","Wickwar","Wigan","Wigmore","Winchelsea","Winkleigh","Wiscombe","Witham","Witheridge","Wiveliscombe","Woodbury","Yeovil"],
["Adon","Aillant","Amilly","Andonville","Ardon","Artenay","Ascheres","Ascoux","Attray","Aubin","Audeville","Aulnay","Autruy","Auvilliers","Auxy","Aveyron","Baccon","Bardon","Barville","Batilly","Baule","Bazoches","Beauchamps","Beaugency","Beaulieu","Beaune","Bellegarde","Boesses","Boigny","Boiscommun","Boismorand","Boisseaux","Bondaroy","Bonnee","Bonny","Bordes","Bou","Bougy","Bouilly","Boulay","Bouzonville","Bouzy","Boynes","Bray","Breteau","Briare","Briarres","Bricy","Bromeilles","Bucy","Cepoy","Cercottes","Cerdon","Cernoy","Cesarville","Chailly","Chaingy","Chalette","Chambon","Champoulet","Chanteau","Chantecoq","Chapell","Charme","Charmont","Charsonville","Chateau","Chateauneuf","Chatel","Chatenoy","Chatillon","Chaussy","Checy","Chevannes","Chevillon","Chevilly","Chevry","Chilleurs","Choux","Chuelles","Clery","Coinces","Coligny","Combleux","Combreux","Conflans","Corbeilles","Corquilleroy","Cortrat","Coudroy","Coullons","Coulmiers","Courcelles","Courcy","Courtemaux","Courtempierre","Courtenay","Cravant","Crottes","Dadonville","Dammarie","Dampierre","Darvoy","Desmonts","Dimancheville","Donnery","Dordives","Dossainville","Douchy","Dry","Echilleuses","Egry","Engenville","Epieds","Erceville","Ervauville","Escrennes","Escrignelles","Estouy","Faverelles","Fay","Feins","Ferolles","Ferrieres","Fleury","Fontenay","Foret","Foucherolles","Freville","Gatinais","Gaubertin","Gemigny","Germigny","Gidy","Gien","Girolles","Givraines","Gondreville","Grangermont","Greneville","Griselles","Guigneville","Guilly","Gyleslonains","Huetre","Huisseau","Ingrannes","Ingre","Intville","Isdes","Jargeau","Jouy","Juranville","Bussiere","Laas","Ladon","Lailly","Langesse","Leouville","Ligny","Lombreuil","Lorcy","Lorris","Loury","Louzouer","Malesherbois","Marcilly","Mardie","Mareau","Marigny","Marsainvilliers","Melleroy","Menestreau","Merinville","Messas","Meung","Mezieres","Migneres","Mignerette","Mirabeau","Montargis","Montbarrois","Montbouy","Montcresson","Montereau","Montigny","Montliard","Mormant","Morville","Moulinet","Moulon","Nancray","Nargis","Nesploy","Neuville","Neuvy","Nevoy","Nibelle","Nogent","Noyers","Ocre","Oison","Olivet","Ondreville","Onzerain","Orleans","Ormes","Orville","Oussoy","Outarville","Ouzouer","Pannecieres","Pannes","Patay","Paucourt","Pers","Pierrefitte","Pithiverais","Pithiviers","Poilly","Potier","Prefontaines","Presnoy","Pressigny","Puiseaux","Quiers","Ramoulu","Rebrechien","Rouvray","Rozieres","Rozoy","Ruan","Sandillon","Santeau","Saran","Sceaux","Seichebrieres","Semoy","Sennely","Sermaises","Sigloy","Solterre","Sougy","Sully","Sury","Tavers","Thignonville","Thimory","Thorailles","Thou","Tigy","Tivernon","Tournoisis","Trainou","Treilles","Trigueres","Trinay","Vannes","Varennes","Vennecy","Vieilles","Vienne","Viglain","Vignes","Villamblain","Villemandeur","Villemoutiers","Villemurlin","Villeneuve","Villereau","Villevoques","Villorceau","Vimory","Vitry","Vrigny","Ivre"],
["Accumoli","Acquafondata","Acquapendente","Acuto","Affile","Agosta","Alatri","Albano","Allumiere","Alvito","Amaseno","Amatrice","Anagni","Anguillara","Anticoli","Antrodoco","Anzio","Aprilia","Aquino","Arce","Arcinazzo","Ardea","Ariccia","Arlena","Arnara","Arpino","Arsoli","Artena","Ascrea","Atina","Ausonia","Bagnoregio","Barbarano","Bassano","Bassiano","Bellegra","Belmonte","Blera","Bolsena","Bomarzo","Borbona","Borgo","Borgorose","Boville","Bracciano","Broccostella","Calcata","Camerata","Campagnano","Campodimele","Campoli","Canale","Canepina","Canino","Cantalice","Cantalupo","Canterano","Capena","Capodimonte","Capranica","Caprarola","Carbognano","Casalattico","Casalvieri","Casape","Casaprota","Casperia","Cassino","Castelforte","Castelliri","Castello","Castelnuovo","Castiglione","Castro","Castrocielo","Cave","Ceccano","Celleno","Cellere","Ceprano","Cerreto","Cervara","Cervaro","Cerveteri","Ciampino","Ciciliano","Cineto","Cisterna","Cittaducale","Cittareale","Civita","Civitavecchia","Civitella","Colfelice","Collalto","Colle","Colleferro","Collegiove","Collepardo","Collevecchio","Colli","Colonna","Concerviano","Configni","Contigliano","Corchiano","Coreno","Cori","Cottanello","Esperia","Fabrica","Faleria","Falvaterra","Fara","Farnese","Ferentino","Fiamignano","Fiano","Filacciano","Filettino","Fiuggi","Fiumicino","Fondi","Fontana","Fonte","Fontechiari","Forano","Formello","Formia","Frascati","Frasso","Frosinone","Fumone","Gaeta","Gallese","Gallicano","Gallinaro","Gavignano","Genazzano","Genzano","Gerano","Giuliano","Gorga","Gradoli","Graffignano","Greccio","Grottaferrata","Grotte","Guarcino","Guidonia","Ischia","Isola","Itri","Jenne","Labico","Labro","Ladispoli","Lanuvio","Lariano","Latera","Lenola","Leonessa","Licenza","Longone","Lubriano","Maenza","Magliano","Mandela","Manziana","Marano","Marcellina","Marcetelli","Marino","Marta","Mazzano","Mentana","Micigliano","Minturno","Mompeo","Montalto","Montasola","Monte","Montebuono","Montefiascone","Monteflavio","Montelanico","Monteleone","Montelibretti","Montenero","Monterosi","Monterotondo","Montopoli","Montorio","Moricone","Morlupo","Morolo","Morro","Nazzano","Nemi","Nepi","Nerola","Nespolo","Nettuno","Norma","Olevano","Onano","Oriolo","Orte","Orvinio","Paganico","Palestrina","Paliano","Palombara","Pastena","Patrica","Percile","Pescorocchiano","Pescosolido","Petrella","Piansano","Picinisco","Pico","Piedimonte","Piglio","Pignataro","Pisoniano","Pofi","Poggio","Poli","Pomezia","Pontecorvo","Pontinia","Ponza","Ponzano","Posta","Pozzaglia","Priverno","Proceno","Prossedi","Riano","Rieti","Rignano","Riofreddo","Ripi","Rivodutri","Rocca","Roccagiovine","Roccagorga","Roccantica","Roccasecca","Roiate","Ronciglione","Roviano","Sabaudia","Sacrofano","Salisano","Sambuci","Santa","Santi","Santopadre","Saracinesco","Scandriglia","Segni","Selci","Sermoneta","Serrone","Settefrati","Sezze","Sgurgola","Sonnino","Sora","Soriano","Sperlonga","Spigno","Stimigliano","Strangolagalli","Subiaco","Supino","Sutri","Tarano","Tarquinia","Terelle","Terracina","Tessennano","Tivoli","Toffia","Tolfa","Torre","Torri","Torrice","Torricella","Torrita","Trevi","Trevignano","Trivigliano","Turania","Tuscania","Vacone","Valentano","Vallecorsa","Vallemaio","Vallepietra","Vallerano","Vallerotonda","Vallinfreda","Valmontone","Varco","Vasanello","Vejano","Velletri","Ventotene","Veroli","Vetralla","Vicalvi","Vico","Vicovaro","Vignanello","Viterbo","Viticuso","Vitorchiano","Vivaro","Zagarolo"],
["Abanades","Ablanque","Adobes","Ajofrin","Alameda","Alaminos","Alarilla","Albalate","Albares","Albarreal","Albendiego","Alcabon","Alcanizo","Alcaudete","Alcocer","Alcolea","Alcoroches","Aldea","Aldeanueva","Algar","Algora","Alhondiga","Alique","Almadrones","Almendral","Almoguera","Almonacid","Almorox","Alocen","Alovera","Alustante","Angon","Anguita","Anover","Anquela","Arbancon","Arbeteta","Arcicollar","Argecilla","Arges","Armallones","Armuna","Arroyo","Atanzon","Atienza","Aunon","Azuqueca","Azutan","Baides","Banos","Banuelos","Barcience","Bargas","Barriopedro","Belvis","Berninches","Borox","Brihuega","Budia","Buenaventura","Bujalaro","Burguillos","Burujon","Bustares","Cabanas","Cabanillas","Calera","Caleruela","Calzada","Camarena","Campillo","Camunas","Canizar","Canredondo","Cantalojas","Cardiel","Carmena","Carranque","Carriches","Casa","Casarrubios","Casas","Casasbuenas","Caspuenas","Castejon","Castellar","Castilforte","Castillo","Castilnuevo","Cazalegas","Cebolla","Cedillo","Cendejas","Centenera","Cervera","Checa","Chequilla","Chillaron","Chiloeches","Chozas","Chueca","Cifuentes","Cincovillas","Ciruelas","Ciruelos","Cobeja","Cobeta","Cobisa","Cogollor","Cogolludo","Condemios","Congostrina","Consuegra","Copernal","Corduente","Corral","Cuerva","Domingo","Dosbarrios","Driebes","Duron","El","Embid","Erustes","Escalona","Escalonilla","Escamilla","Escariche","Escopete","Espinosa","Espinoso","Esplegares","Esquivias","Estables","Estriegana","Fontanar","Fuembellida","Fuensalida","Fuentelsaz","Gajanejos","Galve","Galvez","Garciotum","Gascuena","Gerindote","Guadamur","Henche","Heras","Herreria","Herreruela","Hijes","Hinojosa","Hita","Hombrados","Hontanar","Hontoba","Horche","Hormigos","Huecas","Huermeces","Huerta","Hueva","Humanes","Illan","Illana","Illescas","Iniestola","Irueste","Jadraque","Jirueque","Lagartera","Las","Layos","Ledanca","Lillo","Lominchar","Loranca","Los","Lucillos","Lupiana","Luzaga","Luzon","Madridejos","Magan","Majaelrayo","Malaga","Malaguilla","Malpica","Mandayona","Mantiel","Manzaneque","Maqueda","Maranchon","Marchamalo","Marjaliza","Marrupe","Mascaraque","Masegoso","Matarrubia","Matillas","Mazarete","Mazuecos","Medranda","Megina","Mejorada","Mentrida","Mesegar","Miedes","Miguel","Millana","Milmarcos","Mirabueno","Miralrio","Mocejon","Mochales","Mohedas","Molina","Monasterio","Mondejar","Montarron","Mora","Moratilla","Morenilla","Muduex","Nambroca","Navalcan","Negredo","Noblejas","Noez","Nombela","Noves","Numancia","Nuno","Ocana","Ocentejo","Olias","Olmeda","Ontigola","Orea","Orgaz","Oropesa","Otero","Palmaces","Palomeque","Pantoja","Pardos","Paredes","Pareja","Parrillas","Pastrana","Pelahustan","Penalen","Penalver","Pepino","Peralejos","Peralveche","Pinilla","Pioz","Piqueras","Polan","Portillo","Poveda","Pozo","Pradena","Prados","Puebla","Puerto","Pulgar","Quer","Quero","Quintanar","Quismondo","Rebollosa","Recas","Renera","Retamoso","Retiendas","Riba","Rielves","Rillo","Riofrio","Robledillo","Robledo","Romanillos","Romanones","Rueda","Sacecorbo","Sacedon","Saelices","Salmeron","San","Santa","Santiuste","Santo","Sartajada","Sauca","Sayaton","Segurilla","Selas","Semillas","Sesena","Setiles","Sevilleja","Sienes","Siguenza","Solanillos","Somolinos","Sonseca","Sotillo","Sotodosos","Talavera","Tamajon","Taragudo","Taravilla","Tartanedo","Tembleque","Tendilla","Terzaga","Tierzo","Tordellego","Tordelrabano","Tordesilos","Torija","Torralba","Torre","Torrecilla","Torrecuadrada","Torrejon","Torremocha","Torrico","Torrijos","Torrubia","Tortola","Tortuera","Tortuero","Totanes","Traid","Trijueque","Trillo","Turleque","Uceda","Ugena","Ujados","Urda","Utande","Valdarachas","Valdesotos","Valhermoso","Valtablado","Valverde","Velada","Viana","Vinuelas","Yebes","Yebra","Yelamos","Yeles","Yepes","Yuncler","Yunclillos","Yuncos","Yunquera","Zaorejas","Zarzuela","Zorita"],
["Belgorod","Beloberezhye","Belyi","Belz","Berestei","Berezhets","Berezovech","Berezutsk","Bobruisk","Bolonets","Borisov","Borovsk","Bozhesk","Bratslav","Bryansk","Brynsk","Buryn","Byhov","Chechersk","Chemesov","Cheremosh","Cherlen","Chern","Chernigov","Chernitsa","Chernobyl","Chernogorod","Chertoryesk","Chetvertnia","Demyansk","Derevesk","Devyagoresk","Dichin","Dmitrov","Dorogobuch","Dorogobuzh","Drestvin","Drokov","Drutsk","Dubechin","Dubichi","Dubki","Dubkov","Dveren","Galich","Glebovo","Glinsk","Goloty","Gomiy","Gorodets","Gorodische","Gorodno","Gorohovets","Goroshin","Gorval","Goryshon","Holm","Horobor","Hoten","Hotin","Hotmyzhsk","Ilovech","Ivan","Izborsk","Izheslavl","Kamenets","Kanev","Karachev","Karna","Kavarna","Klechesk","Klyapech","Kolomyya","Kolyvan","Kopyl","Korec","Kornik","Korochunov","Korshev","Korsun","Koshkin","Kotelno","Kovyla","Kozelsk","Kozelsk","Kremenets","Krichev","Krylatsk","Ksniatin","Kulatsk","Kursk","Kursk","Lebedev","Lida","Logosko","Lomihvost","Loshesk","Loshichi","Lubech","Lubno","Lubutsk","Lutsk","Luchin","Luki","Lukoml","Luzha","Lvov","Mtsensk","Mdin","Medniki","Melecha","Merech","Meretsk","Mescherskoe","Meshkovsk","Metlitsk","Mezetsk","Mglin","Mihailov","Mikitin","Mikulino","Miloslavichi","Mogilev","Mologa","Moreva","Mosalsk","Moschiny","Mozyr","Mstislav","Mstislavets","Muravin","Nemech","Nemiza","Nerinsk","Nichan","Novgorod","Novogorodok","Obolichi","Obolensk","Obolensk","Oleshsk","Olgov","Omelnik","Opoka","Opoki","Oreshek","Orlets","Osechen","Oster","Ostrog","Ostrov","Perelai","Peremil","Peremyshl","Pererov","Peresechen","Perevitsk","Pereyaslav","Pinsk","Ples","Polotsk","Pronsk","Proposhesk","Punia","Putivl","Rechitsa","Rodno","Rogachev","Romanov","Romny","Roslavl","Rostislavl","Rostovets","Rsha","Ruza","Rybchesk","Rylsk","Rzhavesk","Rzhev","Rzhischev","Sambor","Serensk","Serensk","Serpeysk","Shilov","Shuya","Sinech","Sizhka","Skala","Slovensk","Slutsk","Smedin","Sneporod","Snitin","Snovsk","Sochevo","Sokolec","Starica","Starodub","Stepan","Sterzh","Streshin","Sutesk","Svinetsk","Svisloch","Terebovl","Ternov","Teshilov","Teterin","Tiversk","Torchevsk","Toropets","Torzhok","Tripolye","Trubchevsk","Tur","Turov","Usvyaty","Uteshkov","Vasilkov","Velil","Velye","Venev","Venicha","Verderev","Vereya","Veveresk","Viazma","Vidbesk","Vidychev","Voino","Volodimer","Volok","Volyn","Vorobesk","Voronich","Voronok","Vorotynsk","Vrev","Vruchiy","Vselug","Vyatichsk","Vyatka","Vyshegorod","Vyshgorod","Vysokoe","Yagniatin","Yaropolch","Yasenets","Yuryev","Yuryevets","Zaraysk","Zhitomel","Zholvazh","Zizhech","Zubkov","Zudechev","Zvenigorod"],
["Akureyri","Aldra","Alftanes","Andenes","Austbo","Auvog","Bakkafjordur","Ballangen","Bardal","Beisfjord","Bifrost","Bildudalur","Bjerka","Bjerkvik","Bjorkosen","Bliksvaer","Blokken","Blonduos","Bolga","Bolungarvik","Borg","Borgarnes","Bosmoen","Bostad","Bostrand","Botsvika","Brautarholt","Breiddalsvik","Bringsli","Brunahlid","Budardalur","Byggdakjarni","Dalvik","Djupivogur","Donnes","Drageid","Drangsnes","Egilsstadir","Eiteroga","Elvenes","Engavogen","Ertenvog","Eskifjordur","Evenes","Eyrarbakki","Fagernes","Fallmoen","Fellabaer","Fenes","Finnoya","Fjaer","Fjelldal","Flakstad","Flateyri","Flostrand","Fludir","Gardabær","Gardur","Gimstad","Givaer","Gjeroy","Gladstad","Godoya","Godoynes","Granmoen","Gravdal","Grenivik","Grimsey","Grindavik","Grytting","Hafnir","Halsa","Hauganes","Haugland","Hauknes","Hella","Helland","Hellissandur","Hestad","Higrav","Hnifsdalur","Hofn","Hofsos","Holand","Holar","Holen","Holkestad","Holmavik","Hopen","Hovden","Hrafnagil","Hrisey","Husavik","Husvik","Hvammstangi","Hvanneyri","Hveragerdi","Hvolsvollur","Igeroy","Indre","Inndyr","Innhavet","Innnes","Isafjordur","Jarklaustur","Jarnsreykir","Junkerdal","Kaldvog","Kanstad","Karlsoy","Kavosen","Keflavik","Kjelde","Kjerstad","Klakk","Kopasker","Kopavogur","Korgen","Kristnes","Krutoga","Krystad","Kvina","Lande","Laugar","Laugaras","Laugarbakki","Laugarvatn","Laupstad","Leines","Leira","Leiren","Leland","Lenvika","Loding","Lodingen","Lonsbakki","Lopsmarka","Lovund","Luroy","Maela","Melahverfi","Meloy","Mevik","Misvaer","Mornes","Mosfellsbær","Moskenes","Myken","Naurstad","Nesberg","Nesjahverfi","Nesset","Nevernes","Obygda","Ofoten","Ogskardet","Okervika","Oknes","Olafsfjordur","Oldervika","Olstad","Onstad","Oppeid","Oresvika","Orsnes","Orsvog","Osmyra","Overdal","Prestoya","Raudalaekur","Raufarhofn","Reipo","Reykholar","Reykholt","Reykjahlid","Rif","Rinoya","Rodoy","Rognan","Rosvika","Rovika","Salhus","Sanden","Sandgerdi","Sandoker","Sandset","Sandvika","Saudarkrokur","Selfoss","Selsoya","Sennesvik","Setso","Siglufjordur","Silvalen","Skagastrond","Skjerstad","Skonland","Skorvogen","Skrova","Sleneset","Snubba","Softing","Solheim","Solheimar","Sorarnoy","Sorfugloy","Sorland","Sormela","Sorvaer","Sovika","Stamsund","Stamsvika","Stave","Stokka","Stokkseyri","Storjord","Storo","Storvika","Strand","Straumen","Strendene","Sudavik","Sudureyri","Sundoya","Sydalen","Thingeyri","Thorlakshofn","Thorshofn","Tjarnabyggd","Tjotta","Tosbotn","Traelnes","Trofors","Trones","Tverro","Ulvsvog","Unnstad","Utskor","Valla","Vandved","Varmahlid","Vassos","Vevelstad","Vidrek","Vik","Vikholmen","Vogar","Vogehamn","Vopnafjordur"]
];
// Fantasy Map Generator main script
"use strict;"
fantasyMap();
function fantasyMap() {
// Suggest to use Chrome
var isChrome = !!window.chrome && !!window.chrome.webstore;
if (!isChrome) {alert("Please use Google Chrome for best experience!\nYour browser may not support some features!")}
// Declare variables
var svg = d3.select("svg"),
mapWidth = +svg.attr("width"),
mapHeight = +svg.attr("height"),
defs = svg.select("#deftemp"),
viewbox = svg.append("g").attr("id", "viewbox").on("touchmove mousemove", moved).on("click", clicked),
ocean = viewbox.append("g").attr("id", "ocean"),
oceanLayers = ocean.append("g").attr("id", "oceanLayers"),
oceanPattern = ocean.append("g").attr("id", "oceanPattern"),
landmass = viewbox.append("g").attr("id", "landmass").attr("fill", "#eef6fb"),
terrs = viewbox.append("g").attr("id", "terrs"),
cults = viewbox.append("g").attr("id", "cults"),
routes = viewbox.append("g").attr("id", "routes"),
roads = routes.append("g").attr("id", "roads").attr("stroke", "#d06324"),
trails = routes.append("g").attr("id", "trails").attr("stroke", "#d06324"),
rivers = viewbox.append("g").attr("id", "rivers").attr("fill", "#5d97bb"),
terrain = viewbox.append("g").attr("id", "terrain"),
regions = viewbox.append("g").attr("id", "regions").attr("opacity", .55),
borders = viewbox.append("g").attr("id", "borders"),
stateBorders = borders.append("g").attr("id", "stateBorders"),
neutralBorders = borders.append("g").attr("id", "neutralBorders"),
coastline = viewbox.append("g").attr("id", "coastline"),
lakes = viewbox.append("g").attr("id", "lakes").attr("fill", "#a6c1fd"),
grid = viewbox.append("g").attr("id", "grid"),
searoutes = routes.append("g").attr("id", "searoutes").attr("stroke", "#ffffff"),
labels = viewbox.append("g").attr("id", "labels"),
icons = viewbox.append("g").attr("id", "icons"),
burgs = icons.append("g").attr("id", "burgs"),
debug = viewbox.append("g").attr("id", "debug");
// Color schemes
var color = d3.scaleSequential(d3.interpolateSpectral),
colorFlux = d3.scaleSequential(d3.interpolateBlues),
colors8 = d3.scaleOrdinal(d3.schemeSet2),
colors20 = d3.scaleOrdinal(d3.schemeCategory20);
// Common variables
var customization, elSelected, cells = [], land = [], riversData = [], manors = [],
queue = [], chain = {}, island = 0, cultureTree, manorTree;
var graphSize = +sizeInput.value,
manorsCount = manorsInput.value,
capitalsCount = regionsInput.value,
power = powerInput.value,
neutral = neutralInput.value,
swampiness = swampinessInput.value,
sharpness = sharpnessInput.value;
if (neutral === "100") {neutral = "200";}
// Groups for labels
var fonts = ["Amatic+SC:700"],
capitals = labels.append("g").attr("id", "capitals").attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", Math.round(6 - capitalsCount / 20)),
towns = labels.append("g").attr("id", "towns").attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", 2),
countries = labels.append("g").attr("id", "countries").attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", Math.round(18 - capitalsCount / 6));
// append ocean pattern
oceanPattern.append("rect").attr("x", 0).attr("y", 0)
.attr("width", mapWidth).attr("height", mapHeight).attr("class", "pattern")
.attr("stroke", "none").attr("fill", "url(#oceanPattern)");
oceanLayers.append("rect").attr("x", 0).attr("y", 0)
.attr("width", mapWidth).attr("height", mapHeight).attr("id", "oceanBase").attr("fill", "#5167a9");
// D3 Line generator
var scX = d3.scaleLinear().domain([0, mapWidth]).range([0, mapWidth]),
scY = d3.scaleLinear().domain([0, mapHeight]).range([0, mapHeight]),
lineGen = d3.line().x(function(d) {return scX(d.scX);}).y(function(d) {return scY(d.scY);});
// main data variables
var voronoi = d3.voronoi().extent([[0, 0], [mapWidth, mapHeight]]);
var diagram, polygons, points = [], sample;
// D3 drag and zoom behavior
var scale = 1, viewX = 0, viewY = 0;
var zoom = d3.zoom().scaleExtent([1, 40]) // 40x is default max zoom
.translateExtent([[0, 0], [mapWidth, mapHeight]]) // 0,0 as default extent
.on("zoom", zoomed);
svg.call(zoom);
$("#optionsContainer").draggable({handle: ".drag-trigger", snap: "svg", snapMode: "both"});
$("#mapLayers").sortable({items: "li:not(.solid)", cancel: ".solid", update: moveLayer});
$("#mapLayers").disableSelection();
var drag = d3.drag()
.container(function() {return this;})
.subject(function() {var p=[d3.event.x, d3.event.y]; return [p, p];})
.on("start", dragstarted);
function zoomed() {
scale = d3.event.transform.k;
viewX = d3.event.transform.x;
viewY = d3.event.transform.y;
viewbox.attr("transform", d3.event.transform);
}
// Manually update viewbox
function zoomUpdate() {
var transform = d3.zoomIdentity.translate(viewX, viewY).scale(scale);
svg.call(zoom.transform, transform);
}
generate(); // genarate map on load
function generate() {
console.group("Random map");
console.time("TOTAL");
placePoints();
calculateVoronoi(points);
detectNeighbors();
defineHeightmap();
markFeatures();
drawOcean();
reGraph();
resolveDepressions();
flux();
drawRelief();
drawCoastline();
manorsAndRegions();
if (!$("#toggleHeight").hasClass("buttonoff")) {toggleHeight();}
console.timeEnd("TOTAL");
console.groupEnd("Random map");
}
// Locate points to calculate Voronoi diagram
function placePoints() {
console.time("placePoints");
points = [];
var radius = 5.9 / graphSize; // 5.9 is a radius to get 8k cells
var sampler = poissonDiscSampler(mapWidth, mapHeight, radius);
while (sample = sampler()) {points.push([Math.ceil(sample[0]), Math.ceil(sample[1])]);}
console.timeEnd("placePoints");
}
// Calculate Voronoi Diagram
function calculateVoronoi(points) {
console.time("calculateVoronoi");
diagram = voronoi(points),
polygons = diagram.polygons();
console.log(" cells: " + points.length);
console.timeEnd("calculateVoronoi");
}
// Get cell info on mouse move (useful for debugging)
function moved() {
var point = d3.mouse(this);
var i = diagram.find(point[0], point[1]).index;
if (i) {
var p = cells[i]; // get cell
$("#lx").text(Math.ceil(point[0]));
$("#ly").text(Math.ceil(point[1]));
$("#cell").text(i);
$("#height").text(ifDefined(p.height, 2));
$("#flux").text(ifDefined(p.flux, 3));
$("#river").text(ifDefined(p.river));
$("#region").text(ifDefined(p.region));
$("#feature").text(ifDefined(p.feature) + "" + ifDefined(p.featureNumber));
$("#score").text(ifDefined(p.score));
$("#path").text(ifDefined(p.path));
$("#culture").text(ifDefined(cultures[p.culture]));
d3.select("body").on("keydown", function() {
if (d3.event.keyCode == 32) {console.table(p);}
if (d3.event.keyCode == 77) {console.table(manors);}
if (d3.event.keyCode == 67) {console.log(cells);}
});
}
// draw line for Customization range placing
icons.selectAll(".line").remove();
if (customization === 1 && icons.selectAll(".tag").size() === 1) {
var x = +icons.select(".tag").attr("cx");
var y = +icons.select(".tag").attr("cy");
icons.insert("line", ":first-child").attr("class", "line").attr("x1", x).attr("y1", y).attr("x2", point[0]).attr("y2", point[1]);
}
}
// return value (e) if defined with specified number of decimals (f)
function ifDefined(e, f) {
if (e == undefined) {return "no";}
if (f) {return e.toFixed(f);}
return e;
}
// Drag actions
function dragstarted() {
var x0 = d3.event.x,
y0 = d3.event.y,
c0 = diagram.find(x0, y0).index,
c1 = c0;
d3.event.on("drag", function() {
if (customization === 1) {
var x1 = d3.event.x,
y1 = d3.event.y,
c2 = diagram.find(x1, y1).index;
if (c2 !== c1) {
c1 = c2;
var brush = $("#options .pressed").attr("id");
var power = +brushPower.value;
if (brush === "brushElevate") {
if (cells[c2].height < 0.2) {cells[c2].height = 0.2} else {cells[c2].height += power;}
}
if (brush === "brushDepress") {cells[c2].height -= power;}
if (brush === "brushHill") {add(c2, "hill", power);}
if (brush === "brushPit") {addPit(1, power, c2);}
if (brush === "brushAlign") {cells[c2].height = cells[c0].height;}
if (brush === "brushSmooth") {
var heights = [cells[c2].height];
cells[c2].neighbors.forEach(function(e) {heights.push(cells[e].height);});
cells[c2].height = d3.mean(heights);
}
}
mockHeightmap();
} else {
viewbox.on(".drag", null);
}
});
}
// turn D3 polygons array into cell array, define neighbors for each cell
function detectNeighbors(withGrid) {
console.time("detectNeighbors");
var gridPath = ""; // store grid as huge single path string
polygons.map(function(i, d) {
var neighbors = [];
var type; // define type, -99 for map borders
if (withGrid) {gridPath += "M" + i.join("L") + "Z";} // grid path
diagram.cells[d].halfedges.forEach(function(e) {
var edge = diagram.edges[e], ea;
if (edge.left && edge.right) {
ea = edge.left.index;
if (ea === d) {ea = edge.right.index;}
neighbors.push(ea);
} else {
if (edge.left) {ea = edge.left.index;} else {ea = edge.right.index;}
type = -99; // polygon is on border if it has edge without opposite side polygon
}
})
cells.push({index: d, data: i.data, height: 0, type, neighbors});
});
if (withGrid) {grid.append("path").attr("d", round(gridPath));}
console.timeEnd("detectNeighbors");
}
// Generate Heigtmap routine
function defineHeightmap() {
console.time('defineHeightmap');
var mapTemplate = templateInput.value;
if (mapTemplate === "Random") {
var rnd = Math.random();
if (rnd > 0.95) {mapTemplate = "Volcano";}
if (rnd > 0.8 && rnd <= 0.95) {mapTemplate = "High Island";}
if (rnd > 0.7 && rnd <= 0.8) {mapTemplate = "Low Island";}
if (rnd > 0.4 && rnd <= 0.7) {mapTemplate = "Continents";}
if (rnd > 0.05 && rnd <= 0.4) {mapTemplate = "Archipelago";}
if (rnd <= 0.05) {mapTemplate = "Atoll";}
}
addMountain();
if (mapTemplate === "Volcano") {templateVolcano();}
if (mapTemplate === "High Island") {templateHighIsland();}
if (mapTemplate === "Low Island") {templateLowIsland();}
if (mapTemplate === "Continents") {templateContinents();}
if (mapTemplate === "Archipelago") {templateArchipelago();}
if (mapTemplate === "Atoll") {templateAtoll();}
console.log(mapTemplate + " template is applied");
console.timeEnd('defineHeightmap');
}
// Heighmap Template: Volcano
function templateVolcano() {
modifyHeights("all", 0.07, 1.1);
addHill(5, 0.4);
addHill(2, 0.15);
}
// Heighmap Template: High Island
function templateHighIsland() {
modifyHeights("all", 0.08, 0.9);
addRange(4);
addHill(12, 0.25);
addRange(-3);
modifyHeights("land", 0, 0.75);
addHill(3, 0.15);
}
// Heighmap Template: Low Island
function templateLowIsland() {
modifyHeights("all", 0.05, 1);
smoothHeights();
addHill(4, 0.4);
addHill(12, 0.2);
addRange(-3);
modifyHeights("land", 0, 0.3);
}
// Heighmap Template: Continents
function templateContinents() {
addHill(24, 0.25);
addRange(2);
addHill(3, 0.1);
modifyHeights("land", 0, 0.7);
var count = Math.floor(Math.random() * 7 + 2);
addStrait(count);
smoothHeights();
addPit(5);
addRange(-3);
modifyHeights("land", 0, 0.8);
modifyHeights("all", 0.02, 1);
}
// Heighmap Template: Archipelago
function templateArchipelago() {
modifyHeights("land", -0.2, 1);
addHill(15, 0.15);
addRange(-2);
addPit(8);
modifyHeights("land", -0.05, 0.9);
}
// Heighmap Template: Atoll
function templateAtoll() {
addHill(2, 0.35);
addRange(1);
modifyHeights("all", 0.07, 1);
smoothHeights();
modifyHeights("0.27-10", 0, 0.1);
}
function addMountain() {
var x = Math.floor(Math.random() * mapWidth / 3 + mapWidth / 3);
var y = Math.floor(Math.random() * mapHeight * 0.2 + mapHeight * 0.4);
var rnd = diagram.find(x, y).index;
var height = Math.random() * 0.1 + 0.9;
add(rnd, "mountain", height);
}
function addHill(count, shift) {
// shift from 0 to 0.5
for (c = 0; c < count; c++) {
var limit = 0;
do {
var height = Math.random() * 0.4 + 0.1;
var x = Math.floor(Math.random() * mapWidth * (1-shift*2) + mapWidth * shift);
var y = Math.floor(Math.random() * mapHeight * (1-shift*2) + mapHeight * shift);
var rnd = diagram.find(x, y).index;
limit ++;
} while (cells[rnd].height + height > 0.9 && limit < 100)
add(rnd, "hill", height);
}
}
function add(start, type, height) {
var sharpness = 0.2;
var radius = 0.99;
if (type === "mountain") {radius = 0.9;}
var queue = []; // cells to check
var used = []; // used cells
cells[start].height += height;
cells[start].feature = undefined;
queue.push(start);
used.push(start);
for (i = 0; i < queue.length && height >= 0.01; i++) {
if (type == "mountain") {
height = +cells[queue[i]].height * radius - height / 100;
} else {
height *= radius;
}
cells[queue[i]].neighbors.forEach(function(e) {
if (used.indexOf(e) < 0) {
var mod = Math.random() * sharpness + 1.1 - sharpness;
if (sharpness == 0) {mod = 1;}
cells[e].height += height * mod;
if (cells[e].height > 1) {cells[e].height = 1;}
cells[e].feature = undefined;
queue.push(e);
used.push(e);
}
});
}
}
function addRange(mod, height, from, to) {
var count = Math.abs(mod);
for (c = 0; c < count; c++) {
var diff = 0;
var start = from;
var end = to;
if (!start || !end) {
do {
var xf = Math.floor(Math.random() * (mapWidth*0.7)) + mapWidth*0.15;
var yf = Math.floor(Math.random() * (mapHeight*0.6)) + mapHeight*0.2;
start = diagram.find(xf, yf).index;
var xt = Math.floor(Math.random() * (mapWidth*0.7)) + mapWidth*0.15;
var yt = Math.floor(Math.random() * (mapHeight*0.6)) + mapHeight*0.2;
end = diagram.find(xt, yt).index;
diff = Math.hypot(xt - xf, yt - yf);
} while (diff < 180 || diff > 400)
}
var range = [];
if (start && end) {
for (var l = 0; start != end && l < 1000; l++) {
var min = 10000;
cells[start].neighbors.forEach(function(e) {
diff = Math.hypot(cells[end].data[0] - cells[e].data[0], cells[end].data[1] - cells[e].data[1]);
if (Math.random() > 0.5) {diff = diff / 2}
if (diff < min) {
min = diff;
start = e;
}
});
range.push(start);
}
}
if (range.length > 0) {
var change = height ? height + 0.2 : Math.random() * 0.2 + 0.2;
var query = [];
var used = [];
for (var i = 1; change >= 0.01; i++) {
var rnd = Math.random() * 0.4 + 0.8;
change -= i / 40 * rnd;
range.map(function(r) {
cells[r].neighbors.forEach(function(e) {
if (used.indexOf(e) == -1 && Math.random() > 0.2 && change > 0) {
query.push(e);
used.push(e);
if (mod > 0) {
cells[e].height += change;
if (cells[e].height > 1) {cells[e].height = 1;}
} else if (cells[e].height >= 0.2) {
cells[e].height -= change;
if (cells[e].height < 0.1) {
cells[e].height = 0.13 + i / 100;
if (cells[e].height >= 0.2) {cells[e].height = 0.19;}
}
}
}
});
range = query.slice();
});
}
}
}
}
function addStrait(width) {
var top = Math.floor(Math.random() * mapWidth * 0.3 + mapWidth * 0.35);
var bottom = Math.floor((mapWidth - top) - (mapWidth * 0.1) + (Math.random() * mapWidth * 0.2));
var start = diagram.find(top, 0).index;
var end = diagram.find(bottom, mapHeight).index;
var range = [];
for (var l = 0; start !== end && l < 1000; l++) {
var min = 10000;
cells[start].neighbors.forEach(function(e) {
diff = Math.hypot(cells[end].data[0] - cells[e].data[0], cells[end].data[1] - cells[e].data[1]);
if (Math.random() > 0.5) {diff = diff / 2}
if (diff < min) {min = diff; start = e;}
});
range.push(start);
}
var query = [], used = [];
for (var i = 1; width > 0; i++) {
width --;
range.map(function(r) {
cells[r].neighbors.forEach(function(e) {
if (used.indexOf(e) == -1) {
query.push(e), used.push(e);
cells[e].height = (Math.floor(Math.random() * 11) + 10) / 100;
}
});
range = query.slice();
});
}
}
function addPit(count, height, cell) {
for (c = 0; c < count; c++) {
var change = height ? height + 0.2 : Math.random() * 0.3 + 0.2;
var start = cell, used = [];
if (!start) {
var lowlands = $.grep(cells, function(e) {return (e.height >= 0.2);});
if (lowlands.length == 0) {return;}
var rnd = Math.floor(Math.random() * lowlands.length);
start = lowlands[rnd].index;
}
var query = [start];
for (var i = 1; change >= 0.01; i++) {
var rnd = Math.random() * 0.4 + 0.8;
change -= i / 60 * rnd;
query.map(function(p) {
cells[p].neighbors.forEach(function(e) {
if (used.indexOf(e) == -1 && change > 0) {
query.push(e);
used.push(e);
cells[e].height -= change;
if (cells[e].height < 0.1) {
cells[e].height = 0.1 + i / 100;
if (cells[e].height >= 0.2) {cells[e].height = 0.19;}
}
}
});
});
}
}
}
// Modify heights multiplying/adding by value
function modifyHeights(type, add, mult) {
cells.map(function(i) {
if (type === "land") {
if (i.height >= 0.2) {
i.height += add;
var dif = i.height - 0.2;
var factor = mult;
if (mult == "^2") {factor = dif}
if (mult == "^3") {factor = dif * dif;}
i.height = 0.2 + dif * factor;
}
} else if (type === "all") {
if (i.height > 0) {
i.height += add;
i.height *= mult;
}
} else {
var interval = type.split("-");
if (i.height >= +interval[0] && i.height <= +interval[1]) {
i.height += add;
i.height *= mult;
}
}
});
}
// Smooth heights using mean of neighbors
function smoothHeights() {
cells.map(function(i) {
var heights = [i.height];
i.neighbors.forEach(function(e) {heights.push(cells[e].height);});
i.height = d3.mean(heights);
});
}
// Get polygone neighbors and update their height with small optional modifier
function neighbors(i, height) {
cells[i].neighbors.forEach(function(e) {
if (!cells[e].used) {
var mod = Math.random() * sharpness + 1.1 - sharpness;
if (sharpness == 0.1) {mod = 1;}
cells[e].height += height * mod;
cells[e].used = 1;
queue.push(e);
}
});
}
// Mark features (ocean, lakes, islands)
function markFeatures() {
console.time("markFeatures");
var queue = [], lake = 0, number = 0, type, greater = 0, less = 0;
// ensure all near border cells are ocean
cells.map(function(l) {
l.height = Math.trunc(l.height * 100) / 100;
if (l.type === -99) {
l.height = 0;
l.neighbors.forEach(function(e) {cells[e].height = 0;});
}
});
// start with top left corner to define Ocean first
var start = diagram.find(0, 0).index;
var unmarked = [cells[start]];
while (unmarked.length > 0) {
if (unmarked[0].height >= 0.2) {
type = "Island";
number = island;
island += 1;
greater = 0.2;
less = 100; // just to omit exclusion
} else {
type = "Lake";
number = lake;
lake += 1;
greater = -100; // just to omit exclusion
less = 0.2;
}
if (type == "Lake" && number == 0) {type = "Ocean";}
start = unmarked[0].index;
queue.push(start);
cells[start].feature = type;
cells[start].featureNumber = number;
while (queue.length > 0) {
var i = queue[0];
queue.shift();
cells[i].neighbors.forEach(function(e) {
if (!cells[e].feature && cells[e].height >= greater && cells[e].height < less) {
cells[e].feature = type;
cells[e].featureNumber = number;
queue.push(e);
}
if (type == "Island" && cells[e].height < 0.2) {
cells[i].type = 2;
cells[e].type = -1;
if (cells[e].feature === "Ocean") {
if (cells[i].harbor) {
cells[i].harbor += 1;
} else {
cells[i].harbor = 1;
}
}
}
});
}
unmarked = $.grep(cells, function(e) {return (!e.feature);});
}
console.timeEnd("markFeatures");
}
function drawOcean() {
console.time("drawOcean");
var limits = [], odd = 0.8; // initial odd for ocean layer is 80%
// Define type of ocean cells based on cell distance form land
var frontier = $.grep(cells, function(e) {return (e.type === -1);});
if (Math.random() < odd) {limits.push(-1); odd = 0.3;}
for (var c = -2; frontier.length > 0 && c > -10; c--) {
if (Math.random() < odd) {limits.unshift(c); odd = 0.3;} else {odd += 0.2;}
frontier.map(function(i) {
i.neighbors.forEach(function(e) {
if (!cells[e].type) {cells[e].type = c;}
});
});
frontier = $.grep(cells, function(e) {return (e.type === c);});
}
if (outlineLayers.value !== "random") {limits = outlineLayers.value.split(",");}
// Define area edges
for (var c = 0; c < limits.length; c++) {
var edges = [];
for (var i = 0; i < cells.length; i++) {
if (cells[i].feature === "Ocean" && cells[i].type >= limits[c]) {
var cell = diagram.cells[i];
cell.halfedges.forEach(function(e) {
var edge = diagram.edges[e];
if (edge.left && edge.right) {
var ea = edge.left.index;
if (ea === i) {ea = edge.right.index;}
var type = cells[ea].type;
if (type < limits[c] || type == undefined) {
var start = edge[0].join(" ");
var end = edge[1].join(" ");
edges.push({start, end});
}
} else {
var start = edge[0].join(" ");
var end = edge[1].join(" ");
edges.push({start, end});
}
})
}
}
lineGen.curve(d3.curveBasisClosed);
var relax = 0.8 - c / 10;
if (relax < 0.2) {relax = 0.2};
var line = getContinuousLine(edges, 0, relax);
oceanLayers.append("path").attr("d", line).attr("fill", "#ecf2f9").style("opacity", 0.4 / limits.length);
}
console.timeEnd("drawOcean");
}
// recalculate Voronoi Graph to pack cells
function reGraph() {
console.time("reGraph");
var tempCells = []; // to store new cells data
points = [], land = [], polygons= []; // clear old data
cells.map(function(i) {
var height = Math.trunc(i.height * 100) / 100;
var type = i.type || undefined;
if (type !== -1 && type !== -2 && height < 0.2) {return;}
var x = Math.round(i.data[0] * 10) / 10;
var y = Math.round(i.data[1] * 10) / 10;
var feature = i.feature;
var featureNumber = i.featureNumber;
var harbor = type === 2 ? +i.harbor : undefined;
var flux = y >= mapHeight / 2 ? 0.07 : 0.1;
points.push([x, y]);
tempCells.push({index:tempCells.length, data:[x, y], height, type, feature, featureNumber, harbor, flux});
if (type === 2 || type === -1) { // add additional points
i.neighbors.forEach(function(e) {
if (cells[e].type == type) {
var x1 = Math.ceil((x * 2 + cells[e].data[0]) / 3);
var y1 = Math.ceil((y * 2 + cells[e].data[1]) / 3);
var copy = $.grep(points, function(e) {return (e[0] == x1 && e[1] == y1);});
if (!copy.length) {
points.push([x1, y1]);
tempCells.push({index:tempCells.length, data:[x1, y1], height, type, feature, featureNumber, harbor, flux});
}
};
});
}
});
cells = tempCells; // use tempCells as the only cells array
calculateVoronoi(points); // recalculate Voronoi diagram using new points
var gridPath = ""; // store grid as huge single path string
cells.map(function(i, d) {
gridPath += "M" + polygons[d].join("L") + "Z";
var neighbors = []; // re-detect neighbors
diagram.cells[d].halfedges.forEach(function(e) {
var edge = diagram.edges[e], ea;
if (edge.left && edge.right) {
ea = edge.left.index;
if (ea === d) {ea = edge.right.index;}
neighbors.push(ea);
}
})
i.neighbors = neighbors;
});
grid.append("path").attr("d", round(gridPath));
land = $.grep(cells, function(e) {return (e.height >= 0.2);});
land.sort(function(a, b) {return b.height - a.height;});
console.timeEnd("reGraph");
}
// Draw temp Heightmap for the Journey
function mockHeightmap() {
$("#landmass").empty();
var elevation = [];
cells.map(function(i) {
if (i.height > 1) {i.height = 1;}
if (i.height < 0) {i.height = 0;}
if (i.height >= 0.2) {
elevation.push(i.height);
landmass.append("path")
.attr("d", "M" + polygons[i.index].join("L") + "Z")
.attr("fill", color(1 - i.height))
.attr("stroke", color(1 - i.height));
}
});
var elevationAverage = Math.round(d3.mean(elevation) * 100) / 100;
var landRatio = Math.round(elevation.length / cells.length * 100)
landmassCounter.innerHTML = elevation.length + " (" + landRatio + "%); Average Elevation: " + elevationAverage;
if (elevation.length > 500 && elevation.length > manorsCount * 2) {
$("#getMap").attr("disabled", false).removeClass("buttonoff");
} else {
$("#getMap").attr("disabled", true).addClass("buttonoff");
}
if (elevation.length > 0) {
$("#rescalePlus, #rescaleMinus, #smoothHeights").removeClass("buttonoff");
$("#featureIsland").attr("disabled", true).addClass("buttonoff");
} else {
$("#rescalePlus, #rescaleMinus, #smoothHeights").addClass("buttonoff");
$("#featureIsland").attr("disabled", false).removeClass("buttonoff");
}
}
// Draw edgy coastline for the Journey
function mockCoastline() {
$("#landmass").empty();
var edges = [];
land = $.grep(cells, function(e) {return (e.height >= 0.2);});
land.map(function(c) {
var cell = diagram.cells[c.index];
cell.halfedges.forEach(function(e) {
var edge = diagram.edges[e];
if (edge.left && edge.right) {
var ea = edge.left.index;
if (ea === c.index) {ea = edge.right.index;}
if (cells[ea].height < 0.2) {
var start = edge[0].join(" ");
var end = edge[1].join(" ");
edges.push({start, end});
}
}
})
});
lineGen.curve(d3.curveLinear);
var line = getContinuousLine(edges, 0, 0);
landmass.append("path").attr("d", line);
}
// Detect and draw the coasline
function drawCoastline() {
console.time('drawCoastline');
$("#landmass").empty();
var oceanEdges = [], lakeEdges = [];
for (var i = 0; i < land.length; i++) {
var id = land[i].index;
var cell = diagram.cells[id];
cell.halfedges.forEach(function(e) {
var edge = diagram.edges[e];
if (edge.left && edge.right) {
var ea = edge.left.index;
if (ea === id) {ea = edge.right.index;}
if (cells[ea].height < 0.2) {
var start = edge[0].join(" ");
var end = edge[1].join(" ");
var x = (edge[0][0] + edge[1][0]) / 2;
var y = (edge[0][1] + edge[1][1]) / 2;
if (cells[ea].feature === "Lake") {
lakeEdges.push({start, end});
cells[id].data[0] = x + (cells[id].data[0] - x) * 0.4;
cells[id].data[1] = y + (cells[id].data[1] - y) * 0.4;
} else {
oceanEdges.push({start, end});
if (cells[id].type !== 1) {
// locate place at shore
var coastX = x + (cells[id].data[0] - x) * 0.12;
var coastY = y + (cells[id].data[1] - y) * 0.12;
var pointX = x + (cells[id].data[0] - x) * 0.4;
var pointY = y + (cells[id].data[1] - y) * 0.4;
cells[id].coastX = Math.round(coastX * 100) / 100;
cells[id].coastY = Math.round(coastY * 100) / 100;
cells[id].data[0] = Math.round(pointX * 100) / 100;
cells[id].data[1] = Math.round(pointY * 100) / 100;
cells[id].type = 1;
cells[id].haven = ea; // mark haven
}
}
}
}
})
}
getCurveType();
var line = getContinuousLine(oceanEdges, 1.5, 0);
d3.select("#shape").append("path").attr("d", line).attr("fill", "white"); // draw the clippath
landmass.append("path").attr("d", line); // draw the landmass
coastline.append("path").attr("d", line); // draw the coastline
line = getContinuousLine(lakeEdges, 1.5, 0);
lakes.append("path").attr("d", line); // draw the lakes
d3.select("#shape").append("path").attr("d", line).attr("fill", "white"); // draw the clippath
console.timeEnd('drawCoastline');
}
function getContinuousLine(edges, indention, relax) {
var line = "";
while (edges.length > 2) {
var edgesOrdered = []; // to store points in a correct order
var start = edges[0].start;
var end = edges[0].end;
edges.shift();
var spl = start.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
spl = end.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
var x0 = spl[0];
var y0 = spl[1];
for (var i = 0; end !== start && i < 2000; i++) {
var next = $.grep(edges, function(e) {return (e.start == end || e.end == end);});
if (next.length > 0) {
if (next[0].start == end) {
end = next[0].end;
} else if (next[0].end == end) {
end = next[0].start;
}
spl = end.split(" ");
var dist = Math.hypot(spl[0] - x0, spl[1] - y0);
if (dist >= indention && Math.random() > relax) {
edgesOrdered.push({scX: spl[0], scY: spl[1]});
x0 = spl[0];
y0 = spl[1];
}
}
var rem = edges.indexOf(next[0]);
edges.splice(rem, 1);
}
line += lineGen(edgesOrdered) + "Z";
}
return round(line);
}
// Resolve Heightmap Depressions (for a correct water flux modeling)
function resolveDepressions() {
console.time('resolveDepressions');
var depression = 1, limit = 100, minCell, minHigh;
for (var l = 0; depression > 0 && l < limit; l++) {
depression = 0;
for (var i = 0; i < land.length; i++) {
var heights = [];
land[i].neighbors.forEach(function(e) {heights.push(+cells[e].height);});
var minHigh = d3.min(heights);
if (land[i].height <= minHigh) {
depression += 1;
land[i].height = minHigh + 0.01;
}
}
if (l === limit - 1) {console.error("Error: resolveDepressions iteration limit");}
}
console.timeEnd('resolveDepressions');
}
function flux() {
console.time('flux');
riversData = [];
var riversOrder = [], riverNext = 0;
land.sort(function(a, b) {return b.height - a.height;});
for (var i = 0; i < land.length; i++) {
var id = land[i].index;
var heights = [];
land[i].neighbors.forEach(function(e) {heights.push(cells[e].height);});
var minId = heights.indexOf(d3.min(heights));
var min = land[i].neighbors[minId];
// Define river number
if (land[i].flux > 0.85) {
if (land[i].river == undefined) {
// State new River
land[i].river = riverNext;
riversData.push({river: riverNext, cell: id, x: land[i].data[0], y: land[i].data[1]});
riverNext += 1;
}
// Assing existing River to the downhill cell
if (cells[min].river == undefined) {
cells[min].river = land[i].river;
} else {
var riverTo = cells[min].river;
var iRiver = $.grep(riversData, function(e) {return (e.river == land[i].river);});
var minRiver = $.grep(riversData, function(e) {return (e.river == riverTo);});
var iRiverL = iRiver.length;
var minRiverL = minRiver.length;
// re-assing river nunber if new part is greater
if (iRiverL >= minRiverL) {
cells[min].river = land[i].river;
iRiverL += 1;
minRiverL -= 1;
}
// mark confluences
if (cells[min].height >= 0.2 && iRiverL > 1 && minRiverL > 1) {
if (!cells[min].confluence) {
cells[min].confluence = minRiverL-1;
} else {
cells[min].confluence += minRiverL-1;
}
}
}
}
cells[min].flux = +(cells[min].flux+land[i].flux).toFixed(2);
if (land[i].river != undefined) {
var px = cells[min].data[0];
var py = cells[min].data[1];
if (cells[min].height < 0.2) {
// pour water to the Ocean
var sx = land[i].data[0];
var sy = land[i].data[1];
var x = (px + sx) / 2 + (px - sx) / 20;
var y = (py + sy) / 2 + (py - sy) / 20;
riversData.push({river: land[i].river, cell: id, x, y});
}
else {
// add next River segment
riversData.push({river: land[i].river, cell: min, x: px, y: py});
}
}
}
console.timeEnd('flux');
drawRiverLines(riverNext);
}
function drawRiverLines(riverNext) {
console.time('drawRiverLines');
lineGen.curve(d3.curveCatmullRom.alpha(0.1));
for (var i = 0; i < riverNext; i++) {
var dataRiver = $.grep(riversData, function(e) {return e.river === i;});
if (dataRiver.length > 1) {
var riverAmended = amendRiver(dataRiver, 1);
var d = drawRiver(riverAmended);
rivers.append("path").attr("d", d).attr("data-points", JSON.stringify(riverAmended));
}
}
rivers.selectAll("path").on("click", editRiver);
console.timeEnd('drawRiverLines');
}
// add more river points on 1/3 and 2/3 of length
function amendRiver(dataRiver, rndFactor) {
var riverAmended = [], side = 1;
for (var r = 0; r < dataRiver.length; r++) {
var dX = dataRiver[r].x;
var dY = dataRiver[r].y;
riverAmended.push({scX:dX, scY:dY});
if (r+1 < dataRiver.length) {
var eX = dataRiver[r+1].x;
var eY = dataRiver[r+1].y;
var angle = Math.atan2(eY - dY, eX - dX);
var serpentine = 1 / (r+1);
var meandr = serpentine + 0.3 + Math.random() * 0.3 * rndFactor;
if (Math.random() > 0.5) {side *= -1};
var dist = Math.hypot(eX - dX, eY - dY);
// if dist is big or river is small add 2 extra points
if (dist > 8 || (dist > 4 && dataRiver.length < 6)) {
var stX = (dX * 2 + eX) / 3;
var stY = (dY * 2 + eY) / 3;
var enX = (dX + eX * 2) / 3;
var enY = (dY + eY * 2) / 3;
stX += -Math.sin(angle) * meandr * side;
stY += Math.cos(angle) * meandr * side;
if (Math.random() > 0.8) {side *= -1};
enX += Math.sin(angle) * meandr * side;
enY += -Math.cos(angle) * meandr * side;
riverAmended.push({scX:stX, scY:stY}, {scX:enX, scY:enY});
// if dist is medium or river is small add 1 extra point
} else if (dist > 4 || dataRiver.length < 6) {
var scX = (dX + eX) / 2;
var scY = (dY + eY) / 2;
scX += -Math.sin(angle) * meandr * side;
scY += Math.cos(angle) * meandr * side;
riverAmended.push({scX, scY});
}
}
}
return riverAmended;
}
function drawRiver(riverPoints, startWidth, widening) {
var extraWidth = startWidth || 0.02;
var widening = widening || 200;
var d = lineGen(riverPoints);
var river = defs.append("path").attr("d", d);
var riverLength = river.node().getTotalLength();
var riverPointsLeft = [], riverPointsRight = [];
for (var l=0; l < riverLength; l++) {
var point = river.node().getPointAtLength(l);
var cell = diagram.find(point.x, point.y, 1);
if (cell) {
var confluence = cells[cell.index].confluence;
if (confluence) {extraWidth += Math.atan(confluence / 100);}
}
var from = river.node().getPointAtLength(l - 0.1);
var to = river.node().getPointAtLength(l + 0.1);
var angle = Math.atan2(from.y - to.y, from.x - to.x);
//debug.append("circle").attr("cx", point.x).attr("cy", point.y).attr("r", 0.1).attr("fill", "red");
//debug.append("line").attr("x1", to.x).attr("y1", to.y).attr("x2", from.x).attr("y2", from.y).attr("stroke", "white");
var offset = Math.atan(l / widening) + extraWidth;
var xLeft = point.x + -Math.sin(angle) * offset;
var yLeft = point.y + Math.cos(angle) * offset;
riverPointsLeft.push({scX:xLeft, scY:yLeft});
var xRight = point.x + Math.sin(angle) * offset;
var yRight = point.y + -Math.cos(angle) * offset;
riverPointsRight.unshift({scX:xRight, scY:yRight});
}
var point = river.node().getPointAtLength(riverLength);
var from = river.node().getPointAtLength(riverLength - 0.1);
var angle = Math.atan2(from.y - point.y, from.x - point.x);
var offset = Math.atan(riverLength / widening) + extraWidth;
var xLeft = point.x + -Math.sin(angle) * offset;
var yLeft = point.y + Math.cos(angle) * offset;
riverPointsLeft.push({scX:xLeft, scY:yLeft});
var xRight = point.x + Math.sin(angle) * offset;
var yRight = point.y + -Math.cos(angle) * offset;
riverPointsRight.unshift({scX:xRight, scY:yRight});
river.remove();
var right = lineGen(riverPointsRight);
var left = lineGen(riverPointsLeft);
left = left.substring(left.indexOf("C"));
var d = right + left + "Z";
d = d.replace(/[\d\.-][\d\.e-]*/g, function(n) {return Math.round(n*100)/100;});
return d;
}
function editRiver() {
if (elSelected) {
if ($("#riverNew").hasClass('pressed')) {
var point = d3.mouse(this);
addRiverPoint({scX:point[0], scY:point[1]});
redrawRiver();
$("#riverNew").click();
return;
}
elSelected.call(d3.drag().on("drag", null)).classed("draggable", false);
rivers.select(".riverPoints").remove();
}
elSelected = d3.select(this);
elSelected.call(d3.drag().on("drag", riverDrag)).classed("draggable", true);
var points = JSON.parse(elSelected.attr("data-points"));
rivers.append("g").attr("class", "riverPoints").attr("transform", elSelected.attr("transform"));
points.map(function(p) {addRiverPoint(p)});
var tr = parseTransform(elSelected.attr("transform"));
riverAngle.value = tr[2];
riverAngleValue.innerHTML = Math.abs(+tr[2]) + "°";
riverScale.value = tr[5];
$("#editRiver").dialog({
title: "Edit River",
classes: {
"ui-dialog": "editorDialog",
"ui-dialog-titlebar": "editorDialogTitle"},
height: 78, width: 275, modal: false, resizable: false,
position: {my: "center top", at: "top", of: this}
}).css({"font-size": "14px"}).on('dialogclose', function(event) {
if (elSelected) {
elSelected.call(d3.drag().on("drag", null)).classed("draggable", false);
rivers.select(".riverPoints").remove();
$(".pressed").removeClass('pressed');
viewbox.style("cursor", "default");
}
});
}
function addRiverPoint(point) {
rivers.select(".riverPoints").append("circle")
.attr("cx", point.scX).attr("cy", point.scY).attr("r", 0.25)
.call(d3.drag().on("drag", riverPointDrag))
.on("click", function(d) {
if ($("#riverRemovePoint").hasClass('pressed')) {
$(this).remove(); redrawRiver();
}
if ($("#riverNew").hasClass('pressed')) {
$("#riverNew").click();
}
});
}
$("#editRiver .editButton, #editRiver .editButtonS").click(function() {
if (this.id == "riverRemove") {
if (confirm("Are you sure you want to remove the river?")) {
elSelected.remove();
rivers.select(".riverPoints").remove();
$("#editRiver").dialog("close");
}
return;
}
if (this.id == "riverCopy") {
var tr = parseTransform(elSelected.attr("transform"));
var d = elSelected.attr("d");
var points = elSelected.attr("data-points");
var x = 2, y = 2;
transform = `translate(${tr[0]-x},${tr[1]-y}) rotate(${tr[2]} ${tr[3]} ${tr[4]}) scale(${tr[5]})`;
while (rivers.selectAll("[transform='" + transform + "'][d='" + d + "']").size() > 0) {
x += 2; y += 2;
transform = `translate(${tr[0]-x},${tr[1]-y}) rotate(${tr[2]} ${tr[3]} ${tr[4]}) scale(${tr[5]})`;
}
rivers.append("path").attr("d", d).attr("data-points", points).attr("transform", transform).on("click", editRiver);
return;
}
if (this.id == "riverRenegerate") {
// restore main points
var points = JSON.parse(elSelected.attr("data-points"));
var riverCells = [], dataRiver = [];
for (var p = 0; p < points.length; p++) {
var cell = diagram.find(points[p].scX, points[p].scY, 1);
if (cell !== null && cell !== riverCells[riverCells.length-1]) {riverCells.push(cell);}
}
for (var c = 0; c < riverCells.length; c++) {
dataRiver.push({x:riverCells[c][0], y:riverCells[c][1]});
}
// if last point not in cell center push it with one extra point
var last = points.pop();
if (dataRiver[dataRiver.length-1].x !== last.scX) {
dataRiver.push({x:last.scX, y:last.scY});
}
var rndFactor = 0.2 + Math.random() * 1.6; // random factor in range 0.2-1.8
var riverAmended = amendRiver(dataRiver, rndFactor);
lineGen.curve(d3.curveCatmullRom.alpha(0.1));
var startWidth = 0.01 + Math.random() * 0.04;
var widening = 20 + Math.random() * 200;
var d = drawRiver(riverAmended, startWidth, widening);
elSelected.attr("d", d).attr("data-points", JSON.stringify(riverAmended));
rivers.select(".riverPoints").selectAll("*").remove();
riverAmended.map(function(p) {addRiverPoint(p);});
return;
}
if (this.id == "riverRisize") {$("#riverAngle, #riverAngleValue, #riverScaleIcon, #riverScale, #riverReset").toggle();}
if (this.id == "riverAddPoint" || this.id == "riverRemovePoint" || this.id == "riverNew") {
if ($(this).hasClass('pressed')) {
$(".pressed").removeClass('pressed');
if (elSelected.attr("data-river") == "new") {
rivers.select(".riverPoints").selectAll("*").remove();
elSelected.attr("data-river", "");
elSelected.call(d3.drag().on("drag", riverDrag)).classed("draggable", true);
}
viewbox.style("cursor", "default");
} else {
$(".pressed").removeClass('pressed');
$(this).addClass('pressed');
if (this.id == "riverAddPoint" || this.id == "riverNew") {viewbox.style("cursor", "crosshair");}
if (this.id == "riverNew") {rivers.select(".riverPoints").selectAll("*").remove();}
}
return;
}
if (this.id == "riverReset") {
elSelected.attr("transform", "");
rivers.select(".riverPoints").attr("transform", "");
riverAngle.value = 0;
riverAngleValue.innerHTML = "0°";
riverScale.value = 1;
return;
}
$("#editRiver .editButton").toggle();
$(this).show().next().toggle();
});
// on riverAngle change
$("#riverAngle").change(function() {
var tr = parseTransform(elSelected.attr("transform"));
riverAngleValue.innerHTML = Math.abs(+this.value) + "°";
$(this).attr("title", $(this).val());
var c = elSelected.node().getBBox();
var angle = this.value;
var scale = +tr[5];
transform = `translate(${tr[0]},${tr[1]}) rotate(${angle} ${(c.x+c.width/2)*scale} ${(c.y+c.height/2)*scale}) scale(${scale})`;
elSelected.attr("transform", transform);
rivers.select(".riverPoints").attr("transform", transform);
});
// on riverScale change
$("#riverScale").change(function() {
var tr = parseTransform(elSelected.attr("transform"));
$(this).attr("title", $(this).val());
var scaleOld = +tr[5];
var scale = +this.value;
var c = elSelected.node().getBBox();
var cx = c.x+c.width/2;
var cy = c.y+c.height/2;
var trX = +tr[0] + cx * (scaleOld - scale);
var trY = +tr[1] + cy * (scaleOld - scale);
var scX = +tr[3] * scale/scaleOld;
var scY = +tr[4] * scale/scaleOld;
transform = `translate(${trX},${trY}) rotate(${tr[2]} ${scX} ${scY}) scale(${scale})`;
elSelected.attr("transform", transform);
rivers.select(".riverPoints").attr("transform", transform);
});
function riverDrag() {
var x = d3.event.x, y = d3.event.y;
var el = d3.select(this);
var tr = parseTransform(el.attr("transform"));
d3.event.on("drag", function() {
xc = d3.event.x, yc = d3.event.y;
var transform = `translate(${(+tr[0]+xc-x)},${(+tr[1]+yc-y)}) rotate(${tr[2]} ${tr[3]} ${tr[4]}) scale(${tr[5]})`;
el.attr("transform", transform);
rivers.select(".riverPoints").attr("transform", transform);
});
}
function parseTransform(string) {
// [translateX,translateY,rotateDeg,rotateX,rotateY,scale]
if (!string) {return [0,0,0,0,0,1];}
var a = string.replace(/[a-z()]/g,"").replace(/[ ]/g,",").split(",");
return [a[0] || 0, a[1] || 0, a[2] || 0, a[3] || 0, a[4] || 0, a[5] || 1];
}
function riverPointDrag() {
var x = d3.event.x, y = d3.event.y;
var el = d3.select(this);
d3.event
.on("drag", function() {el.attr("cx", d3.event.x).attr("cy", d3.event.y);})
.on("end", function() {
if (Math.abs(d3.event.x - x) + Math.abs(d3.event.y - y) > 0) {redrawRiver();}
});
}
function redrawRiver() {
var points = [];
rivers.select(".riverPoints").selectAll("circle").each(function() {
var el = d3.select(this);
points.push({scX: +el.attr("cx"), scY: +el.attr("cy")});
});
lineGen.curve(d3.curveCatmullRom.alpha(0.1));
var d = drawRiver(points);
elSelected.attr("d", d).attr("data-points", JSON.stringify(points));
}
function manorsAndRegions() {
console.group('manorsAndRegions');
calculateChains();
rankPlacesGeography();
getCurveType();
locateCultures();
locateCapitals();
generateMainRoads();
rankPlacesEconomy();
locateTowns();
// temporary off as now there are too many islands and searoutes produce mess
//checkAccessibility();
drawManors();
defineRegions();
drawRegions();
generatePortRoads();
generateSmallRoads();
generateOceanRoutes();
console.groupEnd('manorsAndRegions');
}
// Assess cells geographycal suitability for settlement
function rankPlacesGeography() {
console.time('rankPlacesGeography');
land.map(function(c) {
var score = (1 - c.height) * 5; // base score from height (will be biom)
if (c.type && Math.random() < 0.8 && !c.river) {
c.score = 0; // ignore 80% of extended cells
} else {
if (c.type === 1 && c.harbor) {
score += 3 - c.harbor; // good sea harbor is valued
if (c.river && c.harbor === 1) {score += 3;} // estuaries are valued
}
if (c.flux > 1) {score += c.flux / 2;} // riverbank is valued
if (c.confluence) {score += c.confluence / 2;} // confluence is valued;
}
c.score = Math.floor(score);
});
land.sort(compareScore);
console.timeEnd('rankPlacesGeography');
}
// Assess the cells economical suitability for settlement
function rankPlacesEconomy() {
console.time('rankPlacesEconomy');
land.map(function(c) {
var score = c.score;
if (c.path) {
var path = Math.ceil(c.path / 15);
if (path < 1) {path = 1;}
if (path > 5) {path = 5;}
if (c.crossroad) {path *= 2;} // crossroads are valued
score += path; // roads are valued
}
c.score = Math.floor(Math.random() * score + score); // 0.5 random factor
});
land.sort(compareScore);
console.timeEnd('rankPlacesEconomy');
}
function compareScore(a, b) {
if (a.score < b.score) return 1;
if (a.score > b.score) return -1;
return 0;
}
// Locate cultures
function locateCultures() {
var cultureCenters = d3.range(7).map(function(d) {return [Math.random() * mapWidth, Math.random() * mapHeight];});
cultureTree = d3.quadtree().extent([[0, 0], [mapHeight, mapWidth]]).addAll(cultureCenters);;
}
function locateCapitals() {
console.time('locateCapitals');
var spacing = mapWidth / capitalsCount;
manorTree = d3.quadtree().extent([[0, 0], [mapHeight, mapWidth]]);
if (power > 0) {spacing / power;}
console.log(" capitals: " + capitalsCount);
for (var l = 0; l < land.length && manors.length < capitalsCount; l++) {
var m = manors.length;
var dist = 10000;
if (l > 0) {
var closest = manorTree.find(land[l].data[0], land[l].data[1]);
dist = Math.hypot(land[l].data[0] - closest[0], land[l].data[1] - closest[1]);
}
if (dist >= spacing) {
if (land[l].harbor > 0 && land[l].type === 1) {
land[l].port = true;
land[l].data[0] = land[l].coastX;
land[l].data[1] = land[l].coastY;
}
if (land[l].river) {
var shift = Math.floor(0.2 * land[l].flux);
if (shift < 0.2) {shift = 0.2;}
if (shift > 1) {shift = 1;}
land[l].data[0] += shift - Math.random();
land[l].data[1] += shift - Math.random();
}
land[l].data[0] = +(land[l].data[0]).toFixed(2);
land[l].data[1] = +(land[l].data[1]).toFixed(2);
var cell = land[l].index;
queue.push(cell);
queue.push(...land[l].neighbors);
var closest = cultureTree.find(land[l].data[0], land[l].data[1]);
var culture = cultureTree.data().indexOf(closest);
var name = generateName(culture);
var capitalPower = Math.round((Math.random() * power / 2 + 1) * 10) / 10;
manors.push({i: m, cell, x: land[l].data[0], y: land[l].data[1], region: m, power: capitalPower, score: land[l].score, culture, name});
manorTree.add([land[l].data[0], land[l].data[1]]);
}
if (l === land.length - 1) {
console.error("Cannot place capitals with current spacing. Trying again with reduced spacing");
l = -1;
manors = [];
queue = [];
manorTree = d3.quadtree().extent([[0, 0], [mapHeight, mapWidth]]);
spacing /= 1.2;
}
}
manors.map(function(e, i) {
var p = cells[e.cell];
p.manor = i;
p.region = i;
p.culture = e.culture;
});
console.timeEnd('locateCapitals');
}
function locateTowns() {
console.time('locateTowns');
for (var l = 0; l < land.length && manors.length < manorsCount; l++) {
if (queue.indexOf(land[l].index) == -1) {
if (land[l].harbor === 1 && land[l].type === 1) {
land[l].port = true;
land[l].data[0] = land[l].coastX;
land[l].data[1] = land[l].coastY;
}
queue.push(land[l].index);
if (land[l].type || Math.random() > 0.6) {queue.push(...land[l].neighbors);}
if (land[l].river) {
var shift = Math.floor(0.2 * land[l].flux);
if (shift < 0.2) {shift = 0.2;}
if (shift > 1) {shift = 1;}
land[l].data[0] += shift - Math.random();
land[l].data[1] += shift - Math.random();
}
land[l].data[0] = +(land[l].data[0]).toFixed(2);
land[l].data[1] = +(land[l].data[1]).toFixed(2);
var x = land[l].data[0];
var y = land[l].data[1];
var cell = land[l].index;
var region = "neutral", culture = -1, closest = neutral;
for (c = 0; c < capitalsCount; c++) {
var dist = Math.hypot(manors[c].x - x, manors[c].y - y) / manors[c].power;
var cap = manors[c].cell;
if (cells[cell].featureNumber !== cells[cap].featureNumber) {dist *= 3;}
if (dist < closest) {region = c; closest = dist;}
}
if (closest > neutral / 5 || region === "neutral") {
var closestCulture = cultureTree.find(x, y);
culture = cultureTree.data().indexOf(closestCulture);
} else {
culture = manors[region].culture;
}
var name = generateName(culture);
land[l].manor = manors.length;
land[l].culture = culture;
land[l].region = region;
manors.push({i: manors.length, cell, x, y, region, score: land[l].score, culture, name});
}
if (l === land.length - 1) {
console.error("Cannot place all towns. Towns requested: " + manorsCount + ". Towns placed: " + manors.length);
}
}
console.timeEnd('locateTowns');
}
// Validate each island with manors has at least one port (so Island is accessible)
function checkAccessibility() {
console.time("checkAccessibility");
for (var i = 0; i < island; i++) {
var manorsOnIsland = $.grep(land, function(e) {return (typeof e.manor !== "undefined" && e.featureNumber === i);});
if (manorsOnIsland.length > 0) {
var ports = $.grep(manorsOnIsland, function(p) {return (p.port);});
if (ports.length === 0) {
var portCandidates = $.grep(manorsOnIsland, function(c) {return (c.harbor && c.type === 1);});
if (portCandidates.length > 0) {
console.error("No ports on Island " + manorsOnIsland[0].featureNumber + ". Upgrading first manor to port");
portCandidates[0].harbor = 1;
portCandidates[0].port = true;
portCandidates[0].data[0] = portCandidates[0].coastX;
portCandidates[0].data[1] = portCandidates[0].coastY;
manors[portCandidates[0].manor].x = portCandidates[0].coastX;
manors[portCandidates[0].manor].y = portCandidates[0].coastY;
} else {
console.error("Cannot generate ports on Island " + manorsOnIsland[0].featureNumber + ". Removing " + manorsOnIsland.length + " manors");
manorsOnIsland.map(function(e) {
manors.splice(e.manor, 1);
e.manor = undefined;
});
}
}
}
}
console.timeEnd("checkAccessibility");
}
function generateMainRoads() {
console.time("generateMainRoads");
for (var i = 0; i < island; i++) {
var manorsOnIsland = $.grep(land, function(e) {return (typeof e.manor !== "undefined" && e.featureNumber === i);});
if (manorsOnIsland.length > 1) {
for (var d = 1; d < manorsOnIsland.length; d++) {
for (var m = 0; m < d; m++) {
var path = findLandPath(manorsOnIsland[d].index, manorsOnIsland[m].index, "main");
restorePath(manorsOnIsland[m].index, manorsOnIsland[d].index, "main", path);
}
}
}
}
console.timeEnd("generateMainRoads");
}
function generatePortRoads() {
console.time("generatePortRoads");
var landCapitals = $.grep(land, function(e) {return (e.manor < capitalsCount && !e.port);});
landCapitals.map(function(e) {
var ports = $.grep(land, function(l) {return (l.port && l.region === e.manor);});
var minDist = 1000, end = -1;
ports.map(function(p) {
var dist = Math.hypot(e.data[0] - p.data[0], e.data[1] - p.data[1]);
if (dist < minDist) {minDist = dist; end = p.index;}
});
if (end !== -1) {
var start = e.index;
var path = findLandPath(start, end, "direct");
restorePath(end, start, "main", path);
}
});
console.timeEnd("generatePortRoads");
}
function generateSmallRoads() {
console.time("generateSmallRoads");
lineGen.curve(d3.curveBasis);
console.log(" islands: " + island);
for (var i = 0; i < island; i++) {
var manorsOnIsland = $.grep(land, function(e) {return (typeof e.manor !== "undefined" && e.featureNumber === i);});
var l = manorsOnIsland.length;
if (l > 1) {
var secondary = Math.floor((l + 8) / 10);
for (s = 0; s < secondary; s++) {
var start = manorsOnIsland[Math.floor(Math.random() * l)].index;
var end = manorsOnIsland[Math.floor(Math.random() * l)].index;
var dist = Math.hypot(cells[start].data[0] - cells[end].data[0], cells[start].data[1] - cells[end].data[1]);
if (dist > 10) {
var path = findLandPath(start, end, "direct");
restorePath(end, start, "small", path);
}
}
manorsOnIsland.map(function(e, d) {
if (!e.path && d > 0) {
var start = e.index, end = -1;
var road = $.grep(land, function(e) {return (e.path && e.featureNumber === i);});
if (road.length > 0) {
var minDist = 10000;
road.map(function(i) {
var dist = Math.hypot(e.data[0] - i.data[0], e.data[1] - i.data[1]);
if (dist < minDist) {minDist = dist; end = i.index;}
});
} else {
end = manorsOnIsland[0].index;
}
var path = findLandPath(start, end, "main");
restorePath(end, start, "small", path);
}
});
}
}
console.timeEnd("generateSmallRoads");
}
function generateOceanRoutes() {
console.time("generateOceanRoutes");
lineGen.curve(d3.curveBasis);
var ports = [];
for (var i = 0; i < island; i++) {
ports[i] = $.grep(land, function(e) {return (e.featureNumber === i && e.port);});
if (!ports[i]) {ports[i] = [];}
}
ports.sort(function(a, b) {return a.length < b.length;})
for (var i = 0; i < island; i++) {
if (ports[i].length === 0) {break;}
var length = ports[i].length;
ports[i].sort(function(a, b) {return a.score < b.score;})
var start = ports[i][0].index;
var paths = findOceanPaths(start, -1);
/* draw anchor icons
for (var p = 0; p < ports[i].length; p++) {
var x0 = ports[i][p].data[0];
var y0 = ports[i][p].data[1];
var x1 = cells[h.haven].data[0];
var y1 = cells[h.haven].data[1];
var x = x0 + (x1 - x0) * 0.8;
var y = y0 + (y1 - y0) * 0.8;
icons.append("use").attr("xlink:href", "#icon-anchor").attr("x", x).attr("y", y).attr("width", 1).attr("height", 1);
} */
for (var h = 1; h < length; h++) {
var end = ports[i][h].index;
restorePath(end, start, "ocean", paths);
}
for (var c = i + 1; c < island; c++) {
if (ports[c].length > 3 && length > 3) {
var end = ports[c][0].index;
restorePath(end, start, "ocean", paths);
}
}
if (length > 5) {
ports[i].sort(function(a, b) {return b.cost - a.cost;});
for (var a = 2; a < length && a < 10; a++) {
var dist = Math.hypot(ports[i][1].data[0] - ports[i][a].data[0], ports[i][1].data[1] - ports[i][a].data[1]);
var distPath = getPathDist(ports[i][1].index, ports[i][a].index);
if (distPath > dist * 4 + 10) {
var totalCost = ports[i][1].cost + ports[i][a].cost;
var paths = findOceanPaths(ports[i][1].index, ports[i][a].index);
if (ports[i][a].cost < totalCost) {
restorePath(ports[i][a].index, ports[i][1].index, "ocean", paths);
break;
}
}
}
}
}
console.timeEnd("generateOceanRoutes");
}
function findLandPath(start, end, type) {
// A* algorithm
var queue = new PriorityQueue({comparator: function(a, b) {return a.p - b.p}});
var cameFrom = [];
var costTotal = [];
costTotal[start] = 0;
queue.queue({e: start, p: 0});
while (queue.length > 0) {
var next = queue.dequeue().e;
if (next === end) {break;}
var pol = cells[next];
pol.neighbors.forEach(function(e) {
if (cells[e].height >= 0.2) {
var cost = cells[e].height * 2;
if (cells[e].path && type === "main") {
cost = 0.15;
} else {
if (typeof e.manor === "undefined") {cost += 0.1;}
if (typeof e.river !== "undefined") {cost -= 0.1;}
if (cells[e].type === 1) {cost *= 0.3;}
if (cells[e].path) {cost *= 0.5;}
cost += Math.hypot(cells[e].data[0] - pol.data[0], cells[e].data[1] - pol.data[1]) / 30;
}
var costNew = costTotal[next] + cost;
if (!cameFrom[e] || costNew < costTotal[e]) { //
costTotal[e] = costNew;
cameFrom[e] = next;
var dist = Math.hypot(cells[e].data[0] - cells[end].data[0], cells[e].data[1] - cells[end].data[1]) / 15;
var priority = costNew + dist;
queue.queue({e, p: priority});
}
}
});
}
return cameFrom;
}
function findLandPaths(start, type) {
// Dijkstra algorithm
var queue = new PriorityQueue({comparator: function(a, b) {return a.p - b.p}});
var cameFrom = [];
var costTotal = [];
cameFrom[start] = "no";
costTotal[start] = 0;
queue.queue({e: start, p: 0});
while (queue.length > 0) {
var next = queue.dequeue().e;
var pol = cells[next];
pol.neighbors.forEach(function(e) {
var cost = cells[e].height;
if (cost >= 0.2) {
cost *= 2;
if (typeof e.river !== "undefined") {cost -= 0.2;}
if (pol.region !== cells[e].region) {cost += 1;}
if (cells[e].region === "neutral") {cost += 1;}
if (typeof e.manor !== "undefined") {cost = 0.1;}
var costNew = costTotal[next] + cost;
if (!cameFrom[e]) {
costTotal[e] = costNew;
cameFrom[e] = next;
queue.queue({e, p: costNew});
}
}
});
}
return cameFrom;
}
function findOceanPaths(start, end) {
var queue = new PriorityQueue({comparator: function(a, b) {return a.p - b.p}});
var next;
var cameFrom = [];
var costTotal = [];
cameFrom[start] = "no";
costTotal[start] = 0;
queue.queue({e: start, p: 0});
while (queue.length > 0 && next !== end) {
next = queue.dequeue().e;
var pol = cells[next];
pol.neighbors.forEach(function(e) {
if (cells[e].type < 0 || cells[e].haven === next) {
var cost = 1;
if (cells[e].type > 0) {cost += 100;}
if (cells[e].type < -1) {
var dist = Math.hypot(cells[e].data[0] - pol.data[0], cells[e].data[1] - pol.data[1]);
cost += 50 + dist * 2;
}
if (cells[e].path && cells[e].type < 0) {cost *= 0.8;}
var costNew = costTotal[next] + cost;
if (!cameFrom[e]) {
costTotal[e] = costNew;
cells[e].cost = costNew;
cameFrom[e] = next;
queue.queue({e, p: costNew});
}
}
});
}
return cameFrom;
}
function getPathDist(start, end) {
var queue = new PriorityQueue({comparator: function(a, b) {return a.p - b.p}});
var next, costNew;
var cameFrom = [];
var costTotal = [];
cameFrom[start] = "no";
costTotal[start] = 0;
queue.queue({e: start, p: 0});
while (queue.length > 0 && next !== end) {
next = queue.dequeue().e;
var pol = cells[next];
pol.neighbors.forEach(function(e) {
if (cells[e].path && (cells[e].type === -1 || cells[e].haven === next)) {
var dist = Math.hypot(cells[e].data[0] - pol.data[0], cells[e].data[1] - pol.data[1]);
costNew = costTotal[next] + dist;
if (!cameFrom[e]) {
costTotal[e] = costNew;
cameFrom[e] = next;
queue.queue({e, p: costNew});
}
}
});
}
return costNew;
}
function restorePath(end, start, type, from) {
var path = [], current = end, limit = 500;
var prev = cells[end];
if (type === "ocean" || !prev.path) {path.push({scX: prev.data[0], scY: prev.data[1]});}
if (!prev.path) {prev.path = 1;}
for (var i = 0; i < limit; i++) {
current = from[current];
var cur = cells[current];
if (!cur) {break;}
if (cur.path) {
cur.path += 1;
path.push({scX: cur.data[0], scY: cur.data[1]});
prev = cur;
drawPath();
} else {
cur.path = 1;
if (prev) {path.push({scX: prev.data[0], scY: prev.data[1]});}
prev = undefined;
path.push({scX: cur.data[0], scY: cur.data[1]});
}
if (current === start || !from[current]) {break;}
}
drawPath();
function drawPath() {
if (path.length > 1) {
var line = lineGen(path);
line = round(line);
if (type === "main") {
roads.append("path").attr("d", line).attr("data-start", start).attr("data-end", end);
} else if (type === "small") {
trails.append("path").attr("d", line);
} else if (type === "ocean") {
searoutes.append("path").attr("d", line);
}
}
path = [];
}
}
// Append manors with random / generated names
// For each non-capital manor detect the closes capital (used for areas)
function drawManors() {
console.time('drawManors');
for (var i = 0; i < manors.length; i++) {
var x = manors[i].x;
var y = manors[i].y;
var cell = manors[i].cell;
var name = manors[i].name;
if (i < capitalsCount) {
burgs.append("circle").attr("r", 1).attr("stroke-width", .24).attr("class", "manor").attr("cx", x).attr("cy", y);
capitals.append("text").attr("x", x).attr("y", y).attr("dy", -1.3).text(name);
} else {
burgs.append("circle").attr("r", .5).attr("stroke-width", .12).attr("class", "manor").attr("cx", x).attr("cy", y);
towns.append("text").attr("x", x).attr("y", y).attr("dy", -.7).text(name);
}
}
labels.selectAll("text").on("click", editLabel);
burgs.selectAll("circle").call(d3.drag().on("drag", dragged).on("end", dragended)).on("click", changeBurg);
console.timeEnd('drawManors');
}
// calculate Markov's chain from real data
function calculateChains() {
var vowels = "aeiouy";
var digraphs = ["ai","ay","ea","ee","ei","ey","ie","oa","oo","ow","ue","ch","ng","ph","sh","th","wh"];
for (var l = 0; l < cultures.length; l++) {
var probs = [];
var inline = manorNames[l].join(" ").toLowerCase();
var syl = "";
for (var i = -1; i < inline.length - 2;) {
if (i < 0) {var f = " ";} else {var f = inline[i];}
var str = "", vowel = 0;
for (var c = i+1; str.length < 5; c++) {
if (inline[c] === undefined) {break;}
str += inline[c];
if (str === " ") {break;}
if (inline[c+1] === inline[c]) {break;}
if (inline[c+2] === " ") {str += inline[c+1]; break;}
if (vowels.includes(inline[c])) {vowel++;}
if (vowel && vowels.includes(inline[c+2])) {break;}
}
i += str.length;
probs[f] = probs[f] || [];
probs[f].push(str);
}
chain[l] = probs;
}
}
// generate random name using Markov's chain
function generateName(culture) {
var data = chain[culture], res = "", next = data[" "];
var cur = next[Math.floor(Math.random() * next.length)];
while (res.length < 7) {
var l = cur.charAt(cur.length - 1);
if (cur !== " ") {
res += cur;
next = data[l];
cur = next[Math.floor(Math.random() * next.length)];
} else if (res.length > 2 + Math.floor(Math.random() * 5)) {
break;
} else {
next = data[" "];
cur = next[Math.floor(Math.random() * next.length)];
if (cur === " ") {break;}
}
}
var name = res.charAt(0).toUpperCase() + res.slice(1);
return name;
}
// Define areas based on the closest manor to a polygon
function defineRegions() {
console.time('defineRegions');
manorTree = d3.quadtree().extent([[0, 0], [mapHeight, mapWidth]]);
manors.map(function(m) {manorTree.add([m.x, m.y]);});
land.map(function(i) {
if (i.region === undefined) {
var closest = manorTree.find(i.data[0], i.data[1]);
var dist = Math.hypot(closest[0] - i.data[0], closest[1] - i.data[1]);
if (dist > neutral) {
i.region = "neutral";
var closestCulture = cultureTree.find(i.data[0], i.data[1]);
i.culture = cultureTree.data().indexOf(closestCulture);
} else {
var manor = $.grep(manors, function(e) {return (e.x === closest[0] && e.y === closest[1]);});
var cell = manor[0].cell;
if (cells[cell].featureNumber !== i.featureNumber) {
var minDist = dist * 3;
land.map(function(l) {
if (l.featureNumber === i.featureNumber && l.manor !== undefined) {
var distN = Math.hypot(l.data[0] - i.data[0], l.data[1] - i.data[1]);
if (distN < minDist) {minDist = distN; cell = l.index;}
}
});
}
i.region = cells[cell].region;
i.culture = cells[cell].culture;
}
}
});
console.timeEnd('defineRegions');
}
// Define areas cells
function drawRegions() {
console.time('drawRegions');
var edges = [], borderEdges = [], coastalEdges = [], neutralEdges = []; // arrays to store edges
for (var i = 0; i < capitalsCount; i++) {
edges[i] = [];
land.map(function(p) {
if (p.region === i) {
var cell = diagram.cells[p.index];
cell.halfedges.forEach(function(e) {
var edge = diagram.edges[e];
if (edge.left && edge.right) {
var ea = edge.left.index;
if (ea === p.index) {ea = edge.right.index;}
var opp = cells[ea];
if (opp.region !== i) {
var start = edge[0].join(" ");
var end = edge[1].join(" ");
edges[i].push({start, end});
if (opp.height >= 0.2 && opp.region > i) {borderEdges.push({start, end});}
if (opp.height >= 0.2 && opp.region === "neutral") {neutralEdges.push({start, end});}
if (opp.height < 0.2) {coastalEdges.push({start, end});}
}
}
})
}
});
drawRegion(edges[i], i);
drawRegionCoast(coastalEdges, i);
}
drawBorders(borderEdges, "state");
drawBorders(neutralEdges, "neutral");
console.timeEnd('drawRegions');
}
function drawRegion(edges, region) {
var path = "", array = [];
lineGen.curve(d3.curveLinear);
while (edges.length > 2) {
var edgesOrdered = []; // to store points in a correct order
var start = edges[0].start;
var end = edges[0].end;
edges.shift();
var spl = start.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
spl = end.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
for (var i = 0; end !== start && i < 2000; i++) {
var next = $.grep(edges, function(e) {return (e.start == end || e.end == end);});
if (next.length > 0) {
if (next[0].start == end) {
end = next[0].end;
} else if (next[0].end == end) {
end = next[0].start;
}
spl = end.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
}
var rem = edges.indexOf(next[0]);
edges.splice(rem, 1);
}
path += lineGen(edgesOrdered) + "Z ";
var edgesFormatted = [];
edgesOrdered.map(function(e) {edgesFormatted.push([+e.scX, +e.scY])});
array[array.length] = edgesFormatted;
}
if (capitalsCount <= 8) {
var scheme = colors8;
} else {
var scheme = colors20;
}
var color = scheme(region / capitalsCount);
regions.append("path").attr("d", round(path)).attr("fill", color).attr("stroke", color).attr("class", "region"+region);
array.sort(function(a, b){return b.length - a.length;});
generateRegionName(array, region);
}
function drawRegionCoast(edges, region) {
var path = "";
while (edges.length > 0) {
var edgesOrdered = []; // to store points in a correct order
var start = edges[0].start;
var end = edges[0].end;
edges.shift();
var spl = start.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
spl = end.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
var next = $.grep(edges, function(e) {return (e.start == end || e.end == end);});
while (next.length > 0) {
if (next[0].start == end) {
end = next[0].end;
} else if (next[0].end == end) {
end = next[0].start;
}
spl = end.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
var rem = edges.indexOf(next[0]);
edges.splice(rem, 1);
next = $.grep(edges, function(e) {return (e.start == end || e.end == end);});
}
path += lineGen(edgesOrdered);
}
if (capitalsCount <= 8) {
var scheme = colors8;
} else {
var scheme = colors20;
}
var color = scheme(region / capitalsCount);
regions.append("path").attr("d", round(path)).attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.5).attr("class", "region"+region);
}
function drawBorders(edges, type) {
var path = "";
while (edges.length > 0) {
var edgesOrdered = []; // to store points in a correct order
var start = edges[0].start;
var end = edges[0].end;
edges.shift();
var spl = start.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
spl = end.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
var next = $.grep(edges, function(e) {return (e.start == end || e.end == end);});
while (next.length > 0) {
if (next[0].start == end) {
end = next[0].end;
} else if (next[0].end == end) {
end = next[0].start;
}
spl = end.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
var rem = edges.indexOf(next[0]);
edges.splice(rem, 1);
next = $.grep(edges, function(e) {return (e.start == end || e.end == end);});
}
path += lineGen(edgesOrdered);
}
if (type === "state") {stateBorders.append("path").attr("d", round(path));}
if (type === "neutral") {neutralBorders.append("path").attr("d", round(path));}
}
// generate region name and place label at pole of inaccessibility of the largest continuous element of the region
function generateRegionName(array, region) {
var name;
var culture = manors[region].culture;
var c = polylabel(array, 1.0); // pole of inaccessibility
// get source name (capital name = 20%; random name = 80%)
if (Math.random() < 0.8) {
name = generateName(culture);
} else {
name = manors[region].name;
}
name = addRegionSuffix(name, culture);
countries.append("text").attr("x", c[0].toFixed(2)).attr("y", c[1].toFixed(2)).text(name).on("click", editLabel);
}
function addRegionSuffix(name, culture) {
var suffix = "ia"; // common latin suffix
var vowels = "aeiouy";
if (Math.random() < 0.05 && (culture == 3 || culture == 4)) {suffix = "terra";} // 5% "terra" for Italian and Spanish
if (Math.random() < 0.05 && culture == 2) {suffix = "terre";} // 5% "terre" for French
if (Math.random() < 0.5 && culture == 0) {suffix = "land";} // 50% "land" for German
if (Math.random() < 0.33 && (culture == 1 || culture == 6)) {suffix = "land";} // 33% "land" for English and Scandinavian
if (culture == 5 && name.slice(-2) === "sk") {name.slice(0,-2);} // exclude -sk suffix for Slavic
if (name.indexOf(suffix) !== -1) {suffix = "";} // null suffix if name already contains it
var ending = name.slice(-1);
if (vowels.includes(ending) && name.length > 3) {
if (Math.random() > 0.2) {
ending = name.slice(-2,-1);
if (vowels.includes(ending)) {
name = name.slice(0,-2) + suffix; // 80% for vv
} else if (Math.random() > 0.2) {
name = name.slice(0,-1) + suffix; // 64% for cv
}
}
} else if (Math.random() > 0.5) {
name += suffix // 50% for cc
}
//if (name.slice(-2) !== "ia" && culture == 5 && Math.random() > 0.5) {name += "skaya Zemya";} // special case for Slavic
if (name.slice(-4) === "berg") {name += suffix;} // special case for -berg
return name;
}
// draw the Heightmap
function toggleHeight() {
if (terrs.selectAll("path").size() == 0) {
land.map(function(i) {
terrs.append("path")
.attr("d", "M" + polygons[i.index].join("L") + "Z")
.attr("fill", color(1 - i.height))
.attr("stroke", color(1 - i.height));
});
} else {
terrs.selectAll("path").remove();
}
}
// draw Cultures
function toggleCultures() {
if (cults.selectAll("path").size() == 0) {
land.map(function(i) {
cults.append("path")
.attr("d", "M" + polygons[i.index].join("L") + "Z")
.attr("fill", colors8(i.culture / cultures.length))
.attr("stroke", colors8(i.culture / cultures.length));
});
} else {
cults.selectAll("path").remove();
}
}
// Draw the water flux system (for dubugging)
function toggleFlux() {
if (terrs.selectAll("path").size() == 0) {
land.map(function(i) {
terrs.append("path")
.attr("d", "M" + polygons[i.index].join("L") + "Z")
.attr("fill", colorFlux(0.1 + i.flux))
.attr("stroke", colorFlux(0.1 + i.flux));
});
} else {
terrs.selectAll("path").remove();
}
}
// Draw the Relief (need to create more beautiness)
function drawRelief() {
console.time('drawRelief');
var ea, edge, id, cell, x, y, height, path, dash = "";
var hill = [], hShade = [], swamp = "", swampCount = 0, forest = "", fShade = "", fLight = "", swamp = "";
hill[0] = "", hill[1] = "", hShade[0] = "", hShade[1] = "";
var strokes = terrain.append("g").attr("id", "strokes"),
hills = terrain.append("g").attr("id", "hills"),
mounts = terrain.append("g").attr("id", "mounts"),
swamps = terrain.append("g").attr("id", "swamps"),
forests = terrain.append("g").attr("id", "forests");
// sort the land to Draw the top element first (reduce the elements overlapping)
land.sort(compareY);
for (i = 0; i < land.length; i++) {
x = land[i].data[0];
y = land[i].data[1];
height = land[i].height;
if (height >= 0.7 && !land[i].river) {
h = (height - 0.55) * 12;
if (height < 0.8) {
count = 2;
} else {
count = 1;
}
rnd = Math.random() * 0.8 + 0.2;
for (c = 0; c < count; c++) {
cx = x - h * 0.9 - c;
cy = y + h / 4 + c / 2;
path = "M " + cx + "," + cy + " L " + (cx + h / 3 + rnd) + "," + (cy - h / 4 - rnd * 1.2) + " L " + (cx + h / 1.1) + "," + (cy - h) + " L " + (cx + h + rnd) + "," + (cy - h / 1.2 + rnd) + " L " + (cx + h * 2) + "," + cy;
mounts.append("path").attr("d", path).attr("stroke", "#5c5c70");
path = "M " + cx + "," + cy + " L " + (cx + h / 3 + rnd) + "," + (cy - h / 4 - rnd * 1.2) + " L " + (cx + h / 1.1) + "," + (cy - h) + " L " + (cx + h / 1.5) + "," + cy;
mounts.append("path").attr("d", path).attr("fill", "#999999");
dash += "M" + (cx - 0.1) + "," + (cy + 0.3) + " L" + (cx + 2 * h + 0.1) + "," + (cy + 0.3);
}
dash += "M" + (cx + 0.4) + "," + (cy + 0.6) + " L" + (cx + 2 * h - 0.3) + "," + (cy + 0.6);
} else if (height > 0.5 && !land[i].river) {
h = (height - 0.4) * 10;
count = Math.floor(4 - h);
if (h > 1.8) {
h = 1.8
}
for (c = 0; c < count; c++) {
cx = x - h - c;
cy = y + h / 4 + c / 2;
hill[c] += "M" + cx + "," + cy + " Q" + (cx + h) + "," + (cy - h) + " " + (cx + 2 * h) + "," + cy;
hShade[c] += "M" + (cx + 0.6 * h) + "," + (cy + 0.1) + " Q" + (cx + h * 0.95) + "," + (cy - h * 0.91) + " " + (cx + 2 * h * 0.97) + "," + cy;
dash += "M" + (cx - 0.1) + "," + (cy + 0.2) + " L" + (cx + 2 * h + 0.1) + "," + (cy + 0.2);
}
dash += "M" + (cx + 0.4) + "," + (cy + 0.4) + " L" + (cx + 2 * h - 0.3) + "," + (cy + 0.4);
}
if (height >= 0.21 && height < 0.22 && !land[i].river && swampCount < swampiness && land[i].used != 1) {
swampCount++;
land[i].used = 1;
swamp += drawSwamp(x, y);
id = land[i].index;
cell = diagram.cells[id];
cell.halfedges.forEach(function(e) {
edge = diagram.edges[e];
ea = edge.left.index;
if (ea === id || !ea) {
ea = edge.right.index;
}
if (cells[ea].height >= 0.2 && cells[ea].height < 0.3 && !cells[ea].river && cells[ea].used != 1) {
cells[ea].used = 1;
swamp += drawSwamp(cells[ea].data[0], cells[ea].data[1]);
}
})
}
if (Math.random() < height && height >= 0.22 && height < 0.48 && !land[i].river) {
for (c = 0; c < Math.floor(height * 8); c++) {
h = 0.6;
if (c == 0) {
cx = x - h - Math.random();
cy = y - h - Math.random();
}
if (c == 1) {
cx = x + h + Math.random();
cy = y + h + Math.random();
}
if (c == 2) {
cx = x - h - Math.random();
cy = y + 2 * h + Math.random();
}
forest += "M " + cx + " " + cy + " q -1 0.8 -0.05 1.25 v 0.75 h 0.1 v -0.75 q 0.95 -0.47 -0.05 -1.25 z";
fLight += "M " + cx + " " + cy + " q -1 0.8 -0.05 1.25 h 0.1 q 0.95 -0.47 -0.05 -1.25 z";
fShade += "M " + cx + " " + cy + " q -1 0.8 -0.05 1.25 q -0.2 -0.55 0 -1.1 z";
}
}
}
// draw all these stuff
strokes.append("path").attr("d", round(dash));
hills.append("path").attr("d", round(hill[0])).attr("stroke", "#5c5c70");
hills.append("path").attr("d", round(hShade[0])).attr("fill", "white");
hills.append("path").attr("d", round(hill[1])).attr("stroke", "#5c5c70");
hills.append("path").attr("d", round(hShade[1])).attr("fill", "white").attr("stroke", "white");
swamps.append("path").attr("d", round(swamp));
forests.append("path").attr("d", forest);
forests.append("path").attr("d", fLight).attr("fill", "white").attr("stroke", "none");
forests.append("path").attr("d", fShade).attr("fill", "#999999").attr("stroke", "none");
console.timeEnd('drawRelief');
}
function compareY(a, b) {
if (a.data[1] > b.data[1]) return 1;
if (a.data[1] < b.data[1]) return -1;
return 0;
}
function drawSwamp(x, y) {
var h = 0.6, line = "";
for (c = 0; c < 3; c++) {
if (c == 0) {
cx = x;
cy = y - 0.5 - Math.random();
}
if (c == 1) {
cx = x + h + Math.random();
cy = y + h + Math.random();
}
if (c == 2) {
cx = x - h - Math.random();
cy = y + 2 * h + Math.random();
}
line += "M" + cx + "," + cy + " H" + (cx - h / 6) + " M" + cx + "," + cy + " H" + (cx + h / 6) + " M" + cx + "," + cy + " L" + (cx - h / 3) + "," + (cy - h / 2) + " M" + cx + "," + cy + " V" + (cy - h / 1.5) + " M" + cx + "," + cy + " L" + (cx + h / 3) + "," + (cy - h / 2);
line += "M" + (cx - h) + "," + cy + " H" + (cx - h / 2) + " M" + (cx + h / 2) + "," + cy + " H" + (cx + h);
}
return line;
}
function dragged(e) {
var el = d3.select(this);
var x = d3.event.x;
var y = d3.event.y;
el.raise().classed("drag", true);
if (el.attr("x")) {
el.attr("x", x).attr("y", y + 0.8);
var matrix = el.attr("transform");
if (matrix) {
var angle = matrix.split('(')[1].split(')')[0].split(' ')[0];
var bbox = el.node().getBBox();
var rotate = "rotate("+ angle + " " + (bbox.x + bbox.width/2) + " " + (bbox.y + bbox.height/2) + ")";
el.attr("transform", rotate);
}
} else {
el.attr("cx", x).attr("cy", y);
}
}
function dragended(d) {
d3.select(this).classed("drag", false);
}
// Complete the map for the "customize" mode
function getMap() {
$("#customizationMenu").fadeOut("slow");
$("#getMap, #featureIsland").attr("disabled", true).addClass("buttonoff");
$("#rescalePlus, #rescaleMinus, #smoothHeights").addClass("buttonoff");
$('#grid').empty().fadeOut();
$('#toggleGrid').addClass("buttonoff");
console.time("TOTAL");
markFeatures();
drawOcean();
reGraph();
resolveDepressions();
flux();
drawRelief();
drawCoastline();
manorsAndRegions();
console.timeEnd("TOTAL");
customization = 0;
viewbox.style("cursor", "default").on(".drag", null);
console.groupEnd("Customized map");
}
// Add label or burg on mouseclick
function clicked() {
var brush = $("#options .pressed").attr("id");
var point = d3.mouse(this);
if (brush === "addLabel" || brush === "addBurg") {
var rnd = Math.floor(Math.random() * cultures.length);
var name = generateName(rnd);
if (brush === "addLabel") {
countries.append("text").attr("x", point[0]).attr("y", point[1]).text(name).on("click", editLabel);
} else {
burgs.append("circle").attr("r", 1).attr("stroke-width", .24)
.attr("cx", point[0]).attr("cy", point[1])
.call(d3.drag().on("drag", dragged).on("end", dragended)).on("click", changeBurg);
capitals.append("text").attr("x", point[0]).attr("y", point[1]).attr("dy", -1.3).text(name).on("click", editLabel);
}
return;
}
if (customization === 1) {
var cell = diagram.find(point[0], point[1]).index;
var power = +brushPower.value;
if (brush === "brushElevate") {cells[cell].height = +cells[cell].height + power;}
if (brush === "brushDepress") {cells[cell].height = +cells[cell].height - power;}
if (brush === "brushHill") {add(cell, "hill", power);}
if (brush === "brushPit") {addPit(1, power, cell);}
if (brush === "brushRange" || brush === "brushTrough") {
if (icons.selectAll(".tag").size() === 0) {
icons.append("circle").attr("r", 3).attr("class", "tag").attr("cx", point[0]).attr("cy", point[1]);
} else {
var x = +icons.select(".tag").attr("cx");
var y = +icons.select(".tag").attr("cy");
var from = diagram.find(x, y).index;
icons.selectAll(".tag, .line").remove();
addRange(brush === "brushRange" ? 1 : -1, power, from, cell);
}
}
mockHeightmap();
}
// add new river point if elSelected is river (has data-points) and add button pressed
if (!elSelected) {return;}
if (elSelected.attr("data-points")) {
if ($("#riverAddPoint").hasClass('pressed')) {
var dists = [], points = [];
var tr = parseTransform(elSelected.attr("transform"));
if (tr[5] == "1") {
point[0] -= +tr[0];
point[1] -= +tr[1];
}
rivers.select(".riverPoints").selectAll("circle").each(function() {
var x = +d3.select(this).attr("cx");
var y = +d3.select(this).attr("cy");
dists.push(Math.hypot(point[0] - x, point[1] - y));
points.push({scX:x, scY:y});
}).remove();
var index = dists.length;
if (points.length > 1) {
var sorded = dists.slice(0).sort(function(a, b) {return a-b;});
var closest = dists.indexOf(sorded[0]);
var next = dists.indexOf(sorded[1]);
if (closest <= next) {index = closest+1;} else {index = next+1;}
}
points.splice(index, 0, {scX:point[0], scY:point[1]});
lineGen.curve(d3.curveCatmullRom.alpha(0.1));
var d = drawRiver(points);
elSelected.attr("d", d).attr("data-points", JSON.stringify(points));
points.map(function(p) {addRiverPoint(p)});
return;
}
if ($("#riverNew").hasClass('pressed')) {
if (elSelected.attr("data-river") !== "new") {
elSelected.call(d3.drag().on("drag", null)).classed("draggable", false);
elSelected = rivers.append("path").attr("data-river", "new").on("click", editRiver);
}
addRiverPoint({scX:point[0], scY:point[1]});
redrawRiver();
return;
}
}
}
// Change burg marker size on click
function changeBurg() {
var size = this.getAttribute("r");
size = +size + .25;
if (size > 1.5) {size = .5;}
var width = this.getAttribute("stroke-width");
width = +width + .06;
if (width > .36) {width = .12;}
var type = this.getAttribute("class");
if (type) {
d3.selectAll("."+type).attr("r", size).attr("stroke-width", width);
} else {
this.setAttribute("r", size);
this.setAttribute("stroke-width", width);
}
}
function editLabel() {
if (elSelected) {
elSelected.call(d3.drag().on("drag", null)).classed("draggable", false);
}
elSelected = d3.select(this);
elSelected.call(d3.drag().on("drag", dragged).on("end", dragended)).classed("draggable", true);
var group = d3.select(this.parentNode);
updateGroupOptions();
editGroupSelect.value = group.attr("id");
editFontSelect.value = fonts.indexOf(group.attr("data-font"));
editSize.value = group.attr("font-size");
editColor.value = toHEX(group.attr("fill"));
editOpacity.value = group.attr("opacity");
editText.value = elSelected.text();
var matrix = elSelected.attr("transform");
if (matrix) {
var rotation = matrix.split('(')[1].split(')')[0].split(' ')[0];
} else {
var rotation = 0;
}
editAngle.value = rotation;
editAngleValue.innerHTML = rotation + "°";
$("#editDialog").dialog({
title: "Edit Label: " + editText.value,
classes: {
"ui-dialog": "editorDialog",
"ui-dialog-titlebar": "editorDialogTitle"},
height: 78, width: 275, modal: false, resizable: false,
position: {my: "center top", at: "bottom", of: this}
}).css({"font-size": "14px"});
// fetch default fonts if not done before
if (fonts.indexOf("Bitter") === -1) {
$("head").append('<link rel="stylesheet" type="text/css" href="fonts.css">');
fonts = ["Amatic+SC:700", "IM+Fell+English", "Great+Vibes", "Bitter", "Yellowtail", "Montez", "Lobster", "Josefin+Sans", "Shadows+Into+Light", "Orbitron", "Dancing+Script:700", "Bangers", "Chewy", "Architects+Daughter", "Kaushan+Script", "Gloria+Hallelujah", "Satisfy", "Comfortaa:700", "Cinzel"];
updateFontOptions();
}
}
$("#editDialog .editButton, #editDialog .editButtonS").click(function() {
var group = d3.select(elSelected.node().parentNode);
if (this.id == "editRemoveSingle") {
if (confirm("Are you sure you want to remove the label?")) {
elSelected.remove();
$("#editDialog").dialog("close");
}
return;
}
if (this.id == "editGroupRemove") {
var count = group.selectAll("text").size()
var message = "Are you sure you want to remove all labels (" + count + ") of that group?";
if (count < 2) {
group.remove();
$("#editDialog").dialog("close");
return;
}
if (confirm(message)) {
group.remove();
$("#editDialog").dialog("close");
}
return;
}
if (this.id == "editCopy") {
var shift = +group.attr("font-size") + 1;
var xn = +elSelected.attr("x") - shift;
var yn = +elSelected.attr("y") - shift;
while (group.selectAll("text[x='" + xn + "']").size() > 0) {xn -= shift; yn -= shift;}
group.append("text").attr("x", xn).attr("y", yn).text(elSelected.text())
.attr("transform", elSelected.attr("transform")).on("click", editLabel);
return;
}
if (this.id == "editGroupNew") {
if ($("#editGroupInput").css("display") === "none") {
$("#editGroupInput").css("display", "inline-block");
$("#editGroupSelect").css("display", "none");
editGroupInput.focus();
} else {
$("#editGroupSelect").css("display", "inline-block");
$("#editGroupInput").css("display", "none");
}
return;
}
if (this.id == "editExternalFont") {
if ($("#editFontInput").css("display") === "none") {
$("#editFontInput").css("display", "inline-block");
$("#editFontSelect").css("display", "none");
editFontInput.focus();
} else {
$("#editFontSelect").css("display", "inline-block");
$("#editFontInput").css("display", "none");
}
return;
}
if (this.id == "editTextRandom") {
var culture, index;
// check if label is manor name to get culture
var manor = $.grep(manors, function(e) {return (e.name === editText.value);});
if (manor.length === 1) {
culture = manor[0].culture;
index = manor[0].i;
} else {
// if not get cell's culture at BBox centre
var c = elSelected.node().getBBox();
var x = c.x + c.width / 2;
var y = c.y + c.height / 2;
culture = diagram.find(x, y).culture;
if (!culture) {culture = 0;}
}
var name = generateName(culture);
if (group.attr("id") === "countries") {name = addRegionSuffix(name, culture);}
editText.value = name;
elSelected.text(name);
$(".ui-dialog-title").text("Edit Label: " + name);
if (manor.length === 1) {manors[index].name = name;}
return;
}
$("#editDialog .editButton").toggle();
if (this.id == "editGroupButton") {
if ($("#editGroupInput").css("display") !== "none") {$("#editGroupSelect").css("display", "inline-block");}
if ($("#editGroupRemove").css("display") === "none") {
$("#editGroupRemove, #editGroupNew").css("display", "inline-block");
} else {
$("#editGroupInput, #editGroupRemove, #editGroupNew").css("display", "none");
}
}
if (this.id == "editFontButton") {$("#editSizeIcon, #editFontSelect, #editSize").toggle();}
if (this.id == "editStyleButton") {$("#editOpacityIcon, #editOpacity, #editShadowIcon, #editShadow").toggle();}
if (this.id == "editAngleButton") {$("#editAngleValue").toggle();}
if (this.id == "editTextButton") {$("#editTextRandom").toggle();}
$(this).show().next().toggle();
});
function updateGroupOptions() {
editGroupSelect.innerHTML = "";
labels.selectAll("g").each(function(d) {
var opt = document.createElement("option");
opt.value = opt.innerHTML = d3.select(this).attr("id");
editGroupSelect.add(opt);
});
}
// on editAngle change
$("#editAngle").change(function() {
var c = elSelected.node().getBBox();
var rotate = `rotate(${this.value} ${(c.x+c.width/2)} ${(c.y+c.height/2)})`;
elSelected.attr("transform", rotate);
});
// on editFontInput change. Use a direct link to any @font-face declaration or just font name to fetch from Google Fonts
$("#editFontInput").change(function() {
if (editFontInput.value !== "") {
var url = (editFontInput.value).replace(/ /g, "+");
if (url.indexOf("http") === -1) {url = "https://fonts.googleapis.com/css?family=" + url;}
addFonts(url);
editFontInput.value = "";
editExternalFont.click();
}
});
function addFonts(url) {
$('head').append('<link rel="stylesheet" type="text/css" href="' + url + '">');
return fetch(url)
.then(resp => resp.text())
.then(text => {
let s = document.createElement('style');
s.innerHTML = text;
document.head.appendChild(s);
let styleSheet = Array.prototype.filter.call(
document.styleSheets,
sS => sS.ownerNode === s)[0];
let FontRule = rule => {
let family = rule.style.getPropertyValue('font-family');
let weight = rule.style.getPropertyValue('font-weight');
let font = family.replace(/['"]+/g, '').replace(/ /g, "+") + ":" + weight;
if (fonts.indexOf(font) == -1) {fonts.push(font);}
};
for (var r of styleSheet.cssRules) {FontRule(r);}
document.head.removeChild(s);
updateFontOptions();
})
}
// on any Editor input change
$("#editDialog .editTrigger").change(function() {
$(this).attr("title", $(this).val());
elSelected.text(editText.value);
// check if Group was changed
var group = d3.select(elSelected.node().parentNode);
var groupOld = group.attr("id");
var groupNew = editGroupSelect.value;
if (editGroupInput.value !== "") {
groupNew = editGroupInput.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
if (Number.isFinite(+groupNew.charAt(0))) {groupNew = "g" + groupNew;}
}
if (groupOld !== groupNew) {
var removed = elSelected.remove();
if (labels.select("#"+groupNew).size() > 0) {
group = labels.select("#"+groupNew);
editFontSelect.value = fonts.indexOf(group.attr("data-font"));
editSize.value = group.attr("font-size");
editColor.value = toHEX(group.attr("fill"));
editOpacity.value = group.attr("opacity");
} else {
if (group.selectAll("text").size() === 0) {group.remove();}
group = labels.append("g").attr("id", groupNew);
updateGroupOptions();
$("#editGroupSelect, #editGroupInput").toggle();
editGroupInput.value = "";
}
group.append(function() {return removed.node();});
editGroupSelect.value = group.attr("id");
}
// update Group attributes
var font = fonts[editFontSelect.value].split(':')[0].replace(/\+/g, " ");
group.attr("font-size", editSize.value)
.attr("font-family", font)
.attr("data-font", fonts[editFontSelect.value])
.attr("fill", editColor.title)
.attr("opacity", editOpacity.value);
});
// Update font list for Label Editor
function updateFontOptions() {
editFontSelect.innerHTML = "";
for (var i=0; i < fonts.length; i++) {
var opt = document.createElement('option');
opt.value = i;
var font = fonts[i].split(':')[0].replace(/\+/g, " ");
opt.style.fontFamily = opt.innerHTML = font;
editFontSelect.add(opt);
}
}
// convert RGB color string to HEX without #
function toHEX(rgb){
if (rgb.charAt(0) === "#") {return rgb;}
rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return (rgb && rgb.length === 4) ? "#" +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}
// get Curve Type
function getCurveType() {
type = curveType.value;
if (type === "Catmull–Rom") {lineGen.curve(d3.curveCatmullRom);}
if (type === "Linear") {lineGen.curve(d3.curveLinear);}
if (type === "Basis") {lineGen.curve(d3.curveBasisClosed);}
if (type === "Cardinal") {lineGen.curve(d3.curveCardinal);}
if (type === "Step") {lineGen.curve(d3.curveStep);}
}
// source from https://gist.github.com/jimhigson/7985923
function round(path) {
return path.replace(/[\d\.-][\d\.e-]*/g, function(n) {return Math.round(n*10)/10;})
}
// downalod map as SVG or PNG file
function saveAsImage(type) {
console.time("saveAsImage");
// get all used fonts
if (type === "svg") {viewbox.attr("transform", null);}
var fontsInUse = []; // to store fonts currently in use
labels.selectAll("g").each(function(d) {
var font = d3.select(this).attr("data-font");
if (fontsInUse.indexOf(font) === -1) {fontsInUse.push(font);}
});
var fontsToLoad = "https://fonts.googleapis.com/css?family=" + fontsInUse.join("|");
// clone svg
var cloneEl = document.getElementsByTagName("svg")[0].cloneNode(true);
cloneEl.id = "clone";
document.getElementsByTagName("body")[0].appendChild(cloneEl);
var clone = d3.select("#clone");
// for each g element get inline style so it could be used in saved svg
var emptyG = clone.append("g").node();
var defaultStyles = window.getComputedStyle(emptyG);
clone.selectAll("g").each(function(d) {
var compStyle = window.getComputedStyle(this);
var style = "";
for (var i=0; i < compStyle.length; i++) {
var key = compStyle[i];
var value = compStyle.getPropertyValue(key);
if (key !== "cursor" && value != defaultStyles.getPropertyValue(key)) {
style += key + ':' + value + ';';
}
}
if (style != "") {this.setAttribute('style', style);}
});
emptyG.remove();
// load fonts as dataURI so they will be available in downloaded svg/png
GFontToDataURI(fontsToLoad).then(cssRules => {
clone.select("defs").append("style").text(cssRules.join('\n'));
var svg_xml = (new XMLSerializer()).serializeToString(clone.node());
var blob = new Blob([svg_xml], {type:'image/svg+xml;charset=utf-8'});
var url = window.URL.createObjectURL(blob);
var link = document.createElement("a");
if (type === "png") {
var canvas = document.createElement("canvas");
canvas.width = 960; canvas.height = 540;
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = url;
img.onload = function(){
ctx.drawImage(img, 0, 0, 960, 540);
link.download = "fantasy_map_" + Date.now() + ".png";
link.href = canvas.toDataURL('image/png');
link.click();
window.URL.revokeObjectURL(url);
canvas.remove();
}
} else {
link.download = "fantasy_map_" + Date.now() + ".svg";
link.href = url;
link.click();
window.URL.revokeObjectURL(url);
}
clone.remove();
console.timeEnd("saveAsImage");
});
}
// Code from Kaiido's answer:
// https://stackoverflow.com/questions/42402584/how-to-use-google-fonts-in-canvas-when-drawing-dom-objects-in-svg
function GFontToDataURI(url) {
"use strict;"
return fetch(url) // first fecth the embed stylesheet page
.then(resp => resp.text()) // we only need the text of it
.then(text => {
let s = document.createElement('style');
s.innerHTML = text;
document.head.appendChild(s);
let styleSheet = Array.prototype.filter.call(
document.styleSheets,
sS => sS.ownerNode === s)[0];
let FontRule = rule => {
let src = rule.style.getPropertyValue('src');
let family = rule.style.getPropertyValue('font-family');
let url = src.split('url(')[1].split(')')[0];
return {
rule: rule,
src: src,
url: url.substring(url.length - 1, 1)
};
};
let fontRules = [], fontProms = [];
for (var r of styleSheet.cssRules) {
let fR = FontRule(r)
fontRules.push(fR);
fontProms.push(
fetch(fR.url) // fetch the actual font-file (.woff)
.then(resp => resp.blob())
.then(blob => {
return new Promise(resolve => {
let f = new FileReader();
f.onload = e => resolve(f.result);
f.readAsDataURL(blob);
})
})
.then(dataURL => {
return fR.rule.cssText.replace(fR.url, dataURL);
})
)
}
document.head.removeChild(s); // clean up
return Promise.all(fontProms); // wait for all this has been done
});
}
// Save in .map format, based on FileSystem API
function saveMap() {
console.time("saveMap");
// data convention: 0 - cells; 1 - manors; 2 - svg;
var svg_xml = (new XMLSerializer()).serializeToString(svg.node());
var data = JSON.stringify(cells) + "\r\n" + JSON.stringify(manors) + "\r\n" + svg_xml;
var dataBlob = new Blob([data], {type:"text/plain"});
var dataURL = window.URL.createObjectURL(dataBlob);
var link = document.createElement("a");
link.download = "fantasy_map_" + Date.now() + ".map";
link.id = "download";
link.innerHTML = "Download Map";
link.href = dataURL;
document.body.appendChild(link);
link.click();
$("#download").remove();
window.URL.revokeObjectURL(dataURL);
console.timeEnd("saveMap");
}
// Map Loader based on FileSystem API
$("#fileToLoad").change(function() {
console.time("loadMap");
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
points = [], cells = [], land = [], riversData = [], island = 0, manors = [], queue = [];
var dataLoaded = fileLoadedEvent.target.result;
svg.remove();
var data = dataLoaded.split("\r\n");
// data convention: 0 - cells; 1 - manors; 2 - svg;
cells = JSON.parse(data[0]);
land = $.grep(cells, function(e) {return (e.height >= 0.2);});
cells.map(function(e) {points.push(e.data);});
calculateVoronoi(points);
manors = JSON.parse(data[1]);
document.body.insertAdjacentHTML("afterbegin", data[2]);
// redefine variables
customization = 0, elSelected = "";
svg = d3.select("svg").call(zoom);
mapWidth = +svg.attr("width");
mapHeight = +svg.attr("height");
defs = svg.select("#deftemp");
viewbox = svg.select("#viewbox").on("touchmove mousemove", moved).on("click", clicked);
ocean = viewbox.select("#ocean");
oceanLayers = ocean.select("#oceanLayers");
oceanPattern = ocean.select("#oceanPattern");
landmass = viewbox.attr("#landmass");
terrs = viewbox.select("#terrs");
cults = viewbox.select("#cults");
routes = viewbox.select("#routes");
roads = routes.select("#roads");
trails = routes.select("#trails");
rivers = viewbox.select("#rivers");
terrain = viewbox.select("#terrain");
regions = viewbox.select("#regions");
borders = viewbox.select("#borders");
stateBorders = borders.select("#stateBorders");
neutralBorders = borders.select("#neutralBorders");
coastline = viewbox.select("#coastline");
lakes = viewbox.select("#lakes");
grid = viewbox.select("#grid");
searoutes = routes.select("#searoutes");
labels = viewbox.select("#labels");
icons = viewbox.select("#icons");
burgs = icons.select("#burgs");
debug = viewbox.select("#debug");
capitals = labels.select("#capitals");
towns = labels.select("#towns");
countries = labels.select("#countries");
// restore events
labels.selectAll("text").on("click", editLabel);
burgs.selectAll("circle").call(d3.drag().on("drag", dragged).on("end", dragended)).on("click", changeBurg);
// restore layers state
if (cults.selectAll("path").size() == 0) {$("#toggleCultures").addClass("buttonoff");} else {$("#toggleCultures").removeClass("buttonoff");}
if (terrs.selectAll("path").size() == 0) {$("#toggleHeight").addClass("buttonoff");} else {$("#toggleHeight").removeClass("buttonoff");}
if (regions.attr("display") === "none") {$("#toggleCountries").addClass("buttonoff");} else {$("#toggleCountries").removeClass("buttonoff");}
if (rivers.attr("display") === "none") {$("#toggleRivers").addClass("buttonoff");} else {$("#toggleRivers").removeClass("buttonoff");}
if (oceanPattern.attr("display") === "none") {$("#toggleOcean").addClass("buttonoff");} else {$("#toggleOcean").removeClass("buttonoff");}
if (landmass.attr("display") === "none") {$("#landmass").addClass("buttonoff");} else {$("#landmass").removeClass("buttonoff");}
if (terrain.attr("display") === "none") {$("#toggleRelief").addClass("buttonoff");} else {$("#toggleRelief").removeClass("buttonoff");}
if (borders.attr("display") === "none") {$("#toggleBorders").addClass("buttonoff");} else {$("#toggleBorders").removeClass("buttonoff");}
if (burgs.attr("display") === "none") {$("#toggleIcons").addClass("buttonoff");} else {$("#toggleIcons").removeClass("buttonoff");}
if (labels.attr("display") === "none") {$("#toggleLabels").addClass("buttonoff");} else {$("#toggleLabels").removeClass("buttonoff");}
if (routes.attr("display") === "none") {$("#toggleRoutes").addClass("buttonoff");} else {$("#toggleRoutes").removeClass("buttonoff");}
if (grod.attr("display") === "none") {$("#toggleGrid").addClass("buttonoff");} else {$("#toggleGrid").removeClass("buttonoff");}
console.timeEnd("loadMap");
};
fileReader.readAsText(fileToLoad, "UTF-8");
});
// Poisson-disc sampling for a points
// Source: bl.ocks.org/mbostock/99049112373e12709381; Based on https://www.jasondavies.com/poisson-disc
function poissonDiscSampler(width, height, radius) {
var k = 5, // maximum number of points before rejection
radius2 = radius * radius,
R = 3 * radius2,
cellSize = radius * Math.SQRT1_2,
gridWidth = Math.ceil(width / cellSize),
gridHeight = Math.ceil(height / cellSize),
grid = new Array(gridWidth * gridHeight),
queue = [],
queueSize = 0,
sampleSize = 0;
return function() {
if (!sampleSize) return sample(Math.random() * width, Math.random() * height);
// Pick a random existing sample and remove it from the queue
while (queueSize) {
var i = Math.random() * queueSize | 0,
s = queue[i];
// Make a new candidate between [radius, 2 * radius] from the existing sample.
for (var j = 0; j < k; ++j) {
var a = 2 * Math.PI * Math.random(),
r = Math.sqrt(Math.random() * R + radius2),
x = s[0] + r * Math.cos(a),
y = s[1] + r * Math.sin(a);
// Reject candidates that are outside the allowed extent, or closer than 2 * radius to any existing sample
if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) return sample(x, y);
}
queue[i] = queue[--queueSize];
queue.length = queueSize;
}
};
function far(x, y) {
var i = x / cellSize | 0,
j = y / cellSize | 0,
i0 = Math.max(i - 2, 0),
j0 = Math.max(j - 2, 0),
i1 = Math.min(i + 3, gridWidth),
j1 = Math.min(j + 3, gridHeight);
for (j = j0; j < j1; ++j) {
var o = j * gridWidth;
for (i = i0; i < i1; ++i) {
if (s = grid[o + i]) {
var s,
dx = s[0] - x,
dy = s[1] - y;
if (dx * dx + dy * dy < radius2) return false;
}
}
}
return true;
}
function sample(x, y) {
var s = [x, y];
queue.push(s);
grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = s;
++sampleSize;
++queueSize;
return s;
}
}
// Hotkeys
d3.select("body").on("keydown", function() {
if ($('#editDialog').css("display") === "none") {
switch(d3.event.keyCode) {
case 27: // Escape
break;
case 37: // Left
if (viewX + 10 <= 0) {
viewX += 10;
zoomUpdate();
}
break;
case 39: // Right
if (viewX - 10 >= (mapWidth * (scale-1) * -1)) {
viewX -= 10;
zoomUpdate();
}
break;
case 38: // Up
if (viewY + 10 <= 0) {
viewY += 10;
zoomUpdate();
}
break;
case 40: // Down
if (viewY - 10 >= (mapHeight * (scale-1) * -1)) {
viewY -= 10;
zoomUpdate();
}
break;
case 107: // Plus
if (scale < 40) {
var dx = mapWidth / 2 * (scale-1) + viewX;
var dy = mapHeight / 2 * (scale-1) + viewY;
viewX = dx - mapWidth / 2 * scale;
viewY = dy - mapHeight / 2 * scale;
scale += 1;
if (scale > 40) {scale = 40;}
zoomUpdate();
}
break;
case 109: // Minus
if (scale > 1) {
var dx = mapWidth / 2 * (scale-1) + viewX;
var dy = mapHeight / 2 * (scale-1) + viewY;
viewX += mapWidth / 2 - dx;
viewY += mapHeight / 2 - dy;
scale -= 1;
if (scale < 1) {
scale = 1;
viewX = 0;
viewY = 0;
}
zoomUpdate();
}
break;
}
}
});
// Toggle Options pane
$("#optionsTrigger").on("click", function() {
if ($("#options").css("display") === "none") {
$("#regenerate").hide();
$("#options").fadeIn();
$("#layoutTab").click();
this.innerHTML = "◀";
} else {
$("#options").fadeOut();
this.innerHTML = "▶";
}
});
$("#collapsible").hover(function() {
if ($("#options").css("display") === "none") {$("#regenerate").show();}
}, function() {
$("#regenerate").hide();
});
// move layers on mapLayers dragging (jquery sortable)
function moveLayer(event, ui) {
var el = getLayer(ui.item.attr("id"));
if (el) {
var prev = getLayer(ui.item.prev().attr("id"));
var next = getLayer(ui.item.next().attr("id"));
if (prev) {el.insertAfter(prev);} else if (next) {el.insertBefore(next);}
}
}
// define connection between option layer buttons and actual svg groups
function getLayer(id) {
if (id === "toggleHeight") {return $("#terrs");}
if (id === "toggleCultures") {return $("#cults");}
if (id === "toggleRivers") {return $("#rivers");}
if (id === "toggleRelief") {return $("#terrain");}
if (id === "toggleBorders") {return $("#borders");}
if (id === "toggleCountries") {return $("#regions");}
if (id === "toggleIcons") {return $("#icons");}
if (id === "toggleLabels") {return $("#labels");}
if (id === "toggleRoutes") {return $("#routes");}
if (id === "toggleGrid") {return $("#grid");}
}
// UI Button handlers
$("button, a, li").on("click", function() {
var id = this.id;
var parent = this.parentNode.id;
if (icons.selectAll(".tag").size() > 0) {icons.selectAll(".tag, .line").remove();}
if (id === "toggleHeight") {toggleHeight();}
if (id === "toggleCountries") {
var countries = !$("#toggleCountries").hasClass("buttonoff");
var cultures = !$("#toggleCultures").hasClass("buttonoff");
if (!countries && cultures) {
$("#toggleCultures").toggleClass("buttonoff");
toggleCultures();
}
$('#regions').fadeToggle();
}
if (id === "toggleCultures") {
var countries = !$("#toggleCountries").hasClass("buttonoff");
var cultures = !$("#toggleCultures").hasClass("buttonoff");
if (!cultures && countries) {
$("#toggleCountries").toggleClass("buttonoff");
$('#regions').fadeToggle();
}
toggleCultures();
}
if (id === "toggleFlux") {toggleFlux();}
if (parent === "mapLayers" || parent === "styleContent") {$(this).toggleClass("buttonoff");}
if (id === "randomMap" || id === "regenerate") {
customization = 0;
$("#customizationMenu").fadeOut("slow");
$("#getMap").attr("disabled", true).addClass("buttonoff");
viewbox.style("cursor", "default");
undraw();
generate();
}
if (id === "start") {
console.groupEnd('Customized map');
customization = 1;
$("#customizationMenu").fadeIn("slow");
viewbox.style("cursor", "crosshair").call(drag);
landmassCounter.innerHTML = "0";
undraw();
console.group("Customized map");
placePoints();
calculateVoronoi(points);
detectNeighbors("grid");
$('#grid').fadeIn();
$('#toggleGrid').removeClass("buttonoff");
}
// heightmap customization buttons
if (customization === 1) {
if (id === "rescalePlus") {modifyHeights("all", 0, 1.1); mockHeightmap();}
if (id === "rescaleMinus") {modifyHeights("all", 0, 0.9); mockHeightmap();}
if (id === "smoothHeights") {smoothHeights(); mockHeightmap();}
if (id === "getMap") {getMap();}
if (id === "applyTemplate") {applyTemplate();}
}
if ($(this).hasClass('radio')) {
if ($(this).hasClass('pressed')) {
$(".pressed").removeClass('pressed');
viewbox.style("cursor", "default").on(".drag", null);
} else {
$(".pressed").removeClass('pressed');
$(this).addClass('pressed');
viewbox.style("cursor", "crosshair");
if (id.slice(0,5) === "brush" && id !== "brushRange" && id !== "brushTrough") {
viewbox.call(drag);
} else {
viewbox.on(".drag", null);
}
}
}
if (id === "saveMap") {saveMap();}
if (id === "loadMap") {fileToLoad.click();}
if (id === "saveSVG") {saveAsImage("svg");}
if (id === "savePNG") {saveAsImage("png");}
if (id === "zoomReset") {svg.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);}
if (id === "zoomPlus") {
scale += 1;
if (scale > 40) {scale = 40;}
zoomUpdate();
}
if (id === "zoomMinus") {
scale -= 1;
if (scale <= 1) {scale = 1; viewX = 0; viewY = 0;}
zoomUpdate();
}
});
// Heighmap Template Editor dialog
function applyTemplate() {
$("#templateDialog").dialog({
title: "Template Editor",
classes: {
"ui-dialog": "editorDialog",
"ui-dialog-titlebar": "editorDialogTitle"},
height: "auto", width: 270, modal: false, resizable: false}).css({"font-size": "12px"});
}
// templateDialog Button handlers
$("#templateTools > button").on("click", function() {
var id = this.id;
id = id.replace("template", "");
if (id === "Mountain") {
var steps = $("#templateBody > div").length;
if (steps > 0) {return;}
}
$("#templateBody").attr("data-changed", 1);
$("#templateBody").append('<div data-type="' + id + '">' + id + '</div>');
var el = $("#templateBody div:last-child");
if (id === "Hill" || id === "Pit" || id === "Range" || id === "Trough") {
var count = '<label>count:<input class="templateElCount" title="Blobs to add" type="number" value="1" min="1" max="99" step="1"></label>';
}
if (id === "Hill") {
var dist = '<label>distribution:<input class="templateElDist" title="Set blobs distribution. 0.5 - map center; 0.1 - any place" type="number" value="0.25" min="0.1" max="0.5" step="0.01"></label>';
}
if (id === "Add" || id === "Multiply") {
var dist = '<label>to:<select class="templateElDist" title="Change only land or all cells"><option value="all" selected>all cells</option><option value="land">land only</option><option value="interval">interval</option></select></label>';
}
if (id === "Add") {
var count = '<label>value:<input class="templateElCount" title="Add value to height of all cells (negative values are allowed)" type="number" value="-0.1" min="-1" max="1" step="0.01"></label>';
}
if (id === "Multiply") {
var count = '<label>by value:<input class="templateElCount" title="Multiply all cells Height by the value" type="number" value="1.1" min="0" max="10" step="0.1"></label>';
}
if (id === "Strait") {
var count = '<label>width:<input class="templateElCount" title="Set strait width" value="1-8"></label>';
}
var moveUp = '<span class="templateElUp" title="Remove the line up"><i class="fa fa-sort-asc" aria-hidden="true"></i></span>';
var moveDown = '<span class="templateElDown" title="Remove the line down"><i class="fa fa-sort-desc" aria-hidden="true"></i></span>';
var remove = '<span class="templateElRemove" title="Remove the line"><i class="fa fa-trash-o" aria-hidden="true"></i></span>';
el.append(remove).append(moveDown).append(moveUp);
if (dist) {el.append(dist);}
if (count) {el.append(count);}
el.children().on("click", fireTemplateElButton);
el.find("select.templateElDist").on("input", fireTemplateElDist);
});
// templateDialog default Button event
$("#templateBody > div > span").on("click", fireTemplateElButton);
// templateBody Button handlers
function fireTemplateElButton() {
$("#templateBody").attr("data-changed", 1);
var button = $(this).attr("class");
var el = $(this).parent();
if (button === "templateElUp") {el.prev().insertAfter(el);}
if (button === "templateElDown") {el.insertAfter(el.next());}
if (button === "templateElRemove") {el.remove();}
}
// fireTemplateElDist selector handlers
function fireTemplateElDist() {
if (this.value === "interval") {
var interval = prompt("Populate a height interval (e.g. from 0.17 to 0.2), without space, but with hyphen", "0.17-0.2");
if (interval) {
var option = '<option value="' + interval + '">' + interval + '</option>';
$(this).append(option).val(interval);
}
}
}
// templateSelect on change listener
$("#templateSelect").on("input", function() {
var steps = $("#templateBody > div").length;
var changed = +$("#templateBody").attr("data-changed");
var message = "Are you sure you want to change the base tamplate? All the changes will be lost."
if (steps && changed === 1) {var proceed = confirm(message);}
if (steps === 0 || proceed === true || changed === 0) {
$("#templateBody").empty();
var template = this.value;
$("#templateSelect").attr("data-prev", template);
addStep("Mountain");
if (template === "templateVolcano") {
addStep("Add", 0.07);
addStep("Multiply", 1.1);
addStep("Hill", 5, 0.4);
addStep("Hill", 2, 0.15);
}
if (template === "templateHighIsland") {
addStep("Add", 0.08);
addStep("Multiply", 0.9);
addStep("Range", 4);
addStep("Hill", 12, 0.25);
addStep("Trough", 3);
addStep("Multiply", 0.75, "land");
addStep("Hill", 3, 0.15);
}
if (template === "templateLowIsland") {
addStep("Add", 0.05);
addStep("Smooth");
addStep("Hill", 4, 0.4);
addStep("Hill", 12, 0.2);
addStep("Trough", 3);
addStep("Multiply", 0.3, "land");
}
if (template === "templateContinens") {
addStep("Hill", 24, 0.25);
addStep("Range", 2);
addStep("Hill", 3, 0.1);
addStep("Multiply", 0.7, "land");
addStep("Strait", "2-8");
addStep("Smooth");
addStep("Pit", 5);
addStep("Trough", 3);
addStep("Multiply", 0.8, "land");
addStep("Add", 0.02, "all");
}
if (template === "templateArchipelago") {
addStep("Add", -0.2, "land");
addStep("Hill", 15, 0.15);
addStep("Trough", 2);
addStep("Pit", 8);
addStep("Add", -0.05, "land");
addStep("Multiply", 0.9, "land");
}
if (template === "templateAtoll") {
addStep("Hill", 2, 0.35);
addStep("Range", 1);
addStep("Add", 0.07, "all");
addStep("Smooth");
addStep("Multiply", 0.1, "0.27-10");
}
$("#templateBody").attr("data-changed", 0);
} else {
var prev = $("#templateSelect").attr("data-prev");
$("#templateSelect").val(prev);
}
});
// interprete template function
function addStep(feature, count, dist) {
if (!feature) {return;}
if (feature === "Mountain") {templateMountain.click();}
if (feature === "Hill") {templateHill.click();}
if (feature === "Pit") {templatePit.click();}
if (feature === "Range") {templateRange.click();}
if (feature === "Trough") {templateTrough.click();}
if (feature === "Strait") {templateStrait.click();}
if (feature === "Add") {templateAdd.click();}
if (feature === "Multiply") {templateMultiply.click();}
if (feature === "Smooth") {templateSmooth.click();}
if (count) {$("#templateBody div:last-child .templateElCount").val(count);}
if (dist) {
if (dist !== "land") {
var option = '<option value="' + dist + '">' + dist + '</option>';
$("#templateBody div:last-child .templateElDist").append(option);
}
$("#templateBody div:last-child .templateElDist").val(dist);
}
}
// Execute custom template
$("#templateRun").on("click", function() {
var steps = $("#templateBody > div").length;
if (steps) {cells.map(function(i) {i.height = 0;});}
for (var step=1; step <= steps; step++) {
var element = $("#templateBody div:nth-child(" + step + ")");
var type = element.attr("data-type");
if (type === "Mountain") {addMountain(); continue;}
var count = $("#templateBody div:nth-child(" + step + ") .templateElCount").val();
var dist = $("#templateBody div:nth-child(" + step + ") .templateElDist").val();
if (count) {
if (count[0] !== "-" && count.includes("-")) {
var lim = count.split("-");
count = Math.floor(Math.random() * (+lim[1] - +lim[0] + 1) + +lim[0]);
} else {
count = +count; // parse string
}
}
if (type === "Hill") {addHill(count, +dist);}
if (type === "Pit") {addPit(count);}
if (type === "Range") {addRange(count);}
if (type === "Trough") {addRange(-1 * count);}
if (type === "Strait") {addStrait(count);}
if (type === "Add") {modifyHeights(dist, count, 1);}
if (type === "Multiply") {modifyHeights(dist, 0, count);}
if (type === "Smooth") {smoothHeights();}
}
if (steps) {mockHeightmap();}
});
// Save custom template as text file
$("#templateSave").on("click", function() {
var steps = $("#templateBody > div").length;
var stepsData = "";
for (var step=1; step <= steps; step++) {
var element = $("#templateBody div:nth-child(" + step + ")");
var type = element.attr("data-type");
var count = $("#templateBody div:nth-child(" + step + ") .templateElCount").val();
var dist = $("#templateBody div:nth-child(" + step + ") .templateElDist").val();
if (!count) {count = "0";}
if (!dist) {dist = "0";}
stepsData += type + " " + count + " " + dist + "\r\n";
}
var dataBlob = new Blob([stepsData], {type:"text/plain"});
var url = window.URL.createObjectURL(dataBlob);
var link = document.createElement("a");
link.download = "template_" + Date.now() + ".txt";
link.href = url;
link.click();
});
// Load custom template as text file
$("#templateLoad").on("click", function() {templateToLoad.click();});
$("#templateToLoad").change(function() {
var fileToLoad = document.getElementById("templateToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var dataLoaded = fileLoadedEvent.target.result;
var data = dataLoaded.split("\r\n");
$("#templateBody").empty();
if (data.length > 0) {
$("#templateBody").attr("data-changed", 1);
$("#templateSelect").attr("data-prev", "templateCustom").val("templateCustom");
}
for (var i=0; i < data.length; i++) {
var line = data[i].split(" ");
addStep(line[0], line[1], line[2]);
}
};
fileReader.readAsText(fileToLoad, "UTF-8");
});
// Clear the map
function undraw() {
svg.selectAll("path, circle, text").remove();
cells = [], land = [], riversData = [], island = 0, manors = [], queue = [];
$("#rescalePlus, #rescaleMinus, #smoothHeights").addClass("buttonoff");
}
// Options handlers
$("input, select").on("input", function() {
var id = this.id;
if (id === "styleElementSelect") {
var sel = this.value;
var el = viewbox.select("#"+sel);
if (sel === "roads" || sel === "searoutes") {
var elColor = el.attr("stroke");
} else if (sel === "rivers" || sel === "oceanBase" || sel === "lakes" || sel === "landmass") {
var elColor = el.attr("fill");
}
if (elColor) {
$("#styleColor").show();
styleColorInput.value = styleColorOutput.value = elColor;
} else {
$("#styleColor").hide();
}
if (sel === "regions") {
for (var r = 0; r < capitalsCount; r++) {
var rColor = regions.select(".region"+r).attr("stroke");
$("#styleRegionColors").append('<input type="color" class="styleRegionElement" id="regionColor' + r + '" value="' + rColor + '"/>');
}
$("#styleRegionColors").show();
$(".styleRegionElement").on("input", updateRegionColor);
} else {
$("#styleRegionColors").hide();
$(".styleRegionElement").remove();
}
var opacity = el.attr("opacity");
if (opacity == null) {opacity = 1;}
styleOpacityInput.value = styleOpacityOutput.value = opacity;
return;
}
if (id === "styleColorInput") {
var sel = styleElementSelect.value;
var el = viewbox.select("#"+sel);
if (sel === "roads" || sel === "searoutes") {
el.attr('stroke', this.value);
if (sel === "roads") {viewbox.select("#trails").attr('stroke', this.value);}
} else {
el.attr('fill', this.value);
}
return;
}
if (id === "styleOpacityInput") {
var sel = styleElementSelect.value;
viewbox.select("#"+sel).attr('opacity', this.value);
return;
}
if (id === "sizeInput") {
graphSize = sizeOutput.value = this.value;
}
if (id === "manorsInput") {
manorsCount = manorsOutput.value = this.value;
}
if (id === "regionsInput") {
capitalsCount = regionsOutput.value = this.value;
var size = Math.round(6 - capitalsCount / 20);
if (size < 3) {size = 3;}
capitals.attr("font-size", size);
size = Math.round(18 - capitalsCount / 6);
if (size < 4) {size = 4;}
countries.attr("font-size", size);
}
if (id === "powerInput") {
power = powerOutput.value = this.value;
}
if (id === "neutralInput") {
neutral = neutralOutput.value = this.value;
if (this.value === "100") {neutral = "200";}
}
if (id === "swampinessInput") {
swampiness = swampinessOutput.value = this.value;
}
if (id === "sharpnessInput") {
sharpness = sharpnessOutput.value = this.value;
}
if (id === "brushPower") {brushPowerOutput.value = this.value;}
if (id === "layoutPreset") {changeLayout(this.value);}
});
function changeLayout(preset) {
$("#mapLayers li").not("#toggleOcean, #toggleLandmass").addClass("buttonoff");
$("#toggleOcean, #toggleLandmass").removeClass("buttonoff");
$("#oceanPattern, #landmass").fadeIn();
$("#rivers, #terrain, #borders, #regions, #burgs, #labels, #routes, #grid").fadeOut();
cults.selectAll("path").remove();
terrs.selectAll("path").remove();
if (preset === "layoutPolitical") {
toggleRivers.click();
toggleRelief.click();
toggleBorders.click();
toggleCountries.click();
toggleIcons.click();
toggleLabels.click();
toggleRoutes.click();
}
if (preset === "layoutCultural") {
toggleRivers.click();
toggleRelief.click();
toggleBorders.click();
$("#toggleCultures").click();
toggleIcons.click();
toggleLabels.click();
}
if (preset === "layoutEconomical") {
toggleRivers.click();
toggleRelief.click();
toggleBorders.click();
toggleIcons.click();
toggleLabels.click();
toggleRoutes.click();
}
if (preset === "layoutHeightmap") {
$("#toggleHeight").click();
toggleRivers.click();
}
}
// Region colors change handlers
function updateRegionColor() {
var color = this.value;
var id = this.id;
var r = +id.replace("regionColor", "");
console.log(r);
regions.selectAll(".region"+r).attr("stroke", color).attr("fill", color);
}
// UI Button handlers
$(".tab > button").on("click", function() {
$(".tabcontent").hide();
$(".tab > button").removeClass("active");
$(this).addClass("active");
var id = this.id;
if (id === "layoutTab") {$("#layoutContent").show();}
if (id === "styleTab") {$("#styleContent").show();}
if (id === "optionsTab") {$("#optionsContent").show();}
if (id === "customizeTab") {$("#customizeContent").show();}
});
}
@sbryfcz
Copy link

sbryfcz commented Mar 22, 2017

Since you asked for comments (as a first timer), I'd suggest looking into ways to format your JS for easier readability. Maybe look at jslint or jsbeautify. Sorry but I'd love to read the code but its difficult to read with the current spacing/formatting.

Very cool work! Nice job.

@Azgaar
Copy link
Author

Azgaar commented Mar 23, 2017

Hi @sbryfcz.
Thank you! Sure, I will do some formatting. I understand the code is unreadable and not neat.

P,S. Done, code a bit formatted now. I've also added comments on how it works. Please go ahead with such a good suggestions!

@ikarth
Copy link

ikarth commented Mar 23, 2017

Suggestion for feature expansion: since you have talked about wanting to expand this into a dynasty simulator, you might want to look at using something like Tracery for text generation (which I'm guessing you're planning to do quite a lot of). It's already a Javascript library, so you can just import it and it'll simplify name generation and things like that.

@Azgaar
Copy link
Author

Azgaar commented Mar 23, 2017

Hi @ikarth! Thank you, I will think regarding using this library.

@XCJT
Copy link

XCJT commented Jun 27, 2017

Awesome work!

To change it to d3 pan/zoom you just need to do the following:

  // Fantasy Map Generator main script
  var svg = d3.select("svg"),
    g = svg.append("g"),
    terrs = g.append("g").attr("class", "terrs").on("touchmove mousemove", moved),
    areas = g.append("g").attr("class", "areas"),
    borders = g.append("g").attr("class", "borders"),
    rivers = g.append("g").attr("class", "rivers"),
    coastline = g.append("g").attr("class", "coastline"),
    terrain = g.append("g").attr("class", "terrain"), 
    names = g.append("g").attr("class", "names"),
    burgs = g.append("g").attr("class", "burgs");
  
  svg.call(d3.zoom()
    .scaleExtent([1 / 2, 4])
    .on("zoom", zoomed));
    
  console.log(g.attr("width"))
    
  function zoomed() {
    g.attr("transform", d3.event.transform);
  }
  
  generate(); // genarate map on load

@Saint-Ajora
Copy link

Saint-Ajora commented Jul 4, 2017

Firstly let me say this is one of the greatest things I have ever seen; I have been looking for this for years now. Secondly, I have literally zero experience in coding of any kind but I would like to know if there is a way to either save the image generated by your generator or a way to get the generator to make the same map again and again. For now I have been taking screenshots and matching up the edges in Paint.net (with some success) . I have tried clicking on the "Get Map" button and that seems to just change the island either black or white and draw lines (or show lines) from each manor/town/city.

@Azgaar
Copy link
Author

Azgaar commented Jul 18, 2017

Hi @XCJT. Thank you, zooming is already on D3, just not added to this old version. There are some new cool features developed but not yet deployed, see my blog and jsfiddle. I want to create a stable version and update this page or move to another host as blocks/gist are not really good for that kind of demo. Could you suggest a good platform for a working generator?

@Azgaar
Copy link
Author

Azgaar commented Jul 18, 2017

Hi @Saint-Ajora. Thank you for the feedback! "Get Map" is to complete the custom map, not to download it, sorry for the misleading labeling. I have developed download function (in svg), just not deployed it to this demo version as working on rivers, biomes and UI. I will try to update the page by the end of this week.

@Azgaar
Copy link
Author

Azgaar commented Jul 22, 2017

Hi All,
I've added download button ("save in SVG") and changed zooming to D3 built-in function.
Hope you will enjoy the update.

@dhbahr
Copy link

dhbahr commented Jul 22, 2017

Hi there @Azgaar, let me congratulate you on a really nice job, I discovered this today and I'm already looking forward to the new features.
1 issue though: when I download the image as SVG the Toogle Highmap, Area and Flux stop working, so I can only download 1 version of the map..
Best

@Azgaar
Copy link
Author

Azgaar commented Jul 23, 2017

Hi @dhbahr. Thank you for the bug report! I'll try to fix it. Looks weird.

@Azgaar
Copy link
Author

Azgaar commented Jul 23, 2017

Hi @dhbahr. The issue is fixed now. The root cause is that d3-save-svg library adds computed style attribute to all the elements. So I have to removed style after downloading. Not ideal, but I don't want to re-write d3-save-svg library, so it's OK as still works pretty fast. Please re-test :)

@Azgaar
Copy link
Author

Azgaar commented Aug 24, 2017

New changes are deployed.

@Azgaar
Copy link
Author

Azgaar commented Oct 15, 2017

Hi Guys. Generator is updated and now is more usable, even the project is still in progress and this is a demo version. Please use the main project GitHub page for bug reports or suggestions: https://github.com/Azgaar/Fantasy-Map-Generator/issues

And please let me know if you need manual on how to use the Generator (there are quite a lot of unobvious options / possibilities).

@Azgaar
Copy link
Author

Azgaar commented Mar 29, 2018

The Generator demo is moved to https://azgaar.github.io/Fantasy-Map-Generator

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment