I have a p5.js animation here that is meant to animate the artwork then reverse the animation, however while it works for my other artworks, the logic doesn't work here as the if statement doesn't get triggered due to the subtraction for my mask only occurs once. Right now only have of the animation works, you can view it here: https://editor.p5js.org/theruantan/sketches/8g583LF8j
The main issue begins at line 116 and it is at line 124 where the code is unable to reach this if statement.
//Start of reversal for masks
for (let i = beachSwitches.length - 1; i >= 0; i--) {
if (beachSwitches[i] == 0) {
if (beachMasks[i] > 0) {
beachMasks[i] -= 20;
animating = true;
//console.log("beachMasks");
console.log(beachMasks[i])
}
if (beachMasks[i] <= 300) {
// Begin reversing the next bar
beachSwitches[i - 1] = 0;
// To see if the code is able to reach here.
console.log(beachSwitches[i - 1] + "This is triggered");
}
}
}
beachMarks[i] should be able to be <= 300 but it's stuck at 780.
I have recently started working with p5.js but just based on reading the code and understanding what you are trying to do what I can see is in the line you mentioned i.e 116 , if you log inside and outside you will understand why its only running once.
Inside the 116 lines for loop, you are checking for beachSwitches[i]==0, which only happens once(at the last index of that array) because the beachSwitches gets modified above, also you haven't defined anything in the else part for this condition. Which is what is beachSwtiches[i] == 0 is NOT TRUE.
In my screenshot below, you might get a rough idea. Hope this helps in some manner! Cheers!
Screenshot of logs I took from line 116 to 124
