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