Simple animation displaying inconsistently

Processing Coding Questions
1

Hello,
I have created a sketch and the println function shows it all seems to work but the animation just doesn’t seem to show for me. Sometimes when I minimise and then expand the window the lines do show but its very inconsistent.

Any chance someone could have a look and see if I have done anything wrong?


///////////////////////////////////////////////////////////////////////////////////////////////////////////////
//based on: https://gist.github.com/jupdike/bfe5eb23d1c395d8a0a1a4ddd94882ac
//note if gy == 0 and gx == 0 then the circles are tangent and there is only one solution but that one solution will just be duplicated as the code is currently written

///////////////////////////////////////////////////////////////////////////////////////////////////////////////
float multiplier = 5;

float radiusOfUpperCam = 16.5 * multiplier; 
float diameterOfUpperCam = radiusOfUpperCam * 2; 

float rightCamCentreXCoordinate = 750;
float rightCamCentreYCoordinate = 250;

float leftCamCentreXCoordinate = 250;
float leftCamCentreYCoordinate = 250;

float lowerCamCentreXCoordinate = 500;
float lowerCamCentreYCoordinate = 750;

float lowerCamEndpointXCoordinate = 0;
float lowerCamEndpointYCoordinate = 0;

float angleOfLowerCam = 0;
float radiusOfLowerCam = 15 * multiplier ;
float diameterOfLowerCam = radiusOfLowerCam *2;

float controlArmLengthRadius = 112 * multiplier;  
float controlArmLengthDiameter = controlArmLengthRadius * 2;

float ix1 = 0;
float iy1 = 0;
float ix2 = 0;
float iy2 = 0;

///////////////////////////////////////////////////////////////////////////////////////////////////////////////
void setup(){
    size(1000,1000);      //this is the general window
    line(500,0,500,1000); //vertical crosshair line

}// end of setup()

///////////////////////////////////////////////////////////////////////////////////////////////////////////////
void draw(){  
    circle(leftCamCentreXCoordinate, leftCamCentreYCoordinate, diameterOfUpperCam);  //upper left cam circle
    circle(rightCamCentreXCoordinate, rightCamCentreYCoordinate, diameterOfUpperCam); //upper right cam circle
    circle(lowerCamCentreXCoordinate, lowerCamCentreYCoordinate, diameterOfLowerCam); //lower cam circle
  
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
    for (angleOfLowerCam = 0; angleOfLowerCam < 360; angleOfLowerCam = angleOfLowerCam +10) { //animation of the lower cam angle
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
   
   
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////  
        //draw the lower cam line
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////     
        float adjOfLowerCam = cos(radians(angleOfLowerCam))* radiusOfLowerCam;
        float oppOfLowerCam = sin(radians(angleOfLowerCam))* radiusOfLowerCam;
        line(lowerCamCentreXCoordinate, lowerCamCentreYCoordinate, lowerCamCentreXCoordinate + adjOfLowerCam, lowerCamCentreYCoordinate + oppOfLowerCam); //lower cam line
      
        ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
        lowerCamEndpointXCoordinate   = lowerCamCentreXCoordinate + adjOfLowerCam    ;
        lowerCamEndpointYCoordinate   = lowerCamCentreYCoordinate  + oppOfLowerCam      ;
      
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////  
        //calculating the right cam intersection
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////     
        intersectTwoCircles(rightCamCentreXCoordinate, rightCamCentreYCoordinate, radiusOfUpperCam, lowerCamCentreXCoordinate + adjOfLowerCam, lowerCamCentreYCoordinate  + oppOfLowerCam, controlArmLengthRadius);
      
        //circle(ix1,iy1,25); //left cam intersection circles on the intersection points for debugging
        //circle(ix2,iy2,25); //left cam intersection circles on the intersection points for debugging
        //circle(lowerCamCentreXCoordinate + adjOfLowerCam, lowerCamCentreYCoordinate + oppOfLowerCam, controlArmLengthDiameter); // control arm circle 
        
        line(lowerCamCentreXCoordinate + adjOfLowerCam, lowerCamCentreYCoordinate  + oppOfLowerCam,ix1,iy1); //left control arm line
        line(rightCamCentreXCoordinate, rightCamCentreYCoordinate, ix1,iy1); //right cam arm line
       
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////  
        //measuring the upper right cam line angle
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////  
        translate(rightCamCentreXCoordinate, rightCamCentreYCoordinate); //translate to the centre of the upper right cam circle
            float rightCamAngle = atan2(iy1 - rightCamCentreYCoordinate,ix1 - rightCamCentreXCoordinate);   //atan2(y, x) //calculate the angle of the upper right cam line
            println("rightCamAngle:", degrees(rightCamAngle));   
        
        translate(-rightCamCentreXCoordinate, -rightCamCentreYCoordinate); //translate the origin back to the top left
             
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////  
        //calculating the left cam intersection
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////  
        intersectTwoCircles(leftCamCentreXCoordinate, leftCamCentreYCoordinate, radiusOfUpperCam, lowerCamCentreXCoordinate + adjOfLowerCam, lowerCamCentreYCoordinate  + oppOfLowerCam, controlArmLengthRadius);
       
        //circle(ix1,iy1,25); //right cam intersection circles on the intersection points for debugging
        //circle(ix2,iy2,25); //right cam intersection circles on the intersection points for debugging  
        
        line(lowerCamCentreXCoordinate + adjOfLowerCam, lowerCamCentreYCoordinate  + oppOfLowerCam,ix2,iy2); //left control arm line
        line(leftCamCentreXCoordinate, leftCamCentreYCoordinate, ix2,iy2); //upper left cam arm line
        
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////  
        //measuring the upper left cam angle
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////  
        translate(leftCamCentreXCoordinate, leftCamCentreYCoordinate); //translate to the centre of the upper left cam circle
           float leftCamAngle = atan2(iy2 - leftCamCentreYCoordinate,ix2 - leftCamCentreXCoordinate);  //atan2(y, x) //calculate the angle of the upper right cam line
           println("leftCamAngle:", degrees(leftCamAngle));
        
        translate(-leftCamCentreXCoordinate, -leftCamCentreYCoordinate); //translate the origin back to the top left

        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////         
        //measuring the lower cam
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////  
        translate(lowerCamCentreXCoordinate, lowerCamCentreYCoordinate); //translate to the centre of the lower cam circle
           float lowerCamAngle = atan2(lowerCamEndpointYCoordinate - lowerCamCentreYCoordinate,lowerCamEndpointXCoordinate - lowerCamCentreXCoordinate);   //atan2(y, x) //calculate the angle of the lower cam line
           println("lowerCamAngle:", degrees(lowerCamAngle));
           println("//////////////////////////////////////////////////////////////////////////////////////////");
         
        translate(-lowerCamCentreXCoordinate, -lowerCamCentreYCoordinate); //translate the origin back to the top left
        
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////         
       
        delay(1500); //delay in milliseconds so that I can see the cam moving
       
    }//end of "for" loop
}//end of draw()
  
  
  
  
  
  
  
  
  
  
  
  


/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////  
//THIS IS A FUNCTION CALLED "intersectTwoCircles"
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////  
void intersectTwoCircles(float topCircleXCoordinate, float topCircleYCoordinate, float topCircleRadius, float lowerCircleXCoordinate, float lowerCircleYCoordinate, float lowerCircleRadius) { 

  float distanceBetweenCirclesXCoordinates = topCircleXCoordinate - lowerCircleXCoordinate;  
  float distanceBetweenCirclesYCoordinates = topCircleYCoordinate - lowerCircleYCoordinate;  

  //////////////////////////////////////////////////////////////////////////////////////////////////////////////
  float hypotenuse = sqrt((distanceBetweenCirclesXCoordinates * distanceBetweenCirclesXCoordinates) + (distanceBetweenCirclesYCoordinates * distanceBetweenCirclesYCoordinates));  // this looks like a^2 + b^2 = c^2

  //println("hypotenuse:", hypotenuse);
  //println("distanceBetweenCirclesXCoordinates:", distanceBetweenCirclesXCoordinates);
  //println("distanceBetweenCirclesYCoordinates:", distanceBetweenCirclesYCoordinates);

  //if (!(abs(circle1Radius - circle2Radius) <= hypotenuse && hypotenuse <= circle1Radius + circle2Radius)) { // no intersection
  //return; // empty list of results
  //}
  ///////////////////////////////////////////////////////////////////////Intersection(s) should exist/////////////////////////////////////////////////////////////////////
  float R2 = hypotenuse * hypotenuse;
  float R4 = R2*R2;

  //println("R2:", R2);
  //println("R4:", R4);

  float a = (topCircleRadius * topCircleRadius - lowerCircleRadius * lowerCircleRadius) / (2 * R2);
  float r2r2 = (topCircleRadius * topCircleRadius - lowerCircleRadius * lowerCircleRadius);
  float c = sqrt(2 * (topCircleRadius * topCircleRadius + lowerCircleRadius * lowerCircleRadius) / R2 - (r2r2 * r2r2) / R4 - 1);

  //println("a:", a);
  //println("r2r2:", r2r2);
  //println("c:", c);

  float fx = (topCircleXCoordinate + lowerCircleXCoordinate) / 2 + a * (lowerCircleXCoordinate - topCircleXCoordinate);
  float gx = c * (lowerCircleYCoordinate - topCircleYCoordinate) / 2;

  ix1 = fx + gx;
  ix2 = fx - gx;

  float fy = (topCircleYCoordinate + lowerCircleYCoordinate) / 2 + a * (lowerCircleYCoordinate - topCircleYCoordinate);
  float gy = c * (topCircleXCoordinate - lowerCircleXCoordinate) / 2;

  iy1 = fy + gy;
  iy2 = fy - gy;

}// end of intersectTwoCircles()
2

Please post the code which is causing the problem.

3

Hello @MKCreating ,

You are attempting to animate in a for loop with a delay and this will not work.

I suggest you review the basics before proceeding:

Lots of resources (tutorials, references and examples) here:

Read the reference for each function in your code for some insight.

Try drawing with each frame of draw() instead (hint below):

    //for (angleOfLowerCam = 0; angleOfLowerCam < 360; angleOfLowerCam = angleOfLowerCam +10) 
    angleOfLowerCam = angleOfLowerCam +10;
    { //animation of the lower cam angle

:)

4

thanks for putting me on the right track glv, all sorted now!

2 Likes