This code works perfectly. But if I uncomment the switch statement, it fails completely. The switch statement seems to be correct. Any help will be greatly appreciated.
function draw(n) {
let canvas = document.querySelector('#my-canvas');
let context = canvas.getContext('2d');
context.fillStyle = 'black'
let contourInterval = 1500
let contourWidth = 500
let fsize = 1000
let x0 = fsize / 2
let y0 = fsize / 2
for (j = 0, y = -y0; j < fsize; j++, y++) {
for (i = 0, x = -x0; i < fsize; i++, x++) {
/*
switch(n) {
case 0:
let fun = (x*x + y*y)
break;
case 1:
let fun = (x*x - y*y)
break;
case 2:
let fun = 1.0/(x*x + y*y)
break;
default:
let fun = (x*x + y*y)
}
*/
let fun = (x * x + y * y)
if (Math.abs(fun % contourInterval) < contourWidth) {
context.fillRect(x + x0 / 2, y + y0 / 2, 1, 1)
}
}
}
}
draw(1)<canvas id="my-canvas" width="500" height="500"></canvas>The problem is that you're declaring the fun variable inside the switch statement and then trying to use it outside later.
Try updating your code to the following:
function draw(n) {
let canvas = document.querySelector('#my-canvas');
let context = canvas.getContext('2d');
context.fillStyle = 'black'
let contourInterval = 1500
let contourWidth = 500
let fsize = 1000
let x0 = fsize / 2
let y0 = fsize / 2
for (j = 0, y = -y0; j < fsize; j++, y++) {
for (i = 0, x = -x0; i < fsize; i++, x++) {
let fun = 0 // declare this here outside the scope of the switch statement
switch(n) {
case 0:
// remember to get rid of the `let` keywords in your `case` statments
fun = (x*x + y*y)
break;
case 1:
fun = (x*x - y*y)
break;
case 2:
fun = 1.0/(x*x + y*y)
break;
default:
fun = (x*x + y*y)
}
// now `fun` can be used here without scope problems
if (Math.abs(fun % contourInterval) < contourWidth) {
context.fillRect(x + x0 / 2, y + y0 / 2, 1, 1)
}
}
}
}
draw(1)<canvas id="my-canvas" width="500" height="500"></canvas>This way you declare the variable in the outer scope and use the switch statement to set it. Now it can be used in the outer scope.
Declare fun first
function draw(n) {
let canvas = document.querySelector('#my-canvas');
let context = canvas.getContext('2d');
context.fillStyle = 'black'
let contourInterval = 1500
let contourWidth = 500
let fsize = 1000
let x0 = fsize / 2
let y0 = fsize / 2
for (j = 0, y = -y0; j < fsize; j++, y++) {
for (i = 0, x = -x0; i < fsize; i++, x++) {
let fun = 0
switch(n) {
case 0:
fun = (x*x + y*y)
break;
case 1:
fun = (x*x - y*y)
break;
case 2:
fun = 1.0/(x*x + y*y)
break;
default:
fun = (x*x + y*y)
}
if (Math.abs(fun % contourInterval) < contourWidth) {
context.fillRect(x + x0 / 2, y + y0 / 2, 1, 1)
}
}
}
}
draw(1)<canvas id="my-canvas" width="500" height="500"></canvas>