Question

I have many different elements floating around a page at different speeds. When an element leaves the right hand side of the page, it should start to float in the left hand side. This is easy, if the element.x is bigger than canvas.width, element.x = -100. This sets it a little further out so it doesn’t look jumpy. But now here is the problem, how do I do it if the element leaves the left hand side of the page? We cant say if element.x < canvas.width because some elements will naturally be on the outside of the canvas floating back in.

Thanks for your help

Answer 1

There are a few ways to go about this.

One is to only “move” the element to the other side if it is completely offscreen (if there is zero intersection). Then moving it means that you always intersect the screen by only one pixel.

Another is to check “where it was coming from” by keeping track of its last location or knowing its trajectory (you probably know this if you’re animating). If it is coming from the left and going to the right and you’re on the right side, its leaving the screen and you have to move it. But if its coming from the left and going to the right and you’re on the left side of the screen, you know its entering and its OK.