2d transformation alone z-axis.

Question

I need constant rotation but the square automatically shrinks, help me to fix it.

https://code.sololearn.com/WsuEXwjcTjgG/?ref=app

Answer 1

Don't modify your reference points. You recalculate the rotation from the rotated frame. I suspect that rounding issues shrink your square...

const Loop = () => {
san.clearRect(0, 0, W, H);
Angle += .01;
q = [0,0,0,0,0,0,0,0]
// transformation formula

for(let i=0; i<p.length; i+=2) {
q[i] = p[i]*Math.cos(Angle) - p[i+1]*Math.sin(Angle); // x axis

q[i+1] = p[i]*Math.sin(Angle) + p[i+1]*Math.cos(Angle); // y axis
}

// draw points

san.beginPath();
san.lineWidth=5;
for(let i=0; i<p.length; i+=2) {
san.lineTo(300 + q[i], 300+ q[i+1])
}
san.closePath();
san.stroke();
webkitRequestAnimationFrame(Loop);
}

Answer 2

Thank you so much :)