Screen Saver math - TurboWarp


Hello! I have been attempting projects in TurboWarp recently, hoping to make one project daily. I am now attempting that again.

This time I decided to make a screen saver, a simple one like the ones in winXP. It turned out to be a 2 day project because, there is a surprising amount of math in it!

I actually had to do written brainstorming for this one, for which I just turned the backdrop into a whiteboard. You can actually find my scribbles there in the source file :P

I started with thinking how to randomize locations and what I want the sprite to do.
I want the sprite to go all the way to the edges of the screen, hit them, and come back, to go towards a random position.

Well, starting with randomization, I decided to get randomized locations outside of the screen, so the sprite goes towards them and is intercepted at the edge somehow. This way the sprite will not randomly change direction without hitting the edge.

For this I had to know where the edge is, which I found an estimate of by trial and error of trying values in the go-to block.
Now this should have been obvious but this is where I found out the screen in scratch is not a square.

I set my estimate of the dimensions of screen in 2 variables. (It seems arrays would have been helpful here). I found that the dimensions have origin at center of screen, which is quite fun for me as I can flip anything around by multiplying it with -1. This is why I needed only 2 variables, wherever I needed the lower or left edge, I could multiply the max variable with -1. I then set some max values greater than these edges for randomization. 

For max values again I only used 2 variables for same reason. I can now just set it to randomize between xmax and negative xmax, and same for y axis as here:


Since I needed to do further checks on these values and make sure they are outside the border, I decided to make it a function to get destination, by making a custom block.

which I can just call as needed:

Now I just need to keep generating a destination until it is outside the border. For this there is some tricky math:

lets consider cases for when is a point outside the border:

  • point is above border box: its Y is greater than border max Y
  • point is below border box: its Y is less than border min Y
  • point is to right of border box: its X is greater than border max X
  • point is to left of border box: its X is less than border min X

Only one of these 4 cases needs to be true  for the point to be outside the border.
And, some of these cases are related to each other.  Remember I only needed to store the positive side of values because the opposite was negative side.. Same way the two cases of above and below box are related to each other, and two cases of right and left of border are related to each other.

min Y is negative of max Y here, but they have same "value"(magnitude) if we don't consider negative sign. for the point, its magnitude needs to be greater than max Y, but its magnitude also needs to be greater than min Y for below! Because for negatives to be less than negatives, like -4 < -3 , you can see that its magnitude needs to be greater for it to be less. (another way to think of this is mapping the numbers on the number line. the magnitude is how far away the number is from zero, and when on same side, a number needs to have greater magnitude to be further away. this number line is for each of the axes). this means in both cases we can check only the magnitude without having to hassle with the minus sign. so I used abs function to get rid of it:

This operator basically checks for all 4 of the cases.

Now this is where things get interesting.

While brainstorming I identified some cases which I wouldn't want happening and how to avoid them. These were things like the sprite sliding across one edge, or staying within one small area for a long while, or otherwise not looking very fluid. For this I realized I want the sprite to target the opposite triangle to where it is when it hits an edge. Now again, opposite here means of opposite sign. So if the sprite is at left border, it has negative X and needs to target positive X, and similar for Y.

Files

screen-saver.html Play in browser
Jul 13, 2024
screen-saver.sb3 133 kB
Jul 13, 2024

Get Screen Saver

Leave a comment

Log in with itch.io to leave a comment.