Wuzzy/libpov_2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Can now select biome color

Browse Source
This commit is contained in:
Wuzzy 2023-10-24 16:06:15 +02:00
parent f06c8a8ff9
commit 903f246d09
3 changed files with 117 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
dark_style.css
View File

@ -62,10 +62,15 @@ input {
select {
width: 20em;
}
button:hover {
button:disabled {
background-color: #101010;
color: #404040;
border-color: #606060;
}
button:enabled:hover {
background-color: gray;
}
button:active {
button:enabled:active {
background-color: white;
border-color: #808080;
color: black;
@ -155,3 +160,14 @@ h3 {
.collapser {
cursor: pointer;
}
#biomeColorSection {
margin: 0;
padding: 0;
display: inline;
}
.biomeColorButton {
margin-left: 0px;
margin-right: 1px;
margin-top: 0.2em;
margin-bottom: 0.2em;
}

39
index.html
View File

@ -54,27 +54,28 @@ A Voronoi diagram is supposed to be here but for some reason it cannot be displa
</div>
<div id="biomeEditElements">
<h3>Selected biome</h3>
<label for="inputBiomeName">Name:
<label for="inputBiomeName">Name:&nbsp;</label>
<input id="inputBiomeName" type="text">
</label>
<br>
<label for="inputHeat">Heat:
<div id="biomeColorSection">
<label>Color:&nbsp;</label>
</div>
<br>
<label for="inputHeat">Heat:&nbsp;</label>
<input id="inputHeat" type="number" value="50" step="1">
</label>
<label for="inputHumidity">Humidity:
<label for="inputHumidity">Humidity:&nbsp;</label>
<input id="inputHumidity" type="number" value="50" step="1">
</label>
<br>
<label for="inputMinY">Min. Y:
<label for="inputMinY">Min. Y:&nbsp;</label>
<input id="inputMinY" type="number" value="-31000" step="1">
</label>
<label for="inputMaxY">Max. Y:
<label for="inputMaxY">Max. Y:&nbsp;</label>
<input id="inputMaxY" type="number" value="31000" step="1">
</label>
</div>
</form>
</div>
@ -82,7 +83,7 @@ A Voronoi diagram is supposed to be here but for some reason it cannot be displa
<h2 class="configHeader"><span class="collapser" id="viewConfigHeaderLink">▼</span> Diagram view settings</h2>
<div id="viewConfigContainer" class="configFrame">
<form id="viewForm">
<label for="inputViewY">Altitude:</label>
<label for="inputViewY">Altitude:&nbsp;</label>
<input id="inputViewY" type="number" value="0" step="1">
<br>
@ -109,29 +110,29 @@ A Voronoi diagram is supposed to be here but for some reason it cannot be displa
<div class="configFrame" id="noiseConfigContainer">
<form id="noiseForm">
<h3>Heat (<code>mg_biome_np_heat</code>)</h3>
<label for="inputNoiseHeatOffset">Offset:</label>
<label for="inputNoiseHeatOffset">Offset:&nbsp;</label>
<input id="inputNoiseHeatOffset" type="number" value="50">
<label for="inputNoiseHeatScale">Scale:</label>
<label for="inputNoiseHeatScale">Scale:&nbsp;</label>
<input id="inputNoiseHeatScale" type="number" value="50">
<label for="inputNoiseHeatOctaves">Octaves:</label>
<label for="inputNoiseHeatOctaves">Octaves:&nbsp;</label>
<input id="inputNoiseHeatOctaves" type="number" value="3" step="1" min="1">
<label for="inputNoiseHeatPersistence">Persistence:</label>
<label for="inputNoiseHeatPersistence">Persistence:&nbsp;</label>
<input id="inputNoiseHeatPersistence" type="number" value="0.5" step=0.1>
<h3>Humidity (<code>mg_biome_np_humidity</code>)</h3>
<label for="inputNoiseHumidityOffset">Offset:</label>
<label for="inputNoiseHumidityOffset">Offset:&nbsp;</label>
<input id="inputNoiseHumidityOffset" type="number" value="50">
<label for="inputNoiseHumidityScale">Scale:</label>
<label for="inputNoiseHumidityScale">Scale:&nbsp;</label>
<input id="inputNoiseHumidityScale" type="number" value="50">
<label for="inputNoiseHumidityOctaves">Octaves:</label>
<label for="inputNoiseHumidityOctaves">Octaves:&nbsp;</label>
<input id="inputNoiseHumidityOctaves" type="number" value="3" step="1" min="1">
<label for="inputNoiseHumidityPersistence">Persistence:</label>
<label for="inputNoiseHumidityPersistence">Persistence:&nbsp;</label>
<input id="inputNoiseHumidityPersistence" type="number" value="0.5" step=0.1>
<h3>Reset</h3>

93
mibpov.js
View File

@ -56,6 +56,7 @@ const CELL_COLORS = [
"#836299",
];
const CELL_COLOR_NEUTRAL = "#888888";
const COLOR_BUTTON_BORDER_SELECTED = "#FF0000";
/* Status variables for the diagram calculations */
@ -195,6 +196,7 @@ let biomePoints = [];
// Add a biome to the biome list
function addBiome(biomeDef) {
biomeDef.id = lastBiomeID;
biomeDef.colorIndex = lastBiomeID % CELL_COLORS.length;
biomePoints.push(biomeDef);
// The biome ID is just a simple ascending number
lastBiomeID++;
@ -662,8 +664,8 @@ function draw(recalculate) {
let biomeID = cell.site[biomeIDSymbol];
// This works because the biome ID is a number
let biome = getBiomeByID(biomeID);
if (biome.color) {
context.strokeStyle = biome.color;
if (biome.colorIndex) {
context.strokeStyle = CELL_COLORS[biome.colorIndex];
} else {
let ccol = biomeID % CELL_COLORS.length;
context.strokeStyle = CELL_COLORS[ccol];
@ -686,8 +688,8 @@ function draw(recalculate) {
// This works because the biome ID is a number
let biome = getBiomeByID(biomeID);
if (biome.color) {
context.fillStyle = biome.color;
if (biome.colorIndex) {
context.fillStyle = CELL_COLORS[biome.colorIndex];
} else {
let ccol = biomeID % CELL_COLORS.length;
context.fillStyle = CELL_COLORS[ccol];
@ -701,7 +703,16 @@ function draw(recalculate) {
// the Voronoi script doesn't return that area in this special case.
if (points.length === 1 && diagram.cells.length === 1) {
// 1 cell means the whole area is filled
context.fillStyle = colors[points[0].id % colors.length];
let cell = diagram.cells[0];
let biomeID = cell.site[biomeIDSymbol];
let biome = getBiomeByID(biomeID);
if (biome.colorIndex) {
context.fillStyle = CELL_COLORS[biome.colorIndex];
} else {
let ccol = biomeID % CELL_COLORS.length;
context.fillStyle = CELL_COLORS[ccol];
}
context.fillRect(-DRAW_OFFSET, -DRAW_OFFSET, w+DRAW_OFFSET, h+DRAW_OFFSET);
}
} else {
@ -790,22 +801,25 @@ function repopulateBiomeSelector() {
/* Update the status (like disabled or value) of all widgets that
affect the diagram, based on the internal data */
function updateWidgetStates() {
let state;
if (biomePoints.length === 0 || biomeSelector.selectedIndex === -1) {
removeBiomeButton.disabled = "disabled";
inputHeat.disabled = "disabled";
inputHumidity.disabled = "disabled";
inputMinY.disabled = "disabled";
inputMaxY.disabled = "disabled";
inputBiomeName.disabled = "disabled";
inputBiomeColor.disabled = "disabled";
state = "disabled";
} else {
removeBiomeButton.disabled = "";
inputHeat.disabled = "";
inputHumidity.disabled = "";
inputMinY.disabled = "";
inputMaxY.disabled = "";
inputBiomeName.disabled = "";
inputBiomeColor.disabled = "";
state = "";
}
inputHeat.disabled = state;
inputHumidity.disabled = state;
inputMinY.disabled = state;
inputMaxY.disabled = state;
inputBiomeName.disabled = state;
for (let c=0; c<CELL_COLORS.length; c++) {
let elem = document.getElementById("inputBiomeColor"+c);
if (elem) {
elem.disabled = state;
elem.style.borderColor = "";
elem.innerHTML = "&nbsp;";
}
}
if (biomeSelector.selectedIndex !== -1) {
let selected = biomeSelector.options[biomeSelector.selectedIndex];
let point = biomePoints[biomeSelector.selectedIndex];
@ -814,7 +828,18 @@ function updateWidgetStates() {
inputMinY.value = point.min_y;
inputMaxY.value = point.max_y;
inputBiomeName.value = point.name;
inputBiomeColor.value = point.color;
let colorIndex = point.colorIndex;
for (let c=0; c<CELL_COLORS.length; c++) {
let elem = document.getElementById("inputBiomeColor"+c);
if (elem) {
if (c === colorIndex) {
// Add a symbol for selected color
elem.innerHTML = "&#9679;"; // Unicode: BLACK CIRCLE
} else {
// Blank out non-selected color
elem.innerHTML = "&nbsp;";
}
}
}
}
inputNoiseHeatOffset.value = noises.heat.offset;
@ -832,9 +857,6 @@ Will update internal data, biome list and the diagram.
* pointField: Name of the field it affects (same as in biomePoints)
* value: The value to set */
function onChangeBiomeValueWidget(pointField, value) {
if (value === null) {
return;
}
if (biomeSelector.selectedIndex === -1) {
return;
}
@ -1050,6 +1072,25 @@ function unhideContent() {
noscriptContainer.hidden = true;
}
function initBiomeColorSelectors() {
for (let c=0; c<CELL_COLORS.length; c++) {
let button = document.createElement("button");
button.type = "button";
button.style.backgroundColor = CELL_COLORS[c];
button.style.width = "2em";
button.style.height = "2em";
button.innerHTML = "&nbsp;";
button.id = "inputBiomeColor"+c;
button.className = "biomeColorButton";
biomeColorSection.append(button);
button.onclick = function() {
onChangeBiomeValueWidget("colorIndex", c);
updateWidgetStates();
}
}
}
/***** EVENTS *****/
/* Canvas events */
@ -1143,7 +1184,7 @@ addBiomeButton.onclick = function() {
humidity: hu,
min_y: MIN_Y_DEFAULT,
max_y: MAX_Y_DEFAULT,
color: null,
colorIndex: lastBiomeID % CELL_COLORS.length,
};
biomePoints.push(newPoint);
let num = biomePoints.length
@ -1205,9 +1246,6 @@ inputMaxY.oninput = function() {
inputBiomeName.oninput = function() {
onChangeBiomeValueWidget("name", this.value);
}
inputBiomeColor.oninput = function() {
onChangeBiomeValueWidget("color", this.value);
}
/* Diagram view settings events */
@ -1326,6 +1364,7 @@ noiseConfigHeaderLink.onclick = function() {
/* Load events */
window.addEventListener("load", initBiomeColorSelectors);
window.addEventListener("load", checkboxVarsInit);
window.addEventListener("load", function() {
draw(true);