Circular motion.......

[sachin upatil]

HI,

i want to animate a circle in circular motion. circle will rotate in circular motion at fixed point.

How should i do this?

[Darryl Burke]

http://download.oracle.com/docs/cd/E17409_01/javase/tutorial/2d/index.html
http://download.oracle.com/docs/cd/E17409_01/javase/tutorial/uiswing/painting/index.html

And if that doesn't help, go through http://catb.org/~esr/faqs/smart-questions.html

[Michael Dunn]

> i want to...

so, what can't you do?

[Petar Thomas]

How fast?

You need mathemathics, trigonometry, geometry...

[sachin upatil]

Now i able to rotate a line(radius) within circle using sin and cos formula.
But unable to rotate a circle in circular motion.
what should i try for this circular motion?

[Petar Thomas]

I don't really have enough knowledge for this now... but,
I will, then, today, learn 2d,
and You can post Your code, if You can...

Then, maybe someone will help You,
or I will jump in.(probably)

[sachin upatil]

Here is my code. Fa and Fb is rotating inside circle.

Now i want to rotate circle in circular motion at fixed point.
How i will get this?
Give direction.

   
import java.util.*;
import java.awt.*;
import java.applet.*;
import javax.swing.*;
import java.net.*;
import java.awt.event.*;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Line2D;
import java.awt.color.ColorSpace;
import java.lang.Math;


public class CircularMotion extends Applet implements ActionListener{
	
	int angle;
	
	Shape circleR;
	Thread frequency = null;
	
	

public void init(){
	
}//end of init

public void paint(Graphics g){
	
	Graphics2D ga = (Graphics2D)g;
	
	int c = (100+(200/2));
	double degrees = angle * Math.PI*2 / 360.0;     //convert degree into radians
	
	circleR = new Ellipse2D.Float(400, 100, 200, 200);
	 
	//find X and Y on the circle
	int X = (int)(500 + (100) * java.lang.Math.cos(-degrees));
	int Y = (int)(200 + (100) * java.lang.Math.sin(-degrees));
	
	int X1 = (int)(500 + (100) * java.lang.Math.cos(degrees));
	int Y1 = (int)(200 + (100) * java.lang.Math.sin(degrees));
	
	//create a line 
	Shape Fa = new Line2D.Float(500,200,X,Y);
	Shape Fb = new Line2D.Float(500,200,X1,Y1);	
	
	//draw shape
	ga.draw(circleR);
	ga.draw(Fa);
	ga.draw(Fb);
	
}//end of paint 

/*
public void update(Graphics g) {
	System.out.println("Paint");
    paint(g);
}*/

public void start() {
	System.out.println("Inside run method");
    if(frequency== null) {
      //radar= new Thread(this, "DemoRadar");
    	frequency= new Thread(new Runnable() {
        public void run() {
          while(true) {
            try{
            	
	             if (angle > 360) {
	            	 angle = 0;
	             }else{
	            	 angle+=1;
	             }
	             Thread.sleep(100);
	             repaint();
            }//end of try
            catch(InterruptedException e){}
          }//end of while
        } //end run
      }); // end class
     frequency.start();
    }//end of if 
}//end of start 

public void actionPerformed(ActionEvent evt){
}//end of actionPerformed



}//end of main

[Petar Thomas]

MMM... I can't work with Applet, I don't know nothing about it. And, I need a bit time to turn it to JFrame, and something useful to me, becaouse I never used 2d before and paint(), but...

but...

(I may be wrong , becouse I didn't test anything ..)

but,

circleR = new Ellipse2D.Float(400, 100, 200, 200);

You see, this here... there are parameters that never change... 400,100,200,200...

while here:

int X = (int)(500 + (100) * java.lang.Math.cos(-degrees));
int Y = (int)(200 + (100) * java.lang.Math.sin(-degrees));

int X1 = (int)(500 + (100) * java.lang.Math.cos(degrees));
int Y1 = (int)(200 + (100) * java.lang.Math.sin(degrees));

You see, parameter depends on the 'degrees'.

'degrees' changes.... and from the 'degrees' the x,y and x1,y1 are calculated

(Which is radius here, what is this...) Anyway, I don't understand this at first look. Why is one 500 and one 200 , and what is 100? I'm totally blind. Ahhaaa... this is offset, 500 and 200, and 100 is a radius...

How this works?

angle is turned into degrees... (aha, this is Thread, hm.. )

and repaint calls paint...


So 500,200 is the center, 100 is the radius..

Do You want two circles?


Try like this:

public void paint(Graphics g){   
       
    Graphics2D ga = (Graphics2D)g;   
       
    int c = (100+(200/2));   
    double degrees = angle * Math.PI*2 / 360.0;     //convert degree into radians   
    
     //   
    //circleR = new Ellipse2D.Float(400, 100, 200, 200);   
    //       I'll move it down, under xy coordinates gets calculated    
    
    //find X and Y on the circle   
    int X = (int)(500 + (100) * java.lang.Math.cos(-degrees));   
    int Y = (int)(200 + (100) * java.lang.Math.sin(-degrees));   
       
    int X1 = (int)(500 + (100) * java.lang.Math.cos(degrees));   
    int Y1 = (int)(200 + (100) * java.lang.Math.sin(degrees));   

    // and then I will use the same coordinates like for the line
    circleR = new Ellipse2D.Float(X, Y, 200, 200);          

    // now, x,y center of the center is mooving...
    // You can erase the line and calculation of the other side of the line:
    // you can erase x1,y1 and have only the circle
    // probably moving , sorry, I didn't tested it...

    //create a line    
    Shape Fa = new Line2D.Float(500,200,X,Y);   
    Shape Fb = new Line2D.Float(500,200,X1,Y1);    
       
    //draw shape   
    ga.draw(circleR);   
    ga.draw(Fa);   
    ga.draw(Fb);   
    
     //or.. You can leave it all as it is 
     // and add one more circle, so to have a line
    // and a circles at the end of lines
    // with the circle centers at those end of lines
    // c1: x,y   and c2: x1,y1
   
    Shape circle2 = new Ellipse2D.float(X1,Y1,200,200);

    //draw one more shape
    ga.draw(circle2);

}//end of paint  

This should work, maybe.....

Did You wrote this program alone or did You copied it? Do You understand how it works? I didn't tested anything. Maybe it even doesn't work. But do You understand how angle is changeing, and how degree is calculated from angle every time repaint() is called?

[sachin upatil]

petar,

Yes, i write this program. Fa and Fb are lines which are moving in clockwise and anticlockwise direction.
(500,200) is starting point for line which is fixed and center point for circle.

Because of angle each time we are getting value of (X,Y),(X1,Y1). And Fa and Fb line is rotating.

Now i want to rotate same circle in circular motion.

[Petar Thomas]

Ahhhaaaaaa... now I understand.... Ockay, I think I kinow how... I just go to drink water, think, and then I'll write a reply... It's easy.. I'll be back in few minutes..

[Petar Thomas]

So...

The center of that circle is (500,200).... That is a center of the rotation.... And now, the center should rotate.......

If the center should rotate, then there should be another center

..one more center... for this center to rotate around... ( ?? : ) )


..and... it should be calculated as well, like this lines, actuallz, exactelly on the same way...

...but ... the angle of the whole rotation doesnt have to be the same angle of the line rotation...

I don't know if You agree or disagree...

ockay... lets say there is two angles.... 'angle' for lines, and ... 'angleR' for rotation..

    //..

public class CircularMotion extends Applet implements ActionListener{   
       
    int angle, angleR;   
    

    // Shape circleR;   <- I suppose not needed anymore..
    Thread frequency = null;
    //..   

...and...

public void start() {   
    System.out.println("Inside run method");   
    if(frequency== null) {   
      //radar= new Thread(this, "DemoRadar");   
        frequency= new Thread(new Runnable() {   
        public void run() {   
          while(true) {   
            try{   
                   
                 if (angle > 360) {   
                     angle = 0;   
                 }else{   
                     angle+=1;   
                 }   

                 /* increment of angleR  */

                 if (angleR > 360) {   
                     angleR = 0;   
                 }else{   
                     angleR+=1;   
                 }   

                /* I just copied it */

                 Thread.sleep(100);   
                 repaint();   

               
            }//end of try   
            catch(InterruptedException e){}   
          }//end of while   
        } //end run   
      }); // end class   
     frequency.start();   
    }//end of if    
}//end of start    

... and...

public void paint(Graphics g){   
       
    Graphics2D ga = (Graphics2D)g;   
       
    int c = (100+(200/2));   
    double degrees = angle * Math.PI*2 / 360.0;     //convert degree into radians   
       
    /* circleR = new Ellipse2D.Float(400, 100, 200, 200);   
        Instead of circleR, the angleR is needed, but 
        the hint with circleR was all right...
    */
    /* aha, and another 'degree' is needed */
    double degreesR = angleR * Math.PI*2 / 360.0;

    /* and, "the rotating centre" is needed
        I will use the same formula , copy paste.. */

    int XR = (int)(500 + (100) * java.lang.Math.cos(degreesR));   
    int YR = (int)(200 + (100) * java.lang.Math.sin(degreesR));   

   /* and put it down in "here" */        

    //find X and Y on the circle   
    int X = (int)(XR + (100) * java.lang.Math.cos(-degrees));   
    int Y = (int)(YR + (100) * java.lang.Math.sin(-degrees));   
       
    int X1 = (int)(XR + (100) * java.lang.Math.cos(degrees));   
    int Y1 = (int)(YR + (100) * java.lang.Math.sin(degrees));   
       
    //create a line    
    Shape Fa = new Line2D.Float(500,200,X,Y);   
    Shape Fb = new Line2D.Float(500,200,X1,Y1);    
       
    //draw shape   
/*
    ga.draw(circleR);   this is not needed any more,
    thank You for showing me an intention.. : )
*/
    ga.draw(Fa);   
    ga.draw(Fb);   
       
}//end of paint 

I suppose now it works.....

mmm..

500,200 are now the center of the rotation... and 100 is the radius.. on which travels the center of line rotation...

That is visible in this part...

    int XR = (int)(500 + (100) * java.lang.Math.cos(degreesR));   
    int YR = (int)(200 + (100) * java.lang.Math.sin(degreesR));  

(maybe 500,200, and 100 should be in some variables)

and this XR,YR is now used in other formula in place where there used to be a static center of rotation 500,200

    int X = (int)(XR + (100) * java.lang.Math.cos(-degrees));   
    int Y = (int)(YR + (100) * java.lang.Math.sin(-degrees));   
       
    int X1 = (int)(XR + (100) * java.lang.Math.cos(degrees));   
    int Y1 = (int)(YR + (100) * java.lang.Math.sin(degrees));  

..now the center of the rotation is not static any more... the center is rotating....XR,YR is rotating around 500,200 at radius 100...


Here... I hope it helped... : )
I hope it works...

[Petar Thomas]

No! It doesn't....

This part I did wrong:

    //create a line       
    Shape Fa = new Line2D.Float(500,200,X,Y);      
    Shape Fb = new Line2D.Float(500,200,X1,Y1); 

Here, it is needed XR,YR as the begining of the line ..now...

    //create a line       
    Shape Fa = new Line2D.Float(XR,YR,X,Y);      
    Shape Fb = new Line2D.Float(XR,YR,X1,Y1); 

Now it works, probably..

[Petar Thomas]

      
import java.util.*;   
import java.awt.*;   
import java.applet.*;   
import javax.swing.*;   
import java.net.*;   
import java.awt.event.*;   
import java.awt.geom.Ellipse2D;   
import java.awt.geom.Line2D;   
import java.awt.color.ColorSpace;   
import java.lang.Math;   
  
  
public class CircularMotion extends Applet implements ActionListener{   
       
    int angle, angleR;   // <--
       
    //Shape circleR;   //<--
    Thread frequency = null;   
       
       
  
public void init(){   
       
}//end of init   
  
public void paint(Graphics g){   
       
    Graphics2D ga = (Graphics2D)g;   
       
    int c = (100+(200/2));   
    double degrees = angle * Math.PI*2 / 360.0;     //convert degree into radians   
    double degreesR = angleR * Math.PI*2 / 360.0;  // <--
   
//    circleR = new Ellipse2D.Float(400, 100, 200, 200);   //  <--
        

    //  XR, YR
    int XR = (int)(500 + (100) * java.lang.Math.cos(degreesR));   
    int YR = (int)(200 + (100) * java.lang.Math.sin(degreesR));   
   //  notice degreesR
   // also 500,200,100 are x,y,r that should be in variables



    //find X and Y on the circle   
    int X = (int)(XR + (100) * java.lang.Math.cos(-degrees));   // <-
    int Y = (int)(YR + (100) * java.lang.Math.sin(-degrees));   // <-
       
    int X1 = (int)(XR + (100) * java.lang.Math.cos(degrees));   // <-
    int Y1 = (int)(YR + (100) * java.lang.Math.sin(degrees));   // <-
    /* here 100 is not the same thing like above at XR,YR 100 */
    /* There are now two (2) radiuses, both have the same value,
         but can be different...
        One radius is from XR,YR, at angleR, from where lines are
        drawed. Before, that point was static, now it's not, so 
        it is needed to be in x,y,x1,y1 included calculation.
        The other radius is the length of the lines, : ) */


   
    //create a line    
    Shape Fa = new Line2D.Float(XR,YR,X,Y);   // <-
    Shape Fb = new Line2D.Float(XR,YR,X1,Y1);    // <-
       
    //draw shape   
   //    ga.draw(circleR);   <--
    ga.draw(Fa);   
    ga.draw(Fb);   
       
}//end of paint    
  
/*  
public void update(Graphics g) {  
    System.out.println("Paint");  
    paint(g);  
}*/  
  
public void start() {   
    System.out.println("Inside run method");   
    if(frequency== null) {   
      //radar= new Thread(this, "DemoRadar");   
        frequency= new Thread(new Runnable() {   
        public void run() {   
          while(true) {   
            try{   
                   
                 if (angle > 360) {   
                     angle = 0;   
                 }else{   
                     angle+=1;   
                 }   

                 if (angleR > 360) {   // <-
                     angleR = 0;         // <-
                 }else{                 // <-
                     angleR+=1;         // <-
                 }                       // <-

                 Thread.sleep(100);   
                 repaint();   
            }//end of try   
            catch(InterruptedException e){}   
          }//end of while   
        } //end run   
      }); // end class   
     frequency.start();   
    }//end of if    
}//end of start    
  
public void actionPerformed(ActionEvent evt){   
}//end of actionPerformed   
  
  
  
}//end of main  

[sachin upatil]

Petar,

I want circular motion like thiswebpage

[Petar Thomas]

Beauty is in the eye of the beholder.

Please, explain better.



(Do You want #exactely# as like it is on the picture on that web page?)

import java.util.*;   
import java.awt.*;   
import java.applet.*;   
import javax.swing.*;   
import java.net.*;   
import java.awt.event.*;   
import java.awt.geom.Ellipse2D;   
import java.awt.geom.Line2D;   
import java.awt.color.ColorSpace;   
import java.lang.Math;   
  
  
public class CircularMotion extends Applet implements ActionListener{   
       
    int angle;   
       
    Shape circleR;   
    Thread frequency = null;   
       
       
  
public void init(){   
       
}//end of init   
  
public void paint(Graphics g){   
       
    Graphics2D ga = (Graphics2D)g;   
       
    int c = (100+(200/2));   
    double degrees = angle * Math.PI*2 / 360.0;     //convert degree into radians   

    int secondAngle = angle + 90;
    if (secondAngle > 360 ) {
        secondAngle = secondAngle - 360; // 
    }

    double degrees90 = secondAngle * Math.PI*2 / 360.0;     //

       
    circleR = new Ellipse2D.Float(500, 200, 100, 100);   
        
    //find X and Y on the circle   
    int X = (int)(500 + (100) * java.lang.Math.cos(degrees));   
    int Y = (int)(200 + (100) * java.lang.Math.sin(degrees));   
       
    int X1 = (int)(X + (100) * java.lang.Math.cos(degrees90));   
    int Y1 = (int)(Y + (100) * java.lang.Math.sin(degrees90));   
       
    //create a line    
    Shape Fa = new Line2D.Float(500,200,X,Y);   
    Shape Fb = new Line2D.Float(X,Y,X1,Y1);    
       
    //draw shape   
    ga.draw(circleR);   
    ga.draw(Fa);   
    ga.draw(Fb);   
       
}//end of paint    
  
/*  
public void update(Graphics g) {  
    System.out.println("Paint");  
    paint(g);  
}*/  
  
public void start() {   
    System.out.println("Inside run method");   
    if(frequency== null) {   
      //radar= new Thread(this, "DemoRadar");   
        frequency= new Thread(new Runnable() {   
        public void run() {   
          while(true) {   
            try{   
                   
                 if (angle > 360) {   
                     angle = 0;   
                 }else{   
                     angle+=1;   
                 }   
                 Thread.sleep(100);   
                 repaint();   
            }//end of try   
            catch(InterruptedException e){}   
          }//end of while   
        } //end run   
      }); // end class   
     frequency.start();   
    }//end of if    
}//end of start    
  
public void actionPerformed(ActionEvent evt){   
}//end of actionPerformed   
  
  
  
}//end of main  
   

Is this maybe what You want? Is it working?

[Michael Dunn]

probably 90+% of the code required you downloaded in your JDK

go to your progamFiles (or wherever your JDK lives):

progamFiles/java/jdk/demo/applets/clock

double-click the html file and you have an analog clock
just change the timer from 1000 (1 sec) to about 250 (experiment),
and you should get the same perpetual motion effect

[sachin upatil]

Petar,

Thank you.

But i am trying to rotate circumference of circle. It's like a fixed wheel at center which is rotating.

-sachin

[Petar Thomas]

Sachin,

But rotating a circumference of a circle is to me personaly a strange idea... If in the imagination the circumference is an endlessly thin line, in which there are endless count of dots, I don't know how to make that - it rotates... But maybe someone who studied mathemathics on the university knows if that its possible.

In practice, there would be two versions of it, as I think now:
One version is just a circle on the screen that doesn't move at all... with an explanation that "it is rotating so we don't see it"... becaouse as circle rotates, but it is on the same place... the dots on the screen are always the same....

The second version ... is the visual effect... that looks like a rotating circle...

Maybe I'm wrong somehow.

I'm sorry that I could'n help You, I tried...

Bye,

Petar

[Campbell Ritchie]

The bit about "rotating" is loose terminology. It means to have a point which rotates, following a circle.

[Petar Thomas]

Hi,

To me, next thing is obviouse: If I have one dot rotating 10 degrees per step, I would do it so to calculate in advance those 36 locations of each 10 degree step, and those locations doesn't change, so, if I would have a dot rotating in 1 degree step, 360 steps, then I would have precalculated 360 locations, for one dot, but, also, if I would have 360 dots, that would use those 360 precalculated positions, then, when one dot moves, the other steps in, on the same position... and so, 360 dots, move to the the next position, which is in the same time the previous position of the next dot that moved as well... Or in another words, if in the circumference of the circle, with all dots rotating, one dot also rotating is in one moment at 45 degrees, and that same dot will be in the other moment at 120 degrees, as the whole circle rotated for 75 degrees, so that dot will be on the same place of the dot which was at 120 degrees when this dot was at 45, and this is with all the dots as well. Every dot travels the same path like any other dot, when one dot moves away, another slips in, on the same place, and that's how for all the dots in the circle. Let's say like this, every frame of an animation would look the same like a previous frame or any other frame. The only way to do it, by my opinion is to make a visual effect. For example, I am not enough experienced, but if Java 2d uses antialiasing, then it is possible that "one dot", created by drawLine(x, y, 1, 1) or drawRect(x, y, 1, 1) or fillRect(x, y, 1, 1) , maybe it is possible that one dot would "cover" more pixels in different colors, and even on this way it would still be a nice static circle... Maybe it is possible to draw a "two positions" of a wheel rotating, where every even positon looks the same, and every odd position looks the same, and maybe even it makes a kind of a moving effect, but maybe it would look only like click-clack left-right.. Maybe then it would be better to have more than two positions which are repeated. But then, actually, I think, there should be left empty space for dots to travel, so that wheel would look like zebra maybe. Maybe then, those empty dots in between should be in lighter color, to fill the emptines till the full line. Other way would be to create a "bump" on a circumference of a circle, a dirt, like on a tire of a car.. you know how tire of a car looks to an eye, there are variouse visual illusions there... At the end, if you have a perfect circle perfectly rotating, or dots rotating, rotation is invisible.

For example, look at this smiley:


There is no problem in rotating one dot, or ten dots, but when there is enough dots to form unbreaked line of a circumference of a circle, then ... it's a circle. And, mathematically, all the dot's on the screen have to be calculated, as those dots belong to the circle, dots them selfs, their positions, are not moving any more... The circumference is not moving. So, if you have a full unbreaked line of circumference of the circle, made out od dots, those dots are also, always the same dots...

Like, for example, "theatre of the shadows", when one shadow is moved, and other moved exactely on the same place, that's how it can be created an illusion that nothing has moved at all.

[sachin upatil]

HI Petar,

Thank you.

i did it.

in java we have Graphics2d.ROTATE method.

Using this method we can rotate a circle.

-sachin

[Petar Thomas]

Sachin,

I am very glad.
Thank You to You too, I was learning like this also.

Petar

[Campbell Ritchie]

Beware of the rotate method; it uses an affine transform which requires a lot of floating-point arithmetic, and causes imprecision in location of the Graphics object. It is better if you use the method which copies a Graphics object (I think it is called Graphics#create()) and apply all the Affine Transforms to the copy.