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

1st code commit (wip)

Browse source 
From offline WIP version
This commit is contained in:
Azgaar 2017-10-09 16:10:40 +03:00
parent 9d6a67ac4e
commit 6859d9022f
4 changed files with 3290 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

348
index.css Normal file
View 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
View 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
View file

File diff suppressed because one or more lines are too long

64
vec2.js Normal file
View 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;
};