mercredi 19 décembre 2018

How to crate a random path for a ball to follow with a variable speed?

I'm working on a frontend project with angular 6, d3.js and svg. One of the features is that on the screen there is a circle (actually an ellipse but for simplicity a circle). In this circle there is a ball that moves in the circle. The ball most go to a specific point in the circle at a variable speed.

This is the code I use to get a random point in the circle, but I don't know how to create a direction for the ball to go to and if it reaches that point to create another random point so it goes infinity random.

private createRandomPointInEllipse() {
var svgRoom = document.getElementById('room').getBoundingClientRect();
var width = svgRoom.width;
var height = svgRoom.height;

if (width < height) { //width is range
  this.randomPointX = width * Math.sqrt(Math.random()) * Math.cos(Math.random() * 2 * Math.PI);
  this.randomPointY = width * Math.sqrt(Math.random()) * Math.sin(Math.random() * 2 * Math.PI);
} else { // height is range
  this.randomPointX = height * Math.sqrt(Math.random()) * Math.cos(Math.random() * 2 * Math.PI);
  this.randomPointY = height * Math.sqrt(Math.random()) * Math.sin(Math.random() * 2 * Math.PI);
}

}

later the points are given by another application so that it is a circle is for now not a problem.




Aucun commentaire:

Enregistrer un commentaire