Section One of my application ( top section ) :)

In this section i had the ellipses of many sizes and shapes following the mouse within their section. After working on a few practice applications i discovered that this was too crowed for this area and decided to alter this section.

After a  few brainstorms i decided to produce a rectangle area within the section that one ellipse would follow the mouse in.

Starting simple i produced the rectangle area first, by using triangles. 

Here is my code bellow;

triangle(15, 5, 150, 5, 150, 135);

triangle(485, 5, 350, 5, 350, 135);

triangle (150, 135, 250, 240, 350, 135);

these triangles were then placed under my previous code concerning the rectangles, thus therefore are linked and also change colour depending on where the mouse is upon the Y axis.

The circles movement was quite tricky  utilizing atan and cos , and a few bouncing ball applications through open processing i eventually cracked it. As shown bellow...

  float angle = atan2(mouseY-circles.y, mouseX-circles.x);

  float circ = cos(angle) * speed + circles.x;

  float cle = sin(angle) * speed + circles.y;

  circles.set(circ, cle, 100);

  I then stated the colour of my ellipse and the size .

  fill(#73FF71);

  ellipse(circles.x, circles.y, 30, 30);

In order to restrict my ellipse inside my rectangle i utilized the if variable, as shown bellow.

Sample of my code;

if (circles.x > width-165){  // here im stating that if the mouseX is past the width of the screen -165 the ellipse wont move any futher( which is stated in the next line of the code (: )

  circles.x = 335;

  song5.loop(); // i then incorporated a beeping sound to play during the time the ellipse is not touching the side of the rectangle. (which is put on replay due to the loop)