need more noise features
This commit is contained in:
Yggdrasil75
@@ -16,6 +16,53 @@
|
||||
<button onclick="switchMode()" id="switchModeBtn" style="display: none;">Switch Mode</button>
|
||||
<button onclick="showStats()" id="statsBtn">Show Performance Stats</button>
|
||||
<button onclick="clearStats()" id="clearStatsBtn">Clear Stats</button>
|
||||
<button onclick="toggleParameters()" id="paramsBtn">Show Parameters</button>
|
||||
</div>
|
||||
|
||||
<!-- Parameter Control Panel -->
|
||||
<div id="parameterPanel" class="parameter-panel" style="display: none;">
|
||||
<h3>Terrain Parameters</h3>
|
||||
<div class="param-grid">
|
||||
<div class="param-group">
|
||||
<label for="scale">Scale:</label>
|
||||
<input type="range" id="scale" min="0.1" max="20" step="0.1" value="4.0">
|
||||
<span id="scaleValue">4.0</span>
|
||||
</div>
|
||||
<div class="param-group">
|
||||
<label for="octaves">Octaves:</label>
|
||||
<input type="range" id="octaves" min="1" max="8" step="1" value="4">
|
||||
<span id="octavesValue">4</span>
|
||||
</div>
|
||||
<div class="param-group">
|
||||
<label for="persistence">Persistence:</label>
|
||||
<input type="range" id="persistence" min="0" max="1" step="0.05" value="0.5">
|
||||
<span id="persistenceValue">0.5</span>
|
||||
</div>
|
||||
<div class="param-group">
|
||||
<label for="lacunarity">Lacunarity:</label>
|
||||
<input type="range" id="lacunarity" min="1" max="4" step="0.1" value="2.0">
|
||||
<span id="lacunarityValue">2.0</span>
|
||||
</div>
|
||||
<div class="param-group">
|
||||
<label for="elevation">Elevation Multiplier:</label>
|
||||
<input type="range" id="elevation" min="0.1" max="3" step="0.1" value="1.0">
|
||||
<span id="elevationValue">1.0</span>
|
||||
</div>
|
||||
<div class="param-group">
|
||||
<label for="waterLevel">Water Level:</label>
|
||||
<input type="range" id="waterLevel" min="0" max="1" step="0.05" value="0.3">
|
||||
<span id="waterLevelValue">0.3</span>
|
||||
</div>
|
||||
<div class="param-group">
|
||||
<label for="seed">Seed:</label>
|
||||
<input type="number" id="seed" value="42" min="0" max="999999">
|
||||
<button onclick="randomizeSeed()">Random</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-actions">
|
||||
<button onclick="applyParameters()">Apply Parameters</button>
|
||||
<button onclick="resetParameters()">Reset to Default</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-container">
|
||||
|
||||
107
web/script.js
107
web/script.js
@@ -215,4 +215,109 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('Not in all mode, using default');
|
||||
refreshImage();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function toggleParameters() {
|
||||
const panel = document.getElementById('parameterPanel');
|
||||
const btn = document.getElementById('paramsBtn');
|
||||
|
||||
if (panel.style.display === 'none') {
|
||||
panel.style.display = 'block';
|
||||
btn.textContent = 'Hide Parameters';
|
||||
loadCurrentParameters();
|
||||
} else {
|
||||
panel.style.display = 'none';
|
||||
btn.textContent = 'Show Parameters';
|
||||
}
|
||||
}
|
||||
|
||||
function loadCurrentParameters() {
|
||||
// This would ideally fetch current parameters from the server
|
||||
// For now, we'll just initialize the sliders with their current values
|
||||
setupSlider('scale', 'scaleValue', 4.0);
|
||||
setupSlider('octaves', 'octavesValue', 4);
|
||||
setupSlider('persistence', 'persistenceValue', 0.5);
|
||||
setupSlider('lacunarity', 'lacunarityValue', 2.0);
|
||||
setupSlider('elevation', 'elevationValue', 1.0);
|
||||
setupSlider('waterLevel', 'waterLevelValue', 0.3);
|
||||
}
|
||||
|
||||
function setupSlider(sliderId, valueId, defaultValue) {
|
||||
const slider = document.getElementById(sliderId);
|
||||
const value = document.getElementById(valueId);
|
||||
|
||||
slider.value = defaultValue;
|
||||
value.textContent = defaultValue;
|
||||
|
||||
slider.addEventListener('input', function() {
|
||||
value.textContent = this.value;
|
||||
});
|
||||
}
|
||||
|
||||
function applyParameters() {
|
||||
const params = {
|
||||
scale: parseFloat(document.getElementById('scale').value),
|
||||
octaves: parseInt(document.getElementById('octaves').value),
|
||||
persistence: parseFloat(document.getElementById('persistence').value),
|
||||
lacunarity: parseFloat(document.getElementById('lacunarity').value),
|
||||
elevation: parseFloat(document.getElementById('elevation').value),
|
||||
waterLevel: parseFloat(document.getElementById('waterLevel').value),
|
||||
seed: parseInt(document.getElementById('seed').value)
|
||||
};
|
||||
|
||||
console.log("Sending parameters:", params); // Debug log
|
||||
|
||||
fetch('/api/set-parameters', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(params)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log("Server response:", data); // Debug log
|
||||
if (data.status === 'success') {
|
||||
updateStatus('Parameters applied successfully');
|
||||
if (currentMode === 'terrain') {
|
||||
refreshTerrain();
|
||||
}
|
||||
} else {
|
||||
updateStatus('Error applying parameters', 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error applying parameters:', error);
|
||||
updateStatus('Error applying parameters', 'error');
|
||||
});
|
||||
}
|
||||
|
||||
function resetParameters() {
|
||||
document.getElementById('scale').value = 4.0;
|
||||
document.getElementById('scaleValue').textContent = '4.0';
|
||||
|
||||
document.getElementById('octaves').value = 4;
|
||||
document.getElementById('octavesValue').textContent = '4';
|
||||
|
||||
document.getElementById('persistence').value = 0.5;
|
||||
document.getElementById('persistenceValue').textContent = '0.5';
|
||||
|
||||
document.getElementById('lacunarity').value = 2.0;
|
||||
document.getElementById('lacunarityValue').textContent = '2.0';
|
||||
|
||||
document.getElementById('elevation').value = 1.0;
|
||||
document.getElementById('elevationValue').textContent = '1.0';
|
||||
|
||||
document.getElementById('waterLevel').value = 0.3;
|
||||
document.getElementById('waterLevelValue').textContent = '0.3';
|
||||
|
||||
document.getElementById('seed').value = 42;
|
||||
|
||||
updateStatus('Parameters reset to defaults');
|
||||
}
|
||||
|
||||
function randomizeSeed() {
|
||||
const newSeed = Math.floor(Math.random() * 1000000);
|
||||
document.getElementById('seed').value = newSeed;
|
||||
updateStatus('Random seed generated: ' + newSeed);
|
||||
}
|
||||
@@ -114,3 +114,59 @@ button.danger:hover {
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.parameter-panel {
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.param-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.param-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.param-group label {
|
||||
min-width: 150px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.param-group input[type="range"] {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.param-group input[type="number"] {
|
||||
width: 80px;
|
||||
padding: 5px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.param-group span {
|
||||
min-width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.param-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.param-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user