Loading...
Logo
Processing Forum
Hi there,

i am pretty new to programming (especially graphical programming), so i hope you can help me.
ok i have the following problem:

  1. I've got a circle with two lines starting at the middle of the circle. (Picture 1)
  2. However those lines hide behind the circle's area. (Picture 2)
  3. Now those two lines should rotate like a clock with a minute hand and an hour hand. I achieved this by using the rotate command, but probably i need to do it manually to fix the problem.
  4. Here comes the problem: i want a third line, which connects the two points of intersection between the clock hands and the circle, but dynamically. (Picture 3)
I came up to the point that i have two clock hands rotating like the ones of a real clock, but with this rotate command i have no possibility to find the point of intersection.

Thank you loads in advance!

Here the pictures:









Replies(5)

What you need is some trigonometry.

You should check out the wikipedia article about polar cooridnates, and conversion to cartesian.

Then you can skip the rotate, and you will be half way there.

Because..
in polar coordinates, you have an angle, and a distance from center.

You would draw your first two lines from 0, 0 to a, r.
r would be the same for both, and a would be the angle that you probably now is giving to rotate.

You would also know what radius the circle is, so the new line would be to convert from a1, circleradius, to a2, circleradius.

From wikipedia: http://en.wikipedia.org/wiki/Polar_coordinate_system

x = r * cos(a)
y = r * sin(a)

So what that would turn out to be would be something like:
line 1 = 0, 0 to (r * cos(a1)), (r*sin(a1))
line 2 = 0, 0 to (r * cos(a2)), (r*sin(a2))

line 3 = (circleradius*cos(a1)), (circleradius*sin(a1)) to (circleradius*cos(a2)), (circleradius*sin(a2))

Also, often vectors are quite useful.

Code Example
Copy code
  1. int diameter = 250;
  2. PVector a = new PVector(diameter/2, 0);
  3. PVector b = new PVector(diameter/2, 0);
  4.  
  5. void setup() {
  6.   size(600, 600);
  7.   strokeWeight(3);
  8.   smooth();
  9. }
  10.  
  11. void draw() {
  12.   background(255);
  13.   translate(width/2, height/2);
  14.  
  15.   noStroke();
  16.   fill(200,200,200);
  17.   ellipse(0, 0, diameter, diameter);
  18.  
  19.   // rotate the lines at different speeds
  20.   rotate2D(a, radians(1/60.0));
  21.   rotate2D(b, radians(1));
  22.  
  23.   // the clock's lines
  24.   stroke(0);
  25.   line(0, 0, a.x, a.y);
  26.   line(0, 0, b.x, b.y);
  27.  
  28.   // the line connecting the two points
  29.   stroke(0, 0, 255);
  30.   line(a.x, a.y, b.x, b.y);
  31.  
  32.   // the outer clock's lines
  33.   stroke(0, 255, 0);
  34.   outerline(a);
  35.   outerline(b);
  36. }
  37.  
  38. void rotate2D(PVector v, float theta) {
  39.   float xTemp = v.x;
  40.   v.x = v.x*cos(theta) - v.y*sin(theta);
  41.   v.y = xTemp*sin(theta) + v.y*cos(theta);
  42. }
  43.  
  44. void outerline(PVector p) {
  45.   pushMatrix();
  46.   translate(p.x, p.y);
  47.   line(0, 0, p.x, p.y);
  48.   popMatrix();
  49. }
Thanks you a lot you too!

Amazing help really.

i am reading the topics about PVector and the trigonometry stuff.

It works perfectly, but i have to modify the whole thing now and i have to make a triangle out of the circle.

Does this make a big difference ?

Thank you in advance again!
Yes, it makes a difference. A circle is much easier, because you know that the points of intersection are always on the radius. With a triangle this will differ, so you have to manually find the points of intersection (if any) between both lines and the triangle.

Code Example
Copy code
  1. PVector a = new PVector(250, 0);
  2. PVector b = new PVector(250, 0);
  3.  
  4. PVector[] vecTriangle = {
  5.   new PVector(-200, -100),
  6.   new PVector(200, -100),
  7.   new PVector(0, 200)
  8. };
  9.  
  10. void setup() {
  11.   size(600, 600);
  12.   smooth();
  13. }
  14.  
  15. void draw() {
  16.   background(255);
  17.   translate(width/2, height/2.25);
  18.  
  19.   // rotate the lines at different speeds
  20.   rotate2D(a, radians(1/60.0));
  21.   rotate2D(b, radians(1));
  22.  
  23.   // display the triangle
  24.   noStroke();
  25.   fill(200,200,200);
  26.   beginShape();
  27.   for (PVector p : vecTriangle) { vertex(p.x, p.y); }
  28.   endShape();
  29.  
  30.   // display the clock's lines
  31.   stroke(0);
  32.   strokeWeight(3);
  33.   line(0, 0, a.x, a.y);
  34.   line(0, 0, b.x, b.y);
  35.  
  36.   // get intersection points between A/B and triangle (if any)
  37.   PVector tisA = triangleIntersection(a, vecTriangle);
  38.   PVector tisB = triangleIntersection(b, vecTriangle);
  39.  
  40.   // display intersection points + the lines to and between them
  41.   if (tisA != null && tisB != null) {
  42.     strokeWeight(6);
  43.     // lines to intersection points
  44.     stroke(0, 255, 0);
  45.     line(0, 0, tisA.x, tisA.y);
  46.     line(0, 0, tisB.x, tisB.y);
  47.     // line between intersection points
  48.     stroke(0, 0, 255);
  49.     line(tisA.x, tisA.y, tisB.x, tisB.y);
  50.     // intersection points
  51.     fill(0);
  52.     ellipse(tisA.x, tisA.y, 15, 15);
  53.     ellipse(tisB.x, tisB.y, 15, 15);
  54.   }
  55. }
  56.  
  57. void rotate2D(PVector v, float theta) {
  58.   float xTemp = v.x;
  59.   v.x = v.x*cos(theta) - v.y*sin(theta);
  60.   v.y = xTemp*sin(theta) + v.y*cos(theta);
  61. }
  62.  
  63. PVector triangleIntersection(PVector p, PVector[] vecTriangle) {
  64.   PVector o = new PVector();
  65.   for (int i=0; i<vecTriangle.length; i++) {
  66.     PVector c = vecTriangle[i];
  67.     PVector n = vecTriangle[(i+1)%vecTriangle.length];
  68.     PVector lis = lineIntersection(o, p, c, n);
  69.     if (lis != null) return lis;
  70.   }
  71.   return null;
  72. }
  73.  
  74. PVector lineIntersection(PVector p1, PVector p2, PVector p3, PVector p4) {
  75.   PVector b = PVector.sub(p2, p1);
  76.   PVector d = PVector.sub(p4, p3);
  77.  
  78.   float b_dot_d_perp = b.x * d.y - b.y * d.x;
  79.   if (b_dot_d_perp == 0) { return null; }
  80.  
  81.   PVector c = PVector.sub(p3, p1);
  82.   float t = (c.x * d.y - c.y * d.x) / b_dot_d_perp;
  83.   if (t < 0 || t > 1) { return null; }
  84.   float u = (c.x * b.y - c.y * b.x) / b_dot_d_perp;
  85.   if (u < 0 || u > 1) { return null; }
  86.  
  87.   return new PVector(p1.x+t*b.x, p1.y+t*b.y);
  88. }