Processing: Development Part 2

Let the Movement Begin

By learning about the Class construct I have been able to establish blueprints to help build the movement for the circles. The classes instance is called Circle. It will be used to describe the state of behaviour that the objects of the class all share. I have also studied trigonometry and the use of movement using xpos, ypos, speed and distance. These will all be used within a float to then be updated with the circles. Also what is added is angulo which forms as the angle using a random equation of PI times 2 divided by 2, times by two. This will be combined later in the update with raio which will class as the radius of the circle. In the same Class, the speed and diameter is declared through the float as s and d.



Void update is the most important as it constantly changes the angle and movement of the moving circles (ellipses) in the sketch. angluo is more or equal to radians which is speed determined by the speed. raio is subtracted by any number (100 is used for radius here) and is then multiplied by 0.025.

xpos is then calculated through cos which is a trigonomic function (acts as adjacent divided by hypotenuse) which will be equal to angulo which is multiplied by raio and then added by xpos' width divided by 2. (Confusing...)

ypos is calculated through sin which is yet another trigonomic function (acts as opposite divided by hypotenuse) which will be angulo which is multiplied by raio byt added with ypos' height divided by 2. (Confusing again...)

After many days of confusion and almost utter breakdown I managed to produce this pretty cool sketch I needed badly!


The image above displays the movement of each ellipse as they go along the path. They move correctly and in the areas that I wanted. The ellipses move around at various speeds (5 different settings) due to the use of the random number in the For Loop void setup. So this is highly useful for representing the idea of visualising data by creating an animative effect. All I need to do now is add the Xml feed to change the colour of the circles whenever there is a change in data.

I can increase and decrease the circles distance from the center from the 'raio = raio + (100 - raio)*0.025;' by changing the '100' it can produce some interesting displays.