title: Increasing angle of rotation around center with sin and cos Canvas Js
body: <p>Hy everyone,
  i'm making some little exercices in canvas with sin and cos. I can now make a point rotating around another one with the angle incrementation in the animate function it work, like in the code below. My purpose is to put angle incrementation in the update function of the Class viefinder</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const canvas= document.getElementById('canvas');
  const c= canvas.getContext("2d");
  
  canvas.width= window.innerWidth;
  canvas.height= window.innerHeight;
  
  let angle=0;
  const r=200;
  
  
  
  /* -------------------------------------------------------------------------- */
  /*                                 View Finder                                */
  /* -------------------------------------------------------------------------- */
  
  class ViewFinder {
    constructor(x,y,radius,color){
        this.x=x;
        this.y=y;
        this.radius=radius;
        this.color=color
        this.r= r;
        this.angle=angle;
        this.dx = this.r * Math.cos(this.angle);
        this.dy= this.r * Math.sin (this.angle);
  
    }
    draw(){
          //point 1
          c.beginPath()
          c.arc(this.x,this.y,this.radius, 0, Math.PI *2,false )
          c.fillStyle=this.color;
          c.fill();
          //point 2
          c.beginPath();
          c.arc(this.x + this.dx, this.y + this.dy,this.radius,0, Math.PI * 2, false );
          c.fillStyle=this.color;
          c.fill();
    }
    update(){
        this.draw();
    }
  
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*                                   Animate                                  */
  /* -------------------------------------------------------------------------- */
  
  let animationId;
  
  
  
  function animate(){
     animationId= requestAnimationFrame(animate);
     c.fillStyle='rgba(0, 0, 0, 0.5)';
     c.fillRect(0,0,canvas.width,canvas.height);
     // calculate velocity
     viewFinder = new ViewFinder (canvas.width/2, canvas.height/2, 40, 'white');
     angle +=0.1/2;
     viewFinder.update();
  }
  
  animate();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body style="height: 100vh;"&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
      &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So if i do the same but i put angle incrementation in the update function nothing move.. just try to understand why many thanks for yours answers</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const canvas= document.getElementById('canvas');
  const c= canvas.getContext("2d");
  
  canvas.width= window.innerWidth;
  canvas.height= window.innerHeight;
  
  let angle=0;
  const r=200;
  
  
  
  /* -------------------------------------------------------------------------- */
  /*                                 View Finder                                */
  /* -------------------------------------------------------------------------- */
  
  class ViewFinder {
    constructor(x,y,radius,color){
        this.x=x;
        this.y=y;
        this.radius=radius;
        this.color=color
        this.r= r;
        this.angle=angle;
        this.dx = this.r * Math.cos(this.angle);
        this.dy= this.r * Math.sin (this.angle);
  
    }
    draw(){
          //point 1
          c.beginPath()
          c.arc(this.x,this.y,this.radius, 0, Math.PI *2,false )
          c.fillStyle=this.color;
          c.fill();
          //point 2
          c.beginPath();
          c.arc(this.x + this.dx, this.y + this.dy,this.radius,0, Math.PI * 2, false );
          c.fillStyle=this.color;
          c.fill();
    }
    update(){
        this.draw();
        this.angle +=0.1;
    }
  
  }
  
  
  /* -------------------------------------------------------------------------- */
  /*                                   Animate                                  */
  /* -------------------------------------------------------------------------- */
  
  let animationId;
  
  
  
  function animate(){
     animationId= requestAnimationFrame(animate);
     c.fillStyle='rgba(0, 0, 0, 0.5)';
     c.fillRect(0,0,canvas.width,canvas.height);
     // calculate velocity
     viewFinder = new ViewFinder (canvas.width/2, canvas.height/2, 40, 'white');
     viewFinder.update();
  }
  
  
  
  
  animate();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body style="height: 100vh;"&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
      &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>