CODEWITHSUNDEEP
javascriptmathgeometry
user1537360
user1537360

Reputation: 4811

Plotting points on segment of circumference

This one requires a bit of visualisation, so sorry if my explanation sucks.

So, I have a central point at 0,0. From this point, I am plotting random points on its circumference, at a radius of 350 pixels (random number). For this I am using this code:

var angle = Math.random()*Math.PI*2;
var x = Math.cos(angle)*radius;
var y = Math.sin(angle)*radius;

x+=parent.position.x;
y+=parent.position.y;

The parent.position this is because each point that is plotted also acts as a central node, which has children that act as nodes and so on. This just sets the position of the new node relative the position of its parent.

So this code works perfectly well for the central node. The problem is that once you've branched away from the centre, you want to continue moving in a particular direction to avoid a big cluster of nodes interfering with each other. So, whereas this code plots a point on the circumference, I need to be able to plot a point on a segment of the circumference. I'm thinking maybe about a third of the circumference should be accessible. The other obstacle is that this has to be the CORRECT segment of the circumference i.e If the nodes are branching upwards, I don't want the segment to be the bottom half of the circumference, the branch needs to continue moving in the upwards direction.

I can establish a general direction based on the position of the new parent node relative to the position of its parent. But does anyone have any ideas of how to use this data to reduce the field to the a segment in this direction?

Let me know if that made no sense, it's kinda hard to explain without diagrams.

Upvotes: 0

Views: 400

Answers (1)

axelcdv
axelcdv

Reputation: 753

I think one easy way of doing that would be to split your circle in n segments (each covering 2*PI / n angle). You could set n to whatever you want, depending on how precise you want to be. Then when you calculate a new point x, first get the segment in which x.parent is (relative to its own parent), and use that to put x in the same section wrt x.parent. You could then have something like this:

var getSection = function(point) {
  var parent = point.parent;
  var angle = Math.acos((point.x - parent.x) / radius) % (Math.PI*2);
  var section = Math.floo(angle / (Math.PI * 2 / n))
  return section;
}

var section = getSection(parent); // return the index of the section
var angle = (Math.random() + section) * Math.PI * 2 / n
var x = Math.cos(angle)*radius;
var y = Math.sin(angle)*radius;

x+=parent.position.x;
y+=parent.position.y;

Upvotes: 2

Related Questions