Basically, I have two circles rotating in a certain speed. I want to change the speed of the rotating. When the user's mouse gets farer from the center of the screen, it will rotating faster. And when the user's mouse gets closer to the center of the screen, it will rotate slower. Now what I have done is making them rotating, but they seem rotate in the same speed.
html:
<canvas></canvas>
css:
canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
background: #FFFFFF;
}
js:
$(document).ready(function(){
var mX, mY, distance, dotSpeed;
var numDots = 500,
n = numDots,
leftCurrDot,
rightCurrDot,
dotRad = 2,
maxRad = 150,
minRad = 30,
radDiff = maxRad-minRad,
leftDots = [],
rightDots = [],
PI = Math.PI,
leftCenterPt = {x:0, y:0},
rightCenterPt = {x:0, y:0};
// Create a canvas
var cvs = document.createElement('canvas'),
context = cvs.getContext("2d");
$(document).mousemove(function(e){
mX = e.pageX;
mY = e.pageY;
distance = calculateDistance(mX, mY);
rightCurrDot.speed = maping(distance, 0, 700, 0.005, 0.1);
leftCurrDot.speed = maping(distance, 0, 700, 0.005, 0.1);
});
function calculateDistance(mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - window.innerWidth / 2, 2) + Math.pow(mouseY - window.innerHeight / 2, 2)));
}
// Function to map a range
function maping (num, fromMin, fromMax, toMin, toMax) {
return (num - fromMin) / (fromMax - fromMin) * (toMax - toMin) + toMin;
}
cvs.width = window.innerWidth;
cvs.height = window.innerHeight;
document.body.appendChild(cvs);
resizeHandler();
window.onresize = resizeHandler;
while (n--) {
leftCurrDot = {};
leftCurrDot.radius = minRad+Math.random()*radDiff;
leftCurrDot.ang = (1-Math.random()*2)*PI;
leftCurrDot.speed = (1-Math.random()*2) * 0.5;
leftCurrDot.fillColor = "rgb(226, 30, 58)";
leftDots.push(leftCurrDot);
rightCurrDot = {};
rightCurrDot.radius = minRad+Math.random()*radDiff;
rightCurrDot.ang = (1-Math.random()*2)*PI;
rightCurrDot.speed = (1-Math.random()*2);
rightCurrDot.fillColor = "rgb(30, 30, 226)";
rightDots.push(rightCurrDot);
}
function drawPoints (e) {
n = numDots;
var _leftCenterPt = leftCenterPt,
_rightCenterPt = rightCenterPt,
_context = context,
dLeftX = 0,
dLeftY = 0,
dRightX = 0,
dRightY = 0;
_context.clearRect(0, 0, cvs.width, cvs.height);
// draw dots on the screen
while (n--) {
leftCurrDot = leftDots[n];
dLeftX = _leftCenterPt.x+Math.sin(leftCurrDot.ang)*leftCurrDot.radius;
dLeftY = _leftCenterPt.y+Math.cos(leftCurrDot.ang)*leftCurrDot.radius;
leftCurrDot.ang += leftCurrDot.speed;
_context.fillStyle = leftCurrDot.fillColor;
_context.fillRect(dLeftX, dLeftY, dotRad, dotRad);
rightCurrDot = rightDots[n];
dRightX = _rightCenterPt.x+Math.sin(rightCurrDot.ang)*rightCurrDot.radius;
dRightY = _rightCenterPt.y+Math.cos(rightCurrDot.ang)*rightCurrDot.radius;
rightCurrDot.ang += rightCurrDot.speed;
//console.log(currDot);
_context.fillStyle= rightCurrDot.fillColor;
_context.fillRect(dRightX, dRightY, dotRad, dotRad);
}
console.log(leftCurrDot.speed);
window.requestAnimationFrame(drawPoints);
}
function resizeHandler(){
var box = cvs.getBoundingClientRect();
var w = box.width;
var h = box.height;
cvs.width = w;
cvs.height = h;
leftCenterPt.x = Math.round(w/2 - minRad - ((maxRad - minRad)/2));
leftCenterPt.y = Math.round(h/2);
rightCenterPt.x = Math.round(w/2 + minRad + ((maxRad - minRad)/2));
rightCenterPt.y = Math.round(h/2);
}
drawPoints();
});