Polys tend to shrink on rotation
So my problem lies as this. Im drawing polys in canvas using javascript. Im also trying to rotate those polys based on any given point using sin/cos. Im avoiding translate and canvas rotate. Rotation happens on mouse movement.
Thing is the results come back quite weird. My polys tend to shrink for some reason and i cant figure out why.
My guess would be somewhere around the math action sin/cos combined with how coords are set around the matrix? Maybe i should round values or ? Im not sure and too confused.
The following code is functional. If you can run the code you can get what i mean Any help or explanation on why is this happening will be highly appreciated. Cheers.
<script type="text/javascript">
var set =
{
canvas:'canvas',
fps:1000/60
}
var gObjects = [];
function deg2rads(deg) { return deg*Math.PI/180; }
function drawPoly(object)
{
if (object.vertexPoints)
{
var ctx = document.getElementById(set.canvas).getContext('2d');
ctx.beginPath();
ctx.moveTo(object.vertexPoints[0][0],object.vertexPoints[0][1]);
ctx.fillStyle = '#f00';
for (i=1;i<objec开发者_开发百科t.vertexPoints.length;i++)
{
ctx.lineTo(object.vertexPoints[i][0],object.vertexPoints[i][1]);
}
ctx.closePath();
ctx.fill();
}
}
function block(vertex)
{
if (vertex) { this.vertexPoints = vertex; }
}
function rotate(object,degrees) {
vPoint = object.vertexPoints;
for (i=0;i<vPoint.length;i++)
{
rads = deg2rads(degrees);
pX= 300;
pY= 540;
object.vertexPoints[i][0] = Math.cos(rads) * (vPoint[i][0] - pX) - Math.sin(rads) * (vPoint[i][1]-pY) + pX;
object.vertexPoints[i][1] = Math.sin(rads) * (vPoint[i][0] - pX) + Math.cos(rads) * (vPoint[i][1]-pY) + pY;
}
}
function mainGameLoop ()
{
var ctx = document.getElementById(set.canvas).getContext('2d');
ctx.clearRect(0,0,600,600);
drawPoly(gObjects[0]);
var gameTimer = setTimeout(mainGameLoop,set.fps);
}
function iNitCanvas() {
var test = [[100,500],[500,500],[500,580],[100,580]];
var obj = new block(test);
gObjects[0] = new block(test);
mainGameLoop();
}
function mouseCoords() {
rotate(gObjects[0],-10);
}
</script>
<body onmousemove="mouseCoords();" onLoad="iNitCanvas();">
<input type="button" id="showCube" onclick="iNit();" value="GO!"/>
<canvas id="canvas" width="600" height="600" style="border:1px solid black;"></canvas>
</div>
</body>
Your math is fine. The culprit hides in these two lines:
object.vertexPoints[i][0] = Math.cos(rads) * (vPoint[i][0] - pX) - Math.sin(rads) * (vPoint[i][1]-pY) + pX;
object.vertexPoints[i][1] = Math.sin(rads) * (vPoint[i][0] - pX) + Math.cos(rads) * (vPoint[i][1]-pY) + pY;
The second line uses vPoint[i][0], which was already modified by the first line (vPoint and object.vertexPoints point to the same array.)
Replacing these two lines with the following prevents the shrinkage:
var point = [ vPoint[i][0], vPoint[i][1] ];
object.vertexPoints[i][0] = Math.cos(rads) * (point[0] - pX) - Math.sin(rads) * (point[1]-pY) + pX;
object.vertexPoints[i][1] = Math.sin(rads) * (point[0] - pX) + Math.cos(rads) * (point[1]-pY) + pY;
Thanks for your answer in first place :) I managed to figure this out yesterday, after a couple of hours of head banging. I noticed it was all happening there on my arrays. Think its a common mistake also.
Anyways i replaced my rotate function with this :
function rotate(object,degrees) {
if (object.vertexPoints)
{
var rads = deg2rads(degrees);
var Point = new Array(object.vertexPoints.length);
for (i=0;i<Point.length;i++) { Point[i] = new Array(2); }
for (i=0;i<object.vertexPoints.length;i++)
{
pX= 300;
pY= 540;
Point[i][0] = Math.cos(rads) * (object.vertexPoints[i][0] - pX) - Math.sin(rads) * (object.vertexPoints[i][1]-pY) + pX;
Point[i][1] = Math.sin(rads) * (object.vertexPoints[i][0] - pX) + Math.cos(rads) * (object.vertexPoints[i][1]-pY) + pY;
}
return Point;
}
}
function mouseCoords(e) {
if ((e||event).clientY<set.cursorY)
{
set.cursorY=(e||event).clientY;
gObjects[0].vertexPoints = rotate(gObjects[0],-1);
}
}
and got it all working. though i think your code is more efficient than what i wrote. Again cheers for the valuable info pal :)
加载中,请稍侯......
精彩评论