<p>You have to loop over destination pixels instead of source ones (gaps are the result of looping over source). For each destination pixel you can calculate position in source data, your code for pixel rotation should be inverted. For source pixel you will then get float x and y, on this step you can either round values and sample color from source (and get a bit distorted image), or you can treat fractional parts as parameters for neighbour pixel color interpolation (you get 4 source pixels for each destination pixel and with fractional part you can calculate color in between those pixels). Here is similar question on SO: <a href="https://stackoverflow.com/questions/695080/how-do-i-rotate-an-image">https://stackoverflow.com/questions/695080/how-do-i-rotate-an-image</a></p>
<p>And the reason why your algorithm is slow is because you use heavy functions to read and write data for each pixel independently. It is generally more favorable to extract source data into some array (it could be same slow function but callng it once is not a problem) and use second array for data writing. This second array can then be copied to destination image.</p>

CC BY-SA 4.0
2021-01-26T21:10:33.270Z
Thank you for your message, Sergio. I have been trying to understand what you're describing and the link you shared, but I haven't been successful. Here is my code:
https://pastebin.com/sWpmkhQZ

Would you be able to show some pseudo-code for the 'interpolation' step of this process please? Thank you!
Dr. Pontchartrain
CC BY-SA 4.0
2021-01-27T20:12:38.117Z
Does your code return proper (but not interpolated) color for found pixel in p2?
Sergio
CC BY-SA 4.0
2021-01-21T23:24:21.087Z
2021-01-21T23:24:21.087Z
Sergio
<p>I would like to rotate an bitmap image using math. I have two issues with <a href="https://codepen.io/blastframe/pen/jOMRNKE" rel="nofollow noreferrer">my current implementation</a>: the pixel-by-pixel rotation of the copied bitmap is extremely slow and it is leaving gaps between the pixels.</p>
<p><a href="https://i.sstatic.net/HkrpJ.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/HkrpJ.jpg" alt="Rotated Image" /></a></p>
<p>Is there a faster method for copying the bitmap data at an angle that would not have the gaps? This does not have to be specific to Javascript, so any algorithms in any languages are welcome. Please let me know if you have any questions. Thank you.</p>
<pre class="lang-js prettyprint-override"><code>  cos = Math.cos(-rotation);
  sin = Math.sin(-rotation);

  //setting the center of rotation
  cx = canvas.width/2;
  cy = canvas.height/2;

  for (x = 0; x &lt; canvas.width; x++)
  {
    for (y = 0; y &lt; canvas.height; y++)
    {
      //looping through the original bitmap's pixels
      var imgd = ctx.getImageData(x, y, 1, 1); //getting the pixels' colors 1-by-1
      var pix = imgd.data;
      var red = pix[0];
      var green = pix[1];
      var blue = pix[2];
      var alpha = pix[3];
      //rotating and offsetting the pixels by the new rotated dimensions
      nx = ((cos * (x-cx)) + (sin * (y - cy))+canvas2.width/2); 
      ny = ((cos * (y-cy)) - (sin * (x - cx))+canvas2.height/2);
      //putting the transformed pixel in the new bitmap
      ctx2.putImageData(imgd, nx, ny);
    }
  }
</code></pre>

<transformations><algorithm><2d><rasterizer><javascript>
Rotating a Bitmap
Dr. Pontchartrain
# Rotating a Bitmap

(Asked by: username_0 on 2021-01-21)

I would like to rotate an bitmap image using math. I have two issues with [my current implementation](https://codepen.io/blastframe/pen/jOMRNKE): the pixel-by-pixel rotation of the copied bitmap is extremely slow and it is leaving gaps between the pixels.

[![Rotated Image](https://i.sstatic.net/HkrpJ.jpg)](https://i.sstatic.net/HkrpJ.jpg)

Is there a faster method for copying the bitmap data at an angle that would not have the gaps? This does not have to be specific to Javascript, so any algorithms in any languages are welcome. Please let me know if you have any questions. Thank you.

```js
  cos = Math.cos(-rotation);
  sin = Math.sin(-rotation);

  //setting the center of rotation
  cx = canvas.width/2;
  cy = canvas.height/2;

  for (x = 0; x < canvas.width; x++)
  {
    for (y = 0; y < canvas.height; y++)
    {
      //looping through the original bitmap's pixels
      var imgd = ctx.getImageData(x, y, 1, 1); //getting the pixels' colors 1-by-1
      var pix = imgd.data;
      var red = pix[0];
      var green = pix[1];
      var blue = pix[2];
      var alpha = pix[3];
      //rotating and offsetting the pixels by the new rotated dimensions
      nx = ((cos * (x-cx)) + (sin * (y - cy))+canvas2.width/2); 
      ny = ((cos * (y-cy)) - (sin * (x - cx))+canvas2.height/2);
      //putting the transformed pixel in the new bitmap
      ctx2.putImageData(imgd, nx, ny);
    }
  }

```

**Tags:** transformations, algorithm, 2d, rasterizer, javascript


---

## 1 answers

### Answer by username_1 on 2021-01-21. Score: 2

You have to loop over destination pixels instead of source ones (gaps are the result of looping over source). For each destination pixel you can calculate position in source data, your code for pixel rotation should be inverted. For source pixel you will then get float x and y, on this step you can either round values and sample color from source (and get a bit distorted image), or you can treat fractional parts as parameters for neighbour pixel color interpolation (you get 4 source pixels for each destination pixel and with fractional part you can calculate color in between those pixels). Here is similar question on SO: <https://stackoverflow.com/questions/695080/how-do-i-rotate-an-image>

And the reason why your algorithm is slow is because you use heavy functions to read and write data for each pixel independently. It is generally more favorable to extract source data into some array (it could be same slow function but callng it once is not a problem) and use second array for data writing. This second array can then be copied to destination image.

> **Comments:**
> **username_0**: Thank you for your message, username_1. I have been trying to understand what you're describing and the link you shared, but I haven't been successful. Here is my code: https://pastebin.com/sWpmkhQZ  Would you be able to show some pseudo-code for the 'interpolation' step of this process please? Thank you!  
> **username_1**: Does your code return proper (but not interpolated) color for found pixel in p2?  

---

