[Solved] JavaScript Animation will not perform as intended

Question

Is this Processing.js or P5.js? Either way, please try to provide an MCVE that we can run. Where’s your setup() function?

Stack Overflow isn’t really designed for general “I have no idea why these 100 lines of code don’t work” type questions. It’s designed for specific “I thought this line of code did ABC, but instead it did XYZ” type questions.

To help with that, you need to get into the habit of working in smaller chunks. It looks like you’ve tried to program this entire animation at one time, which is just going to get you into situations like this, where it’s not working and you have no idea why. Instead, work on one small piece at a time: can you get a single line moving across the screen? Get that working perfectly, then add another line that moves with that first line. Then you can post a more specific question. Recommended reading: How to Program

That being said, the next thing you need to do is debug your program. I’d start by adding console.log() statements inside every single if statement.

That will tell you that your code always enters the if(ham1X <= 215){ statement, and inside that you’re setting all of the variables. That’s why you aren’t seeing anything move, because you’re setting those variables every frame.

Now, why your code does that is something you’re going to have to answer. Again, I’d start with a smaller program that just does one thing. Get that working, and then come back here with a more specific question if you get stuck. Good luck.

Accepted Answer

Is this Processing.js or P5.js? Either way, please try to provide an MCVE that we can run. Where’s your setup() function?

Stack Overflow isn’t really designed for general “I have no idea why these 100 lines of code don’t work” type questions. It’s designed for specific “I thought this line of code did ABC, but instead it did XYZ” type questions.

To help with that, you need to get into the habit of working in smaller chunks. It looks like you’ve tried to program this entire animation at one time, which is just going to get you into situations like this, where it’s not working and you have no idea why. Instead, work on one small piece at a time: can you get a single line moving across the screen? Get that working perfectly, then add another line that moves with that first line. Then you can post a more specific question. Recommended reading: How to Program

That being said, the next thing you need to do is debug your program. I’d start by adding console.log() statements inside every single if statement.

That will tell you that your code always enters the if(ham1X <= 215){ statement, and inside that you’re setting all of the variables. That’s why you aren’t seeing anything move, because you’re setting those variables every frame.

Now, why your code does that is something you’re going to have to answer. Again, I’d start with a smaller program that just does one thing. Get that working, and then come back here with a more specific question if you get stuck. Good luck.