_Rotate Images in MS Paint (calculator)

_rotate-images-in-ms-paint-calculator.markdown

_Rotate Images in MS Paint (calculator)

This is What Actually Happens Every Time Your Computer Rotates a Photo (calculator)

Original Project: https://gist.github.com/laithserhan/b76baeccd2269965217b081d72bb75ab

Source: https://petapixel.com/2017/04/05/actually-happens-every-time-computer-rotates-photo/

A Pen by Laith Serhan on CodePen.

License.

index.html

<hr>

<cite class="">Source: <a href="https://petapixel.com/2017/04/05/actually-happens-every-time-computer-rotates-photo/" target="_blank">This is What Actually Happens Every Time Your Computer Rotates a Photo</a></cite>

<hr>

<ol>
<legend class="">Excerpt formula from article:<legend><br>

<li>horizontal skew by the desired angle of rotation (we’ll call it “x”),</li>
<li>then vertical resize by 1/cos2(x),</li>
<li>then vertical skew by -x,</li>
<li>then horizontal and vertical stretch by cos(x).</li>
</ol>

<hr>

<ol>
<legend>Steps in MS Paint: <button onclick="MSPaintRotateCalc()">Enter Rotation Angle...</button><legend><br>

<li id="x"></li><br>

<li id="b"></li>
<cite>i.e. 133... would be 133.</cite><br><br>

<li id="c"></li><br>

<li id="d"></li>
<cite>i.e. 866... would be 87.</cite>
</ol>

<hr>

script.js

function MSPaintRotateCalc() {
//with(Math) {
    // step 1: horizontal skew by the desired angle of rotation.
    var x = prompt("Please enter rotation angle\nMin -89 to +89 Max, however up to 45 is best", "30");
    // x = +x.toFixed(3);
    
    // step 2: vertical resize by 1/cos2(x).
    var aa = Math.cos(x/180*Math.PI);
    var aa = Math.pow(aa, 2);
    var aa = (1/aa);
    var b = aa;
    // b = +b.toFixed(3);
    b = parseInt(b.toString().replace(".", ""));
    
    // step 3: vertical skew by -x.
    var c = -x;
    //c = +c.toFixed(3);
    
    //step 4: horizontal and vertical stretch by cos(x).
    var d = Math.cos(x/180*Math.PI);
    // d = +d.toFixed(2);
    d = parseInt(d.toString().replace(".", ""));
//}

document.getElementById("x").innerHTML = "Skew Horizontal by: " + x + " Degrees";

document.getElementById("b").innerHTML = "Stretch Vertical by: " + b + " %";

document.getElementById("c").innerHTML = "Skew Vertical by : " + c + " Degrees";

document.getElementById("d").innerHTML = "Stretch Horizontal and Vertical by: " + d + " %";
}

style.css

.hidden { display: none; }