Draw circle with a line by only changing y2 coordonate ?

Programming Questions

legend_ki..

Draw circle with a line by only changing y2 coordonate ?

in Programming Questions • 10 months ago

First I want to tell you that i'm french... so it's a little bit difficult to express myself...

I will explain my projet in details... I'm in my last class before my studies in france, in my school there is a special class with programming speciality.

My project is to build a robot and control it with arduino. The robot will be build with two independant motors and only 2 wheels. My goal is to control each motor independantly. Then when the left one move forward, and the second don't move the trajectory of the first motor will be a circle. My professor asked me to "draw" it on processing so i began to draw only a line with respectives coordonates (x1,y1 (first point coordonates) ,x2,y2 (second point coordonates).

x1 and y1 dont change but what i want is that when i press a key, 'b' for example y2 decrease.

But i don't know how to make x2,y2 draw an arc circle...
Then i request your knowledges....

Thank You very much.. i post my code to help you to know what i mean...
sorry for my english..

int x1 = 10;
int y1 = 10;
int x2 = 100;
int y2 = 10;

void setup(){

size(600, 500);

}

void draw(){
background(255,255,255);

line(x1, y1, x2, y2);

}

void keyPressed (){

if (key=='b'){ y2++;}

if (key=='h'){ y2--;}

}

Replies(6)

asimes

Re: Draw circle with a line by only changing y2 coordonate ?

10 months ago

The problem with the sketch above is that x2 and y2 are not actually rotating around x1 and y1. If you keep pressing 'b' or 'h' the line will get longer so the length becomes inconsistent. What you want to do is have x2 and y2 rotate around x1 and y1, if you are not familiar with how to do this, check out this tutorial: http://processing.org/learning/trig/

float length, theta, x1, y1, x2, y2;
void setup() {
size(600, 500);
length = 100;
// Just centering the line so it doesn't go off the screen
x1 = width/2-length/2;
y1 = height/2;
x2 = width/2+length/2;
y2 = height/2;
// This controls the rotation
theta = 0;
}
void draw() {
background(255, 255, 255);
line(x1, y1, x2, y2);
}
void keyPressed () {
/* If you use y2++ and y2-- the length will change
What you want to do is have x2 and y2 rotate */
if (key=='b') {
theta += TWO_PI/360;
x2 = x1+cos(theta)*length;
y2 = y1+sin(theta)*length;
}
if (key=='h') {
theta -= TWO_PI/360;
x2 = x1+cos(theta)*length;
y2 = y1+sin(theta)*length;
}
}

legend_ki..

Re: Draw circle with a line by only changing y2 coordonate ?

10 months ago

Thank you very much it works !
but i've some other questions... i don't really how the rotation works.... what is theta ? is it an angle ? why theta and theta 2?
And i don't inderstant the last part :

theta -= TWO_PI/360;
x2 = x1+cos(theta)*length;
y2 = y1+sin(theta)*length;

sorry for all theses questions but i'm not at ease with trigonometry but i've some knowledges on this... i just don't understand how you manage to get this result ?

thank you again for your answer

asimes

Re: Draw circle with a line by only changing y2 coordonate ?

10 months ago

I edited the post above to remove theta2, I thought it would just be confusing. Theta is a name I gave the variable, name it whatever you like, I just tend to call my rotation variables theta.

When you press 'b' or 'h' theta either increases or decreases by TWO_PI/360

The tutorial I posted above explains where the TWO_PI comes from. In the Polar Coordinate system, TWO_PI means 360 degrees basically. The choice of dividing by 360 was arbitrary, you can divide by whatever amount. This might be helpful to stick in your draw function to see what theta is doing:

println(degrees(theta));

legend_ki..

Re: Draw circle with a line by only changing y2 coordonate ?

10 months ago

Thank you for your answer, i have understand how you get this result !

but now, i want to reach the next step of my project...
First i post the code and then i'll explain....

    float longueur = 60; // taille des segements (triangle équilatéral)
    float theta = 0;    //angle de départ !
    float x1; //coordonées X(x1,y1)
    float y1;
    float x2; //coordonées Y(x2,y2)
    float y2;
    float x3 = 300; //coordonées Z(x3,y3)
    float y3 = 200 ;

    void setup() {
      size(600, 500);

   // permet juste de centrer : center the robot
      x1 = width/2-longueur/2;
      y1 = height/2;
      x2 = width/2+longueur/2;
      y2 = height/2;

      }



void draw() {
      background(255, 255, 255);

//1er segment raccorde les deux roues ! link between wheels
      line(x1, y1, x2, y2);

      fill(0,255,0);

//dessin des deux roues : wheels drawing
      ellipse(x1,y1, 20, 20);
      ellipse(x2,y2,20,20);

      fill(255,0,0);

//pointe tête du robot : robot head
      ellipse(x3,y3,10,10);

//ligne 1ère roue a tête : 1st wheel to head
      line(x1,y1,x3,y3);
//ligne 2nd roue a tête : 2nd wheel to head
      line(x2,y2,x3,y3);
    }

    void keyPressed () {

      /* theta ?
     le moins devant le = permet de definir le sens de rotation - --> sens inverse aiguilles d'une montre
     = TWO_PI/360 permet de definir la vitesse de rotation autour d'un point
     */

      if (key=='z') { y1--; y2--; y3--;}
      if (key=='w') {y1++;y2++; y3++;}

      if (key=='q') {
        theta = theta + (TWO_PI/360);
        x2 = x1+cos(theta)*longueur;   y2 = y1+sin(theta)*longueur;

       // x3 = x1+cos(theta)*longueur;   y3 = y1+sin(theta)*longueur;


    }
      if (key=='s') {
        theta = theta - (TWO_PI/360);
        x1 = x2-cos(theta)*longueur;   y1 = y2+sin(theta)*longueur;

       // x3 = x2-cos(theta)*longueur;   y3 = y2+sin(theta)*longueur;

}
}

I would like to draw a king of triangle, with lines (i think it is easier no ?)
Green ellipses represent the wheels, and the red dot, the "head" of the robot to indicate the direction of it.
But i don't manage to draw the right trajectory and keep the leght of the borders of the triangle (they are all equals) when i turn left or right...

Next question, when i turn left it's all right but when ,just after that, i turn right the wheel the coordinates change i don't understand why...

can you help me ?

asimes

Re: Draw circle with a line by only changing y2 coordonate ?

10 months ago

I'm thinking of your robot as basically three points:

- P1 = (x1, y1)

- P2 = (x2, y2)

- P3 = (x3, y3)

In order to avoid an annoying visual "jump" that would occur from the first rotation to P3, I just set it in setup() using the first rotation function. I left the x = 300 and y = 200 lines so you can see this problem (make thetaStep smaller for it to be noticeable). The reason the jump happens is because an equilateral triangle would not actually be at exactly y = 200.

You wrote:

if (key=='z') { y1--; y2--; y3--;}

if (key=='w') {y1++; y2++; y3++;}

Which makes me wonder if you understand why this works. This is the same problem as the first time you posted, it is not a rotation. I would strongly recommend that you practice doing a simple rotation sketch and post it for feedback on rotation. A good idea would be to make an ellipse() rotate around another ellipse() continuously (without pushing buttons, just keep adding to theta every frame).

float longueur = 60; // taille des segements (triangle équilatéral)
float theta = 0; // Angle de départ !
float thetaStep = TWO_PI/100; // The amount theta changes
//coordonées P1 = (x1,y1)
float x1, y1;
//coordonées P2 = (x2,y2)
float x2, y2;
//coordonées P3 = (x3,y3)
float x3, y3 = 200;
void setup() {
size(600, 500);
// permet juste de centrer : center the robot
x1 = width/2-longueur/2;
y1 = height/2;
// Set Points 2 and 3
setP2AndP3();
// I left this here so you can uncomment it to see the visual "jump"
//x3 = 300;
//y3 = 200;
}
void draw() {
background(255, 255, 255);
//1er segment raccorde les deux roues ! link between wheels
line(x1, y1, x2, y2);
fill(0, 255, 0);
//dessin des deux roues : wheels drawing
ellipse(x1, y1, 20, 20);
ellipse(x2, y2, 20, 20);
fill(255, 0, 0);
//pointe tête du robot : robot head
ellipse(x3, y3, 10, 10);
//ligne 1ère roue a tête : 1st wheel to head
line(x1, y1, x3, y3);
//ligne 2nd roue a tête : 2nd wheel to head
line(x2, y2, x3, y3);
}
void keyPressed () {
/* theta ?
le moins devant le = permet de definir le sens de rotation - --> sens inverse aiguilles d'une montre
= TWO_PI/360 permet de definir la vitesse de rotation autour d'un point
*/
if (key=='z') {
theta += thetaStep;
setP1AndP3();
}
if (key=='w') {
theta -= thetaStep;
setP1AndP3();
}
if (key=='q') {
theta += thetaStep;
setP2AndP3();
}
if (key=='s') {
theta -= thetaStep;
setP2AndP3();
}
}
void setP1AndP3() {
// Point 2
x1 = x2-cos(theta)*longueur;
y1 = y2-sin(theta)*longueur;
// Point 3
x3 = x1+cos(theta-TWO_PI/6)*longueur;
y3 = y1+sin(theta-TWO_PI/6)*longueur;
}
void setP2AndP3() {
// Point 2
x2 = x1+cos(theta)*longueur;
y2 = y1+sin(theta)*longueur;
// Point 3
x3 = x1+cos(theta-TWO_PI/6)*longueur;
y3 = y1+sin(theta-TWO_PI/6)*longueur;
}

legend_ki..

Re: Draw circle with a line by only changing y2 coordonate ?

9 months ago

hi !
i carried on my project, and i had a new idea... :
draw 3 rectangles --> like a tri cycle ?

2 down which shows the two wheels moved by a motor. they become red when they move forward (press z), and green when they move back (press s) (azerty)
and only one above (in reality it's the directive wheel). when i press a key (d) it's turn right but i don't manage to make it go left...

boolean[] touches=new boolean[128];
float a = 100;
int a1 = 0;
int x= 255;
int y= 255;
int z= 255;

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

void draw(){

background(0);

fill(x,y,z);
rect(150,280,20,40);
rect(250,280,20,40);
fill(255);
text(" z avancer : "+verifieClavier('z')+"\n d droite : "+verifieClavier('d')+"\n q gauche : "+verifieClavier('q')+"\n s arrière : "+verifieClavier('s'), 10, 10);
if (a >=130) { a=130;}

translate(200,200);

float theta = PI*a / width;
rectMode(CENTER);
rotate(theta);
rect(0,0,20,40);

if (verifieClavier('d') == true) {a= a+5;}
if (verifieClavier('d') == false) {a=0;}

if(verifieClavier('z') == true && verifieClavier('s') ==false) {x=255; y=0; z=0;}
if(verifieClavier('z') == false){x=255;y=255;z=255;}
if(verifieClavier('s') == true && verifieClavier('z') == false) {y=255; x=0; z=0;}

}

void keyPressed(){
touches[keyCode]=true;
}

void keyReleased(){
touches[keyCode]=false;
}

boolean verifieClavier(char c){
int cc = int(c);
if(cc>96 && cc<123)cc-=32;
return touches[cc];
}

boolean verifieClavier(int c){
return touches[c];
}

can u help me ? please :)