The interactable programs filled with shapes and colors utilize javascript and processing.js to run.
In the art program, there is a little circle that is slowly changing colors. When the mouse goes near it, the ball runs away, revealing a little tail behind it.
To tell how close the mouse is to the circle, the program uses triginometry to determine the distance between the two, and then finds the angle to calculate the angle the circle should move at. First, the variables mouseDistanceX and mouseDistanceY are determined by subtracting mouseX - circleX and mouseY - circleY. Then, the distance is found using the pythagorean theorem and square rooting the square of mouseDistanceX added to the square of mouseDistanceY.
The angle is then found using the slope of the distance. This is done by dividing rise over run, or mouseDistanceY / mouseDistanceX. Then, that slope is turned into an angle using the arctangent of this slope with atan(slope).
Finally, by adding 180° to the angle and finding the sine and cosine, the direction the ball runs away at is determined. For x, the direction calculation is cos((angle + 180) * PI / 180). The speed the ball moves at is determined using an inverse exponent. The x movement is calculated with 300 / (mouseDistance + 1)
The next improvement I would want to add would be better pathfinding, especially around the borders of the program. Currently, the program uses if statements to detect if the ball is too close to the edge of the program. The program would be more interesting with more advanced pathfinding where the ball could dodge the mouse and spin around it.