# Simple animation displaying inconsistently

**URL:** https://discourse.processing.org/t/simple-animation-displaying-inconsistently/43116
**Category:** Coding Questions
**Created:** [November 1, 2023, 4:21pm UTC](https://discourse.processing.org/t/simple-animation-displaying-inconsistently/43116 "2023-11-01T16:21:22Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![MKCreating](https://avatars.discourse-cdn.com/v4/letter/m/ecc23a/32.png) [@MKCreating](https://discourse.processing.org/u/MKCreating)
#### Post date: [November 1, 2023, 4:21pm UTC](https://discourse.processing.org/t/simple-animation-displaying-inconsistently/43116/1 "2023-11-01T16:21:22Z")

</div>

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?

```auto

///////////////////////////////////////////////////////////////////////////////////////////////////////////////
//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()

```

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [November 1, 2023, 4:38pm UTC](https://discourse.processing.org/t/simple-animation-displaying-inconsistently/43116/2 "2023-11-01T16:38:41Z")

</div>

Please post the code which is causing the problem.

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [November 4, 2023, 11:58pm UTC](https://discourse.processing.org/t/simple-animation-displaying-inconsistently/43116/3 "2023-11-04T23:58:50Z")

</div>

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:

[![](https://img.youtube.com/vi/4JzDttgdILQ/maxresdefault.jpg "Creative Coding for Beginners - Full Course!") ](https://www.youtube.com/watch?v=4JzDttgdILQ)

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

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

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

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

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

```

`:)`

---

<div class="post-metadata">

### Author: ![MKCreating](https://avatars.discourse-cdn.com/v4/letter/m/ecc23a/32.png) [@MKCreating](https://discourse.processing.org/u/MKCreating)
#### Post date: [November 7, 2023, 7:47pm UTC](https://discourse.processing.org/t/simple-animation-displaying-inconsistently/43116/4 "2023-11-07T19:47:51Z")

</div>

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