Rotate point around Origin
by skibulk
HTML
<div id="marker"></div>
CSS
html, body {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div{
position: absolute;
width: 3px;
height: 3px;
background: black;
}
JavaScript
console.log('===== START =====');
var marker = document.getElementById('marker');
var a = {
x: 50,
y: 0
};
function rotate(ax, ay, bx, by, angle) {
var rad = (Math.PI / 180) * angle,
cos = Math.cos(rad),
sin = Math.sin(rad),
run = bx - ax,
rise = by - ay,
cx = (cos * run) + (sin * rise) + ax,
cy = (cos * rise) - (sin * run) + ay;
return {
x: cx,
y: cy
};
}
//for (var i = 0; i <= 72; i++) {
//}
setInterval(function(event) {
//console.log(a.x, a.y);
a = rotate(50, 50, a.x, a.y, 5);
marker.style.left = a.x + 'px';
marker.style.top = a.y + 'px';
}, 20);