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

Refactor biome-ui.js a little

Browse Source
This commit is contained in:
Wuzzy 2023-10-20 16:31:11 +02:00
parent 15e7750ef7
commit 6e958d5b28
1 changed files with 39 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
biome-ui.js
View File

@ -8,10 +8,12 @@ const DRAW_MIN = LIMIT_MIN - 10
const DRAW_MAX = LIMIT_MAX + 10
const GRID_STEP = 10
let lastBiomeID = 0;
let biomePoints = [
{name: generateBiomeName(50, 50), heat:50, humidity:50, min_y: MIN_Y_DEFAULT, max_y: MAX_Y_DEFAULT},
{id: 0, name: generateBiomeName(50, 50), heat:50, humidity:50, min_y: MIN_Y_DEFAULT, max_y: MAX_Y_DEFAULT},
];
lastBiomeID++;
// FOREST-16 palette, plus black
const pointColor = "#913636";
@ -36,17 +38,21 @@ const cellColors = [
"#ecddba",
];
// define an array and randomize it
function shuffleArray(values) {
let index = values.length, randomIndex;
// While there remain elements to shuffle
while (index != 0) {
// Pick a remaining element.
randomIndex = Math.floor(Math.random() * index);
index--; // And swap it with the current element.
[values[index], values[randomIndex]] = [values[randomIndex], values[index]];
// returns the biome point by its given ID
// or null if it couldn't be found
function getBiomeByID(id) {
for(let b=0; b<biomePoints.length; b++) {
let biome = biomePoints[b];
if (biome.id === id) {
return biome;
}
}
return values;
return null;
}
// Returns a biome name for displaying it, based on heat and humidity values.
function generateBiomeName(heat, humidity) {
return "("+heat+","+humidity+")";
}
function biomePointToVoronoiPoint(point) {
@ -207,7 +213,7 @@ function getVoronoiDiagram(recalculate) {
function getDrawContext() {
let canvas = document.getElementById("voronoiCanvas");
// TODO: Check for getContext support of browser
return canvas.getContext("2d");
return canvas.getContext("2d");
}
function drawInit() {
let context = getDrawContext();
@ -216,10 +222,13 @@ function drawInit() {
}
function draw(recalculate) {
let context = getDrawContext();
// Clear draw area
context.fillStyle = "#FFFFFF";
context.fillRect(DRAW_MIN, DRAW_MIN, DRAW_MAX-DRAW_MIN, DRAW_MAX-DRAW_MIN);
let diagram = getVoronoiDiagram(recalculate);
//let colors = shuffleArray(cellColors);
// Render cell colors
let colors = cellColors;
for (let c=0; c<diagram.cells.length; c++) {
let cell = diagram.cells[c]
@ -240,7 +249,10 @@ function draw(recalculate) {
context.closePath();
context.fill();
}
// If there's only 1 cell, we have to manually colorize it because
// the Voronoi script doesn't return that area in this special case.
if (biomePoints.length === 1 && diagram.cells.length === 1) {
// 1 cell means the whole area is filled
context.fillStyle = colors[0];
context.fillRect(DRAW_MIN, DRAW_MIN, DRAW_MAX-DRAW_MIN, DRAW_MAX-DRAW_MIN);
}
@ -248,6 +260,7 @@ function draw(recalculate) {
//putAxes(context);
putGrid(context);
// Render Voronoi cell edges
context.lineWidth = 2;
for (let e=0; e<diagram.edges.length; e++) {
let edge = diagram.edges[e];
@ -263,6 +276,7 @@ function draw(recalculate) {
context.stroke();
}
// Render biome points
for (let p=0; p<biomePoints.length; p++) {
if (p === biomeSelector.selectedIndex) {
context.fillStyle = pointColorSelected;
@ -272,6 +286,7 @@ function draw(recalculate) {
putPoint(context, biomePoints[p]);
}
// Render a special message if there are no biomes
if (biomePoints.length === 0) {
context.textAlign = "center";
context.fillStyle = "black";
@ -280,10 +295,6 @@ function draw(recalculate) {
}
}
window.addEventListener("load", drawInit);
window.addEventListener("load", draw);
window.addEventListener("load", rewriteBiomeSelector);
window.addEventListener("load", updateWidgetStates);
function rewriteBiomeSelector() {
biomeSelector.innerHTML = "";
@ -321,10 +332,6 @@ function updateWidgetStates() {
}
}
function generateBiomeName(heat, humidity) {
return "("+heat+","+humidity+")";
}
biomeSelector.onchange = function() {
draw(false);
if (biomeSelector.selectedIndex !== -1) {
@ -376,6 +383,7 @@ addBiomeButton.onclick = function() {
let he = Math.round(Math.random()*100);
let hu = Math.round(Math.random()*100);
let newPoint = {
id: lastBiomeID,
name: generateBiomeName(he, hu),
heat: he,
min_y: MIN_Y_DEFAULT,
@ -386,7 +394,9 @@ addBiomeButton.onclick = function() {
let num = biomePoints.length
let newElem = document.createElement("option");
newElem.id = "_biome_id_" + lastBiomeID;
newElem.value = "" + num;
let newElemText = document.createTextNode(newPoint.name);
newElem.append(newElemText);
biomeSelector.append(newElem);
@ -394,6 +404,8 @@ addBiomeButton.onclick = function() {
draw(true);
updateWidgetStates();
lastBiomeID++;
}
removeBiomeButton.onclick = function() {
if (biomeSelector.selectedOptions.length === 0) {
@ -420,3 +432,9 @@ removeBiomeButton.onclick = function() {
draw(true);
updateWidgetStates();
}
window.addEventListener("load", drawInit);
window.addEventListener("load", draw);
window.addEventListener("load", rewriteBiomeSelector);
window.addEventListener("load", updateWidgetStates);