I am using javascript and have a map generation class called generate.js,which whenever I link as a script to any HTML file I get the error Uncaught (in promise) ReferenceError: scl is not defined. From what I can see scl is defined normally, this is especially a problem because I need generate.js for a crucial feature in my website, if you can find what is causing scl to become undefined or how to solve it, I would appreciate it.
Below is the code for generate.js, map_display.html from which the values are defined, and load.html which includes the feature I was talking about(a JSON loader)
let cols, rows;
let terrain = [];
let generating = false;
function setup() {
createCanvas(width, height);
background(200);
noiseDetail(10,0.5);
cols = width / scl;
rows = height / scl;
noiseSeed(seed);
for (let x = 0; x < cols; x++) {
terrain[x] = [];
for (let y = 0; y < rows; y++) {
terrain[x][y] = 0;
}
}
}
function generateTerrain() {
let yoff = 0;
for (let y = 0; y < rows; y++) {
let xoff = 0;
for (let x = 0; x < cols; x++) {
let noiseValue = noise(xoff / zoomFactor,yoff / zoomFactor);
terrain[x][y] = noiseValue;
xoff += noiseScale;
}
yoff += noiseScale;
}
}
function draw() {
if (generating) {
generateTerrain();
loadPixels();
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
let val = terrain[x][y];
let colorVal = getColor(val);
fill(colorVal);
noStroke();
rect(x * scl, y * scl, scl, scl);
}
}
noLoop();
generating = false;
}
}
function getColor(val) {
let c1, c2;
if (val < 0.35) {
c1 = color(0, 0, 255);
c2 = color(0, 0, 180);
val = map(val, 0, 0.3, 0, 1);
} else if (val < 0.45) {
c1 = color(244, 164, 96);
c2 = color(255, 204, 153);
val = map(val, 0.3, 0.4, 0, 1);
} else if (val < 0.7) {
c1 = color(34, 139, 34);
c2 = color(0, 100, 0);
val = map(val, 0.4, 0.7, 0, 1);
} else {
c1 = color(139, 69, 19);
c2 = color(205, 133, 63);
val = map(val, 0.7, 1, 0, 1);
}
return lerpColor(c1, c2, val);
}
function generateMap() {
let width = parseInt(document.getElementById('width').value);
let height = parseInt(document.getElementById('height').value);
let scl = parseInt(document.getElementById('scl').value);
let noiseScale = parseFloat(document.getElementById('noiseScale').value);
let zoomFactor = parseFloat(document.getElementById('zoomFactor').value);
let seed = parseInt(document.getElementById('seed').value);
if(!seed){
seed = Math.floor(Math.random()*10000);
}
let url = `map_display?width=${width}&height=${height}&scl=${scl}&noiseScale=${noiseScale}&zoomFactor=${zoomFactor}&seed=${seed}`;
window.location.href = url;
}
<!DOCTYPE html>
<html>
<head>
<title>Perlin Noise Terrain</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Fuming's Generator</h1>
<nav class="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/map">Perlin Map Generator</a></li>
<li><a href="/load">Load Downloaded Map</a></li>
<li><a href="/about">About</a></li>
<li><a href="/map">Map list</a></li>
</ul>
</nav>
<script>
const searchParams = new URLSearchParams(window.location.search);
let width = parseInt(searchParams.get('width'));
let height = parseInt(searchParams.get('height'));
let scl = parseInt(searchParams.get('scl'));
let noiseScale = parseFloat(searchParams.get('noiseScale'));
let zoomFactor = parseFloat(searchParams.get('zoomFactor'));
let seed = parseInt(searchParams.get('seed'));
</script>
<script src="/generate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
<script>
generating = true;
</script>
<div class="content">
<button onclick="saveSettings(width,height,scl,noiseScale,zoomFactor,seed)">Save Settings</button>
</div>
<script src="/save.js"></script>
</body>
</html>
body{
margin:0;
padding:0;
}
h1{
text-align:center;
color:white;
background-color:black;
width:100%;
padding:20px;
box-sizing:border-box;
margin:0;
position:fixed;
top:0;
left:0;
height:70px;
z-index: 1000;
}
.content{
margin-left: 220px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.content h2{
text-align: center;
font-size: 30px;
margin-bottom: 20px;
color: #333;
}
.navbar{
width: 200px;
height: calc(100vh-70px);
background-color: lightgray;
position: fixed;
top: 70px;
left: 0;
bottom:0;
padding: 0;
margin: 0;
overflow-y:auto;
z-index: 999;
}
.navbar ul{
list-style-type:none;
background-color:lightgray;
padding: 0px;
margin: 0px;
}
.navbar a{
display:block;
padding:10px;
width:100%;
padding:10px;
box-sizing:border-box;
text-decoration:none;
}
.navbar a:hover{
background-color:#b5b5b5;
}
.content {
margin-left: 220px;
padding: 20px;
margin-top:60px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Load Map Settings</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Load Map Settings</h1>
<nav class="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/map">Perlin Map Generator</a></li>
<li><a href="/load">Load Downloaded Map</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<div class="content">
<input type="file" id="load-json" accept=".json">
<p>Choose a JSON file with the saved map settings to load and generate the map.</p>
</div>
<script>
document.getElementById('load-json').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const jsonData = JSON.parse(e.target.result);
width = jsonData.width;
height = jsonData.height;
scl = jsonData.scl;
noiseScale = jsonData.noiseScale;
zoomFactor = jsonData.zoomFactor;
seed = jsonData.seed;
console.log(width,height,scl,noiseScale,zoomFactor,seed);
};
reader.readAsText(file);
}
});
generating = true;
</script>
<script src="generate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</body>
</html>