Change the rotating speed of the circle when the mouse moves using javascript

158 views Asked by At

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();

});
0

There are 0 answers