Ripple Effect
Ripple Effect was created based on a memory of a game I used to play as a child. It was developed as a solo project with the goal of creating something fun and relaxing for players.
Ripple Effects uses math-heavy programming in order to calculate the rotation angle of each circle on screen every time it hits the screen's edge. Figuring out the correct formula to use was the most challenging part of development. Here I will detail my process for how I figured out the formula used.
Step One: Rotation Examples
My process began with drawing out example angles and reverse-engineering the needed math. This would look like starting with an incoming angle of 20 degrees, and knowing we would want the circle to bounce off the ceiling with an outgoing angle of 160 degrees. I followed this process for multiple angles hitting each of the four walls.
Step Two: The Unit Circle
Ripple Effect's circle movement is set up in a way that a circle with a Y rotation of 0 will be moving up toward the ceiling, but on the Unit Circle a 0-degree angle will be pointing to the right, so Ripple Effect's rotation formula follows an adaptation of the Unit Circle where every value is rotated 90 degrees counterclockwise. This slight adaptation allowed me to calculate a circle's outgoing rotation angle in a relatively simple way using a maximum of only two steps.
Step Three: The Formula
Looking at the examples drawn up during step one with the Unit Circle lead directly to creating the formula used for the circle rotation. The below screenshot shows the code used to constantly move each circle (line 52), keep circles on the screen (lines 73-76), and call the function used for rotation (lines 55-70).
The code below is the full formula used for all circle rotation in Ripple Effect. When a circle hits any wall, it receives a call to the "HitEdge" function which calculates a new angle, then "RotateCircle" applies the rotation to the circle. A circle that hits either the ceiling or floor of the screen will follow only the first step of the whole formula. This process is a simple vertical reflection of the incoming angle "movementDirection", and subtracts it from 180. For example, the incoming angle of 20 will follow the equation 180 - 20 to give the "newMovementAngle" of 160 (line 125). It is when a circle hits either the left or right edge of the screen that this formula reaches its second step, and the incoming rotation angle is flipped vertically (step one), then horizontally (line 119). This process results in each circle bouncing off any of the four walls with the proper outgoing rotation angle.
