# Developers Planet

Luca Tavecchio February 2016

### (MATH ISSUE) Creating a SPIRAL out of points: How do I change "relative" position to absolute position

Recently I had the idea to make a pendulum out of points using Processing, and with a little learning I solved it easily:

``````int contador = 0;
int curvatura = 2;
float pendulo;

void setup(){
size(300,300);
}

void draw(){
background(100);
pendulo = sin(radians(contador))*curvatura;  //"PENDULO" EQUALS THE SIN OF CONTADOR, SO IT GOES FROM 1 TO -1 REPEATEDLY, THEN IS MULTIPLIED TO EMPHASIZE OR REDUCE THE CURVATURE OF THE LINE.
tallo(width/2,height/3);
println(pendulo);
}

void tallo (int x, int y){ //THE FUNTION TO DRAW THE DOTTED LINE
pushMatrix();

translate(x,y);

float _y = 0.0;

for(int i = 0; i < 25; i++){ //CREATES THE POINTS SEQUENCE.

ellipse(0,0,5,5);

_y+=5;

rotate(radians(pendulo)); //ROTATE THEM ON EACH ITERATION, THIS MAKES THE SPIRAL.
}

popMatrix();
}
``````

So, in a brief, what I did was a function that changed every point position with the rotate fuction, and then I just had to draw the ellipses in the origin coordinates as that is the real thing that changes position and creates the pendulum ilussion.

[capture example, I just need 2 more points if you are so gentile :)]

[capture example]

[capture example]

Everything was OK that far. The problem appeared when I tried to replace the ellipses for a path made of vertices. The problem is obvious: the path is never (visually) made because all vertices would be 0,0 as they move along with the zero coordinates.

So, in order to make the path possible, I need the absolute values for each vertex; and there's the question: How do I get them?

What I know I have to do is to remove the transform functions, create the variables for the X and Y position and update them inside the for, but then what? That's why I cleared this is a maths issue, which operation I have to add in the X and Y variables

Henri Augusto February 2016

You could use simple trigonometry. You know the angle and the hypotenuse, so you use cos to get the relative x position, and sin to the y. The position would be relative to the central point.

But before i explain in detail and draw some explanations, let me propose another solution: PVectors

``````void setup() {
size(400,400);
frameRate(60);
center = new PVector(width/2, height/3); //defined here because width and height only are set after size()
}

void draw() {
background(255);
fill(0);
stroke(0);
angle = arc_magn*sin( (float) frameCount/60 );
draw_pendulum( center );

}

PVector center;
float angle = 0;
float arc_magn = HALF_PI;
float wire_length = 150;
float rotation_angle = PI/20 /60 ; //we divide it by 60 so the first part is the rotation in one second

void draw_pendulum(PVector origin){

PVector temp_vect = PVector.fromAngle( angle + HALF_PI);
temp_vect.setMag(wire_length);
PVector final_pos = new PVector(origin.x+temp_vect.x, origin.y+temp_vect.y );
ellipse( final_pos.x, final_pos.y, 40, 40);
line(origin.x, origin.y, final_pos.x, final_pos.y);

}
``````

You use PVector class static method fromAngle( float angle ) that returns a unity vector of the given angle, then use .setMag() to define it's length. Those PVector methods will take care of the trigonometry for you.

If you still want to know the math behind it, i can make another example.