title: How to implement rotation of multiple images around an off-centre point in p5.js
body: <p>I'm making a tower defense game using JavaScript and p5.js library. I have 2 images a <em>base</em> and a <em>gun</em>. The gun is drawn on top of the base to make it appear as a single unit. I need my gun to point towards the enemy(which follows a path). I need help to make the gun rotate on a point(not centre), keeping in mind that there can be several of these towers. I have tried translating(to change centre) and rotating but this doesn't work for many objects and obviously can't keep track of many objects.</p>
  <p>I haven't seen any other question regarding this matter either, is there a better solution/alternative to what I'm trying to accomplish?</p>
  <hr />
  <h2>Required Code</h2>
  <hr />
  <p><strong>Some Important Variables</strong></p>
  <pre><code>var isFireTowerPressed = false;    // checks if tower is placed
  var FireTowerPos = [];    // location of every tower =&gt; [] - 2d array
  </code></pre>
  <p><strong>Preloaded Stuff</strong></p>
  <pre><code>function preload() {
      backgroundImg = loadImage(&quot;http://127.0.0.1:8080/img/extra/map1.png&quot;);
      [...]
      firetowerbaseImg = loadImage(&quot;http://127.0.0.1:8080/img/towers/firetowerbase.png&quot;);
      firetowerturretImg = loadImage(&quot;http://127.0.0.1:8080/img/towers/firetowergun.png&quot;);
  
  }
  </code></pre>
  <p><strong>Draw Every Frame</strong></p>
  <pre><code>function draw() 
  {
  
      background(60, 238, 161);
      [...]
      if (isFireTowerPressed == true)    //checks if I have pressed the button to place the tower
      {
          image(firetowerbaseImg, mouseX - 28, mouseY - 28);
          // show range circle
          noFill();
          stroke(0,0,0);
          strokeWeight(1);
          circle(mouseX, mouseY, 300);
      }
      for (var i = 0; i &lt; FireTowerPos.length; i++) 
      {
          image(firetowerbaseImg, FireTowerPos[i][0], FireTowerPos[i][1]);
          image(firetowerturretImg, FireTowerPos[i][0], FireTowerPos[i][1]-20);
  
      }
  
  }
  </code></pre>
  <p><strong>Mouse Click Event</strong></p>
  <pre><code>function mouseClicked()
  {
  
      if (isFireTowerPressed==true &amp;&amp; mouseX+28 &lt;= 750) // place-able area
      {
          FireTowerPos.push([mouseX-28, mouseY-28]);
          isFireTowerPressed = false;
      }
  }
  </code></pre>
  <hr />
  <p><strong>The picture shows the 2 pictures I'm using(base &amp; gun). I need to be able to rotate the gun towards the enemy</strong></p>
  <p><a href="https://i.stack.imgur.com/xSRns.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xSRns.png" alt="Picture to help visualize problem" /></a></p>
  <p>Any help is appreciated, thank you</p>