mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-16 17:31:24 +01:00
1st code commit (wip)
From offline WIP version
This commit is contained in:
Azgaar
parent
9d6a67ac4e
commit
6859d9022f
4 changed files with 3290 additions and 0 deletions
348
index.css
Normal file
348
index.css
Normal file
|
|
@ -0,0 +1,348 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Bitter:400,400i&subset=latin-ext');
|
||||||
|
body {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
position: absolute;
|
||||||
|
background-color: #5167a9;
|
||||||
|
border: 1px solid #414345;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base {
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ocean {
|
||||||
|
filter: url(#blurFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mottling {
|
||||||
|
fill: url(#mottling);
|
||||||
|
opacity: .1;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox] {
|
||||||
|
width: 8px;
|
||||||
|
height: 14px;
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapCells {
|
||||||
|
stroke-width: 0.1;
|
||||||
|
shape-rendering: optimizeSpeed;
|
||||||
|
mask: url(#shape);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapContours {
|
||||||
|
stroke-width: 0.1;
|
||||||
|
shape-rendering: optimizeSpeed;
|
||||||
|
mask: url(#shape);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hillHatch {
|
||||||
|
fill: none;
|
||||||
|
stroke: grey;
|
||||||
|
stroke-width: 1;
|
||||||
|
stroke-dasharray: 0.1, 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
stroke: grey;
|
||||||
|
stroke-width: 0.1;
|
||||||
|
fill: #5167a9;
|
||||||
|
fill-opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hCells {
|
||||||
|
stroke-width: .7;
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flux {
|
||||||
|
stroke-width: 0.1;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.islandBack {
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lakecoast {
|
||||||
|
fill: #95cff3;
|
||||||
|
stroke: #477794;
|
||||||
|
stroke-width: 0.2;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coastShade {
|
||||||
|
opacity: 0.5;
|
||||||
|
filter: url(#blurFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coastline {
|
||||||
|
fill: none;
|
||||||
|
stroke: #1f3846;
|
||||||
|
stroke-width: 1;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
#shape {
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shallow {
|
||||||
|
fill: url(#shallowHatch);
|
||||||
|
mask: url(#shape);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coastOutline {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rivers {
|
||||||
|
fill: none;
|
||||||
|
stroke: #5d97bb;
|
||||||
|
stroke-linecap: round;
|
||||||
|
mask: url(#shape);
|
||||||
|
}
|
||||||
|
|
||||||
|
.riversShade {
|
||||||
|
fill: none;
|
||||||
|
stroke: black;
|
||||||
|
opacity: 0.9;
|
||||||
|
filter: url(#blurFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hatching {
|
||||||
|
fill: none;
|
||||||
|
stroke: grey;
|
||||||
|
stroke-width: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#initial {
|
||||||
|
display: none;
|
||||||
|
font-family: Georgia;
|
||||||
|
position: absolute;
|
||||||
|
cursor: default;
|
||||||
|
color: #fff5da;
|
||||||
|
top: 8%;
|
||||||
|
left: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonBig {
|
||||||
|
font-family: vedrana;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-shadow: 1px 0px 1px #FF5722;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 24px;
|
||||||
|
padding: 10px 15px 8px 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonBig:hover {
|
||||||
|
background: rgba(110,140,200,0.4);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonBig:active {
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonBig span {
|
||||||
|
display: none;
|
||||||
|
text-shadow: none;
|
||||||
|
color: #364162;
|
||||||
|
margin-right: 14px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonBig:hover span {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-shadow: 0px 1px 4px #4c3a35;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title_name {
|
||||||
|
font-size: 40px;
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
font-size: 75px;
|
||||||
|
margin-top: -12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#version {
|
||||||
|
text-align: right;
|
||||||
|
margin: -5px 14px 14px 0;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step {
|
||||||
|
font-family: Georgia;
|
||||||
|
text-shadow: 0px 2px 8px #4c3a35;
|
||||||
|
fill: #fff5da;
|
||||||
|
font-size: 5px;
|
||||||
|
fill-opacity: .1;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toolbar {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 18px;
|
||||||
|
width: 27px;
|
||||||
|
top: 187px;
|
||||||
|
border: 1px solid #39464e;
|
||||||
|
border-left: 0;
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
background: linear-gradient(#c2b6b6, #b5bbc2, #7A7A7A);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar_button {
|
||||||
|
position: relative;
|
||||||
|
text-shadow: 1px 0px 2px #222c36;
|
||||||
|
color: #cfd6d9;
|
||||||
|
margin: 0 -8px 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
stroke: black;
|
||||||
|
stroke-width: 0.6;
|
||||||
|
fill: none;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlighted {
|
||||||
|
stroke: gray;
|
||||||
|
stroke-width: 0.4;
|
||||||
|
fill: none;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursored {
|
||||||
|
fill: none;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cellMenu {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid #39464e;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: linear-gradient(#c2b6b6, #b5bbc2, #7A7A7A);
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cellMenu_button {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
text-shadow: 1px 0px 5px #222c36;
|
||||||
|
color: #cfd6d9;
|
||||||
|
padding: 1px 4px;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar_button:hover, .cellMenu_button:hover {
|
||||||
|
text-shadow: 1px 0px 3px black;
|
||||||
|
color: #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar_button:active, .cellMenu_button:active {
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller {
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
#back {
|
||||||
|
margin-right: -11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hintbar {
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
top: 520px;
|
||||||
|
width: 960px;
|
||||||
|
cursor: default;
|
||||||
|
text-shadow: 1px 0px 1px #1d0e0f;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 17px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbarSection {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
margin: -1px 0 0 27px;
|
||||||
|
border: 1px solid #39464e;
|
||||||
|
border-left: 0;
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
background: linear-gradient(150deg, #bfb7b9, #b5bbc2, #7A7A7A);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbarSection > div {
|
||||||
|
margin: 0 -4px 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toolbar_step2 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cloud {
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
font-size: 50px;
|
||||||
|
fill: #fcfcfd;
|
||||||
|
stroke: #39464e;
|
||||||
|
stroke-width: 2px;
|
||||||
|
text-anchor: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cloudArrow {
|
||||||
|
font-size: 16px;
|
||||||
|
fill: #39464e;
|
||||||
|
stroke-width: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wind {
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#operative {
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid #414345;
|
||||||
|
left: 974px;
|
||||||
|
top: 8px;
|
||||||
|
}
|
||||||
238
index.html
Normal file
238
index.html
Normal file
|
|
@ -0,0 +1,238 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Azgaar's Fantasy Map Generator (WIP)</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>
|
||||||
|
<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 src="https://d3js.org/d3.v4.min.js"></script>
|
||||||
|
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
|
||||||
|
<script src="https://d3js.org/d3-contour.v1.min.js"></script>
|
||||||
|
<script src="https://cdn.rawgit.com/jarek-foksa/path-data-polyfill.js/master/path-data-polyfill.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.3.0/simplex-noise.js"></script>
|
||||||
|
<script src="https://cdn.rawgit.com/edeno/d3-save-svg/gh-pages/assets/d3-save-svg.min.js"></script>
|
||||||
|
<script src="https://d3js.org/topojson.v1.min.js"></script>
|
||||||
|
<script src="https://use.fontawesome.com/b6af125a10.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
|
||||||
|
<script src="vec2.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="info" width="100" height="20" style="position:absolute; top:550px; color:'black'"></div>
|
||||||
|
<svg width="960" height="540">
|
||||||
|
<defs>
|
||||||
|
<g id="deftemp">
|
||||||
|
<mask id="shape">
|
||||||
|
<rect x="0" y="0" width="100%" height="100%" fill="black" />
|
||||||
|
</mask>
|
||||||
|
</g>
|
||||||
|
<filter id="blurFilter" x="-1" y="-1" width="100" height="100">
|
||||||
|
<feGaussianBlur in="SourceGraphic" stdDeviation="0.2" />
|
||||||
|
</filter>
|
||||||
|
<pattern id="shallowHatch" width="2" height="4" patternTransform="rotate(90 0 0)" patternUnits="userSpaceOnUse">
|
||||||
|
<line x1="0" y1="0" x2="0" y2="4" style="stroke: black; stroke-width: 0.4; opacity: 0.7" />
|
||||||
|
</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>
|
||||||
|
<g id="rose" transform="translate(20 75) scale(0.3)">
|
||||||
|
<g id="sL" fill="none" stroke="#3f3f3f" stroke-width="2">
|
||||||
|
<line x1="0" y1="0" x2="0" y2="10000"/>
|
||||||
|
<line x1="0" y1="0" x2="10000" y2="0"/>
|
||||||
|
<line x1="0" y1="0" x2="-10000" y2="0"/>
|
||||||
|
<line x1="0" y1="0" x2="0" y2="-10000"/>
|
||||||
|
</g>
|
||||||
|
<use xlink:href="#sL" transform="rotate(45)"/>
|
||||||
|
<use xlink:href="#sL" transform="rotate(22.5)"/>
|
||||||
|
<use xlink:href="#sL" transform="rotate(-22.5)"/>
|
||||||
|
<use xlink:href="#sL" transform="rotate(11.25)"/>
|
||||||
|
<use xlink:href="#sL" transform="rotate(-11.25)"/>
|
||||||
|
<use xlink:href="#sL" transform="rotate(56.25)"/>
|
||||||
|
<use xlink:href="#sL" transform="rotate(-56.25)"/>
|
||||||
|
<circle r="9" fill="#1b1b1b"/>
|
||||||
|
<g fill="none" stroke="green" stroke-width="8">
|
||||||
|
<circle r="75"/>
|
||||||
|
<circle r="212" stroke="#1b1b1b"/>
|
||||||
|
<circle r="211"/>
|
||||||
|
</g>
|
||||||
|
<g stroke="#1b1b1b" stroke-width="1" fill="none">
|
||||||
|
<circle r="71"/>
|
||||||
|
<circle r="79"/>
|
||||||
|
<circle r="94"/>
|
||||||
|
<circle r="152"/>
|
||||||
|
<circle r="164"/>
|
||||||
|
<circle r="207"/>
|
||||||
|
</g>
|
||||||
|
<g id="s3">
|
||||||
|
<g id="s2">
|
||||||
|
<g id="s1" stroke="#1b1b1b" stroke-width="1">
|
||||||
|
<path d="M 39.416,95.16 C 33.65,103.95 30.76,110.5 28.93,117.18 C 15.24,113.43 13.54,127.15 23.04,131 C 13.71,145.8 7.84,173.93 0,212 L 0,103 A 103,103 0 0,0 39.416,95.16 z" fill="#47a3d1"/>
|
||||||
|
<path d="M 39.416,95.16 C 33.65,103.95 30.76,110.5 28.93,117.18 C 15.24,113.43 13.54,127.15 23.04,131 C 13.71,145.8 7.84,173.93 0,212 L 0,103 A 103,103 0 0,0 39.416,95.16 z" fill="black" transform="scale(-1,1)"/>
|
||||||
|
<path d="M -31.995,160.849 A 164,164 0 0,0 31.995,160.849 C 18.9,170.1 8.4,176.3 0,207 C -8.4,176.3 -18.9,170.1 -31.995,160.849 z" fill="#c2390f" transform="rotate(22.5)"/>
|
||||||
|
</g>
|
||||||
|
<use xlink:href="#s1" transform="rotate(45)"/>
|
||||||
|
</g>
|
||||||
|
<use xlink:href="#s2" transform="rotate(90)"/>
|
||||||
|
</g>
|
||||||
|
<use xlink:href="#s3" transform="scale(-1)"/>
|
||||||
|
</g>
|
||||||
|
</defs>
|
||||||
|
<g class="viewbox">
|
||||||
|
<g class="container"></g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<div id="canvasContainer"></div>
|
||||||
|
<div id="menu">
|
||||||
|
<div id="hintbar"></div>
|
||||||
|
<div id="statusbar"></div>
|
||||||
|
<div id="toolbar">
|
||||||
|
<div id="toolbar_buttons">
|
||||||
|
<div id="toolbar_step1" class="step_buttons">
|
||||||
|
<div id="map_template_buttons" style="width:106px" class="toolbarSection">
|
||||||
|
<div id="temp_high_island" class="toolbar_button inline">H</div>
|
||||||
|
<div id="temp_low_island" class="toolbar_button inline">L</div>
|
||||||
|
<div id="temp_isles" class="toolbar_button inline">C</div>
|
||||||
|
<div id="temp_archipelago" class="toolbar_button inline">Ar</div>
|
||||||
|
<div id="temp_atoll" class="toolbar_button inline">At</div>
|
||||||
|
</div>
|
||||||
|
<div id="map_template" class="toolbar_button">☷</div>
|
||||||
|
<div id="map_mode_rand" style="width:74px" class="toolbarSection">
|
||||||
|
<div id="rand_hill" class="toolbar_button inline">H</div>
|
||||||
|
<div id="rand_range" class="toolbar_button inline">R</div>
|
||||||
|
<div id="rand_pit" class="toolbar_button inline">P</div>
|
||||||
|
<div id="rand_trough" class="toolbar_button inline">T</div>
|
||||||
|
</div>
|
||||||
|
<div id="map_mode_draw" style="width:80px" class="toolbarSection">
|
||||||
|
<div id="draw_increase" status="1" class="toolbar_button inline">↥</div>
|
||||||
|
<div id="draw_decrease" status="0" class="toolbar_button inline">↧</div>
|
||||||
|
<div id="draw_align" status="0" class="toolbar_button inline">=</div>
|
||||||
|
<div id="draw_erase" status="0" class="toolbar_button inline smaller">0</div>
|
||||||
|
<div id="draw_smooth" status="0" class="toolbar_button inline smaller">↝</div>
|
||||||
|
</div>
|
||||||
|
<div id="map_mode_selection" style="width:139px" class="toolbarSection">
|
||||||
|
<div id="cell_expand" class="toolbar_button inline">⧾</div>
|
||||||
|
<div id="cell_line" start="" class="toolbar_button inline">↗</div>
|
||||||
|
<div id="cell_cancel" class="toolbar_button inline smaller">⨉</div>
|
||||||
|
<div class="inline smaller">|</div>
|
||||||
|
<div id="map_up" class="toolbar_button inline">↥</div>
|
||||||
|
<div id="map_down" class="toolbar_button inline">↧</div>
|
||||||
|
<div id="map_relax" class="toolbar_button inline">↝</div>
|
||||||
|
<div id="map_random" class="toolbar_button inline">⇝</div>
|
||||||
|
</div>
|
||||||
|
<div id="map_mode" status="-1" class="toolbar_button">☸</div>
|
||||||
|
<div id="change_power" style="margin-left: 2px;" class="toolbar_button inline smaller">.05</div>
|
||||||
|
<div id="map_noise_buttons" style="width:60px" class="toolbarSection">
|
||||||
|
<div id="generate_noise" class="toolbar_button inline smaller">↻</div>
|
||||||
|
<div id="apply_noise" class="toolbar_button inline smaller">✓</div>
|
||||||
|
<div id="cancel_noise" class="toolbar_button inline smaller">⨉</div>
|
||||||
|
</div>
|
||||||
|
<div id="map_noise" style="margin-left: 3px;" class="toolbar_button smaller">෴</div>
|
||||||
|
<div id="map_clear" style="margin-left: 5px;" class="toolbar_button inline smaller">❌</div>
|
||||||
|
</div>
|
||||||
|
<div id="toolbar_step2" class="step_buttons">
|
||||||
|
<div id="map_temp" class="toolbar_button smaller">℃</div>
|
||||||
|
<div id="map_wind_buttons" style="width:60px" class="toolbarSection">
|
||||||
|
<div id="map_wind_animation" style="font-size: x-small;" class="toolbar_button inline">▶️❚❚</div>
|
||||||
|
<div id="map_precipitation" class="toolbar_button inline smaller">☔</div>
|
||||||
|
<div id="map_apply_prec" class="toolbar_button inline smaller">✓</div>
|
||||||
|
</div>
|
||||||
|
<div id="map_wind" class="toolbar_button">W</div>
|
||||||
|
<div id="map_style_buttons" style="width:110px" class="toolbarSection">
|
||||||
|
<div id="map_polygonal" class="toolbar_button inline smaller">P</div>
|
||||||
|
<div id="map_noisy" class="toolbar_button inline smaller">N</div>
|
||||||
|
<div id="map_relaxed" class="toolbar_button inline smaller">R</div>
|
||||||
|
<div id="map_contours" class="toolbar_button inline smaller">C</div>
|
||||||
|
<div id="map_triangled" class="toolbar_button inline smaller">T</div>
|
||||||
|
<div id="map_shaded" class="toolbar_button inline smaller">S</div>
|
||||||
|
<div id="map_flat" class="toolbar_button inline smaller">F</div>
|
||||||
|
</div>
|
||||||
|
<div id="map_style" class="toolbar_button smaller">St</div>
|
||||||
|
</div>
|
||||||
|
<div id="resetZoom" class="toolbar_button smaller">1:1</div>
|
||||||
|
<div id="download" class="toolbar_button">📥</div>
|
||||||
|
<div><span id="back" class="toolbar_button">◀</span>
|
||||||
|
<span id="next" class="toolbar_button">▶</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="bottom_panel">
|
||||||
|
<button onclick="$('#options').fadeToggle()">Options</button>
|
||||||
|
<br>Cell: <span id="cell">0</span>; Cell/Point Height: <span id="height">0</span>/<span id="heightPoint">0</span>; River: <span id="river"></span>; <span id="feature"></span>;
|
||||||
|
<br>Temperature: <span id="temperature">no</span> ºC; Precipitation: <span id="precipitation">no</span> cm; Elevation: <span id="elevation">no</span> m; Biom: <span id="biom">no</span>;
|
||||||
|
</div>
|
||||||
|
<div id="options" style="font-size: small;" hidden>
|
||||||
|
<div style="width:50%; float: right;">
|
||||||
|
<label>Map Type: </label><select id="mapType">
|
||||||
|
<option value="heightmap" selected>Heightmap</option>
|
||||||
|
<option value="biomes">Biomes</option>
|
||||||
|
</select><br>
|
||||||
|
<label>Map Style: </label><select id="mapStyle">
|
||||||
|
<option value="map_polygonal">Polygonal</option>
|
||||||
|
<option value="map_triangled">Triangled</option>
|
||||||
|
<option value="map_contours">Contours</option>
|
||||||
|
<option value="map_noisy">Noisy</option>
|
||||||
|
<option value="map_relaxed" selected>Relaxed</option>
|
||||||
|
<option value="map_shaded">Shaded</option>
|
||||||
|
<option value="map_flat">Flat</option>
|
||||||
|
</select><br>
|
||||||
|
<label>Slope hatching
|
||||||
|
<input id="hatchingInput" type="checkbox">
|
||||||
|
</label><br>
|
||||||
|
<label>Coast Style: </label><select id="coastStyle">
|
||||||
|
<option value="simple" selected>Simple</option>
|
||||||
|
<option value="outlined">Outlined</option>
|
||||||
|
<option value="hatched">Hatched</option>
|
||||||
|
</select><br>
|
||||||
|
<label>Map Color: </label><select id="mapColor">
|
||||||
|
<option value="bright" selected>Bright</option>
|
||||||
|
<option value="light">Light</option>
|
||||||
|
<option value="green">Green</option>
|
||||||
|
<option value="blue">Blue</option>
|
||||||
|
<option value="monochrome">Monochrome</option>
|
||||||
|
</select><br>
|
||||||
|
<label>Blur
|
||||||
|
<input id="blurInput" type="checkbox">
|
||||||
|
</label><br>
|
||||||
|
<label>Voronoi polygons
|
||||||
|
<input id="strokesInput" type="checkbox">
|
||||||
|
</label><br>
|
||||||
|
<label>Toggle flux map
|
||||||
|
<input id="fluxInput" type="checkbox">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Wave power:</label>
|
||||||
|
<input id="wavepowerInput" value="0.5" type="range" min="0" max="1" step="0.01" oninput="wavepowerOutput.value = wavepowerInput.valueAsNumber">
|
||||||
|
<output id="wavepowerOutput">0.5</output>
|
||||||
|
<br>
|
||||||
|
<label>Downcutting:</label>
|
||||||
|
<input id="downcuttingInput" value="0.05" type="range" min="0" max="0.3" step="0.01" oninput="downcuttingOutput.value = downcuttingInput.valueAsNumber">
|
||||||
|
<output id="downcuttingOutput">0.05</output>
|
||||||
|
<br><label>Temperature:</label>
|
||||||
|
<input id="temperatureInput" value="10" type="range" min="0" max="25" step="1" oninput="temperatureOutput.value = temperatureInput.valueAsNumber; randomTemp.checked = false;">
|
||||||
|
<output id="temperatureOutput">10</output> <label>(random<input type="checkbox" id="randomTemp" checked>)</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="initial">
|
||||||
|
<div id="title_name" class="title">Azgaar's</div>
|
||||||
|
<div id="title" class="title">Fantasy Map Generator</div>
|
||||||
|
<div id="version" class="title">ver. 0.26a</div>
|
||||||
|
<div id="explore" class="buttonBig">Explore the Map<span>show the current map</span></div>
|
||||||
|
<div id="new_journey" class="buttonBig">Creation Journey<span>create a new map</span></div>
|
||||||
|
<div id="new_random" class="buttonBig">Random Map<span>generate a new random map</span></div>
|
||||||
|
<div id="about" onclick="window.open('http://www.azgaar.wordpress.com')" class="buttonBig">Development Blog<span>read about generator creation process</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="operative">
|
||||||
|
Color: <input class="jscolor" value="0A1726"></input><br>
|
||||||
|
Angle modifier: <input id="angleInput" value="15" type="range" min="0" max="50" step="1" onchange="angleOutpoot.value = this.value"></input>
|
||||||
|
<output id="angleOutpoot">15</output><br>
|
||||||
|
Alignment: <input id="alignmentInput" value="0.2"></input><br>
|
||||||
|
Separation: <input id="separationInput" value="0.5"></input><br>
|
||||||
|
Persistence: <input id="persistenceInput" value="0.1"></input><br>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript" src="script.js"></script>
|
||||||
|
</body>
|
||||||
2640
script.js
Normal file
2640
script.js
Normal file
File diff suppressed because one or more lines are too long
64
vec2.js
Normal file
64
vec2.js
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
function Vec2(x, y) {
|
||||||
|
this.x = x || 0;
|
||||||
|
this.y = y || 0;
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
Vec2.prototype.add = function(v) {
|
||||||
|
this.x += v.x;
|
||||||
|
this.y += v.y;
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
Vec2.prototype.subtract = function(v) {
|
||||||
|
this.x -= v.x;
|
||||||
|
this.y -= v.y;
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
Vec2.prototype.scale = function(s) {
|
||||||
|
this.x = this.x * s;
|
||||||
|
this.y = this.y * s;
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
Vec2.prototype.scaleTo = function(s) {
|
||||||
|
var length = this.length();
|
||||||
|
this.x = this.x * s / length;
|
||||||
|
this.y = this.y * s / length;
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
Vec2.prototype.normalize = function() {
|
||||||
|
var length = this.length();
|
||||||
|
this.x = this.x / length;
|
||||||
|
this.y = this.y / length;
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
Vec2.prototype.length = function() {
|
||||||
|
return Math.sqrt(this.x * this.x + this.y * this.y);
|
||||||
|
};
|
||||||
|
|
||||||
|
Vec2.prototype.truncate = function(max) {
|
||||||
|
var length = this.length();
|
||||||
|
if (length > max) {
|
||||||
|
this.x = this.x * max / length;
|
||||||
|
this.y = this.y * max / length;
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
Vec2.prototype.dot = function(v) {
|
||||||
|
return this.x * v.x + this.y * v.y;
|
||||||
|
};
|
||||||
|
|
||||||
|
Vec2.prototype.clone = function() {
|
||||||
|
return new Vec2(this.x, this.y);
|
||||||
|
};
|
||||||
|
|
||||||
|
Vec2.prototype.turn = function(a) {
|
||||||
|
this.x = this.x * Math.cos(a) - this.y * Math.sin(a),
|
||||||
|
this.y = this.x * Math.sin(a) + this.y * Math.cos(a)
|
||||||
|
return this;
|
||||||
|
};
|
||||||
Loading…
Add table
Add a link
Reference in a new issue