lundi 1 octobre 2018

How to randomize the speed of rotating circle?

I have two circles rotating round the circle and I would like the circle to change the speed at random after passing one revolution.Both circle should be at different speed or they might be the same speed (then collision will occurs). For example, during first run, both circles are moving at 10m/s and after it reaches end of the revolution,they will collide.Let's say after the revolution, it changes circle 1 to 15m/s and circle 2 to 30m/s , then they won't collide.I would like to know how to achieve this. This is just an idea of what i am trying to achieve. It would be even better if the speed is randomized after every revolution.

Any help would be appreciated.

Code:

(function() {
  var ctx = document.getElementById("canvas").getContext("2d"),
    x1 = 160,
    y1 = 120,
    x2 = 330,
    y2 = 280,
    radius = 20;
  angle = 0,
    velX = 0,
    velY = 0,
    thrust = 3,
    rotation = 0;

  function draw() {
    velX = Math.cos(angle * Math.PI / 180) * thrust;
    velY = Math.sin(angle * Math.PI / 180) * thrust;
    x1 += velX;
    y1 += velY;
    angle += 1;
    ctx.fillStyle = "#000";
    ctx.clearRect(0, 0, 550, 400);
    ctx.beginPath();
    ctx.arc(x1, y1, radius, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();

    draw2();
    setTimeout(function() {
      draw()
    }, 30);
  }

  function draw2() {
    velX = Math.cos(angle * Math.PI / 180) * thrust;
    velY = Math.sin(angle * Math.PI / 180) * thrust;
    x2 += -velX;
    y2 += -velY;
    angle += 1;
    ctx.fillStyle = "#80ced6";
    ctx.beginPath();
    ctx.arc(x2, y2, radius, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();

    collisiondetection();
  }

  var distance = 0;
  var totalcounter = 0;
  var collide = false;

  function collisiondetection() {
    distance = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));

    if (distance < radius * 2) {
      if (collide == false) {
        totalcounter = totalcounter + 1;
        document.getElementById("cTotal").innerHTML = "Total collisions:" + totalcounter;
        collide = true;
      }

    } else {
      collide = false;
    }

  }
  draw();
})();
<canvas id="canvas" width="550" height="400" style="background:#eee;"></canvas>
<span id="cTotal">Total collisions: </span>



Aucun commentaire:

Enregistrer un commentaire