WN - Basbyte i koordinatsystem

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Basbyte i koordinatsystem (https://www.wn.se/forum/showthread.php?t=25254)

Någon som kan peka mig i rätt riktning för att göra ett basbyte i ett koordinatsystem? Behöver implementera det i javacript så ett kodexempel i ett vanligt programmeringspråk vore kanon (dvs. inte Matlab, Lisp eller något annat obskyrt :)

5 poäng linjär algebra är inte mycket värt när man sålt böckerna.

Kan du ge något exempel eller säga något om "före" och "efter"? 2D eller 3D? Är t.ex. polära koordinater inblandade eller är det bara kartesiska?

Jag har en rektangel som är roterad ett godtyckligt antal grader medurs i ett 2D-koordinatsystem. Det jag vill få fram är ett nytt koordinatsystem där rektangelns sidor är parallella med de nya koordinataxlarna. Dvs. om rektangeln är roterad 5 grader medurs från början kommer X-axeln i det nya koordinatsystemet också luta 5 grader medurs i förhållande till den ursrungliga X-axeln.

Stort tack på förhand!

Edit: Typiskt att jag sålde matteboken för 4 veckor sedan när den legat orörd i 5 år.

Här är ett förslag. Har dock inte testat och kontrollerat, så jag kan förstås ha gjort någon grov miss...

Är för trött för att orka fundera ut något bra sätt att "leverera" resultatet från funktionen, men här är en liten skiss i alla fall.

x och y är koordinater i gamla koordinatsystemet, angle är vinkeln att rotera, xRotated och yRotated är de nya koordinaterna.

Kod:

function rotate(x, y, angle) {

   r = Math.sqrt(x*x + y*y);

   theta = Math.atan2(x, y) + angle;



   xRotated = r * Math.cos(theta);

   yRotated = r * Math.sin(theta);

}

Glömde bort det här med grader och radianer B)

Utgår från att Math-funktionerna räknar med radianer. En reviderad variant blir då

Kod:

function rotateX(x, y, degrees)

  r = Math.sqrt(x*x + y*y);

  radians = degrees * Math.PI / 180;

  theta = Math.atan2(x, y) + radians;

  return r * Math.cos(theta);

}



function rotateY(x, y, degrees)

  r = Math.sqrt(x*x + y*y);

  radians = degrees * Math.PI / 180;

  theta = Math.atan2(x, y) + radians;

  return r * Math.sin(theta);

}

Men som sagt, jag har inte testat alls...

Ser ut som att det jag slängde ihop igår kväll fungerar :)

Kod:

<html>

<head>

<title>Test</title>

</head>

<body>

<script>



function rotateX(x, y, degrees) {

  r = Math.sqrt(x*x + y*y);

  radians = degrees * Math.PI / 180;

  theta = Math.atan2(x, y) + radians;

  return r * Math.cos(theta);

}



function rotateY(x, y, degrees) {

  r = Math.sqrt(x*x + y*y);

  radians = degrees * Math.PI / 180;

  theta = Math.atan2(x, y) + radians;

  return r * Math.sin(theta);

}



angle = 30;

offset = 300;



document.write('<div style="position: absolute; top: ' + offset + 'px; left: ' + offset + 'px; color: gray;">*</div>');



top1 = offset + 100;

left1 = offset;

top2 = rotateY(left1 - offset, top1 - offset, angle) + offset;

left2 = rotateX(left1 - offset, top1 - offset, angle) + offset;

document.write('<div style="position: absolute; top: ' + top1 + 'px; left: ' + left1 + 'px; color: gray;">*</div>');

document.write('<div style="position: absolute; top: ' + top2 + 'px; left: ' + left2 + 'px; color: red;">*</div>');



top1 = offset - 100;

left1 = offset;

top2 = rotateY(left1 - offset, top1 - offset, angle) + offset;

left2 = rotateX(left1 - offset, top1 - offset, angle) + offset;

document.write('<div style="position: absolute; top: ' + top1 + 'px; left: ' + left1 + 'px; color: gray;">*</div>');

document.write('<div style="position: absolute; top: ' + top2 + 'px; left: ' + left2 + 'px; color: green;">*</div>');



top1 = offset;

left1 = offset + 100;

top2 = rotateY(left1 - offset, top1 - offset, angle) + offset;

left2 = rotateX(left1 - offset, top1 - offset, angle) + offset;

document.write('<div style="position: absolute; top: ' + top1 + 'px; left: ' + left1 + 'px; color: gray;">*</div>');

document.write('<div style="position: absolute; top: ' + top2 + 'px; left: ' + left2 + 'px; color: yellow;">*</div>');



top1 = offset;

left1 = offset - 100;

top2 = rotateY(left1 - offset, top1 - offset, angle) + offset;

left2 = rotateX(left1 - offset, top1 - offset, angle) + offset;

document.write('<div style="position: absolute; top: ' + top1 + 'px; left: ' + left1 + 'px; color: gray;">*</div>');

document.write('<div style="position: absolute; top: ' + top2 + 'px; left: ' + left2 + 'px; color: blue;">*</div>');



</script>



</body>

</html>