Generate random coordinates, store within circle radius

Question

I have a formula that generates numbers that need to be displayed on a grid. All points should start expanding from origin, equally to all sides.

These should expand randomly to all sides, however, because formula is changing with time, there are more and more points to display.

Let's say we have 100 points and we've set them on grid, formula updates and we have 150 points. Graph should only update with 50 new ones.

Is there any way to do this in React JavaScript?

Below is a trial in Java that does not store numbers, just visualises.

public void getRandomPointInCircle() {
    double t = 2 * Math.PI * Math.random();
    double r = Math.sqrt(Math.random());
    double x = r * Math.cos(t);
    double y = r * Math.sin(t);
    System.out.println(x);
    System.out.println(y);
}

Circle - Trial 2

Answer 1

React may be particularly well suited for this task. Run the snippet below to see it work.

The trick to make sure react only renders the new elements is the use of a unique key prop on each rendered circle. Unchanged keys don't get re-rendered.

 class App extends React.Component { constructor() { super(); this.state = { points: [] }; } getRandomPointInCircle() { const t = 2 * Math.PI * Math.random(); const r = Math.sqrt(Math.random()); const cx = r * Math.cos(t); const cy = r * Math.sin(t); const fill = '#'+(Math.random()*0xFFFFFF<<0).toString(16); return {cx, cy, fill, r:"0.02"}; } addPoints = () => { const points = this.state.points.concat( new Array(20).fill().map(p => this.getRandomPointInCircle()) ); this.setState({points}) } render() { const {points} = this.state; return ( <div> <button onClick={this.addPoints}>Add 20 points</button><br/> <svg style={{overflow:'visible'}} height="200px" viewBox="-1 -1 2 2"> <rect width="2" height="2" x="-1" y="-1" fill="#efefef" /> <circle cx={0} cy={0}r={1} fill="#ffffff" /> {points.map((p,index)=>( <circle key={`${px}-${py}-${index}`} {...p} /> ))} </svg> </div> ); } } // Render it ReactDOM.render( <App />, document.getElementById("react") ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="react"></div> 

Answer 2

I think what you are looking here is having a stateful component (React is good at handling that). This component can store the number of points and each one of the positions, each time you add a new point, you will call the set state Method with the new State, which will be the previous one plus the new points.

class Circle extends React.Component {

  constructor(props) {
    this.state = {points : [], npoints : 0}
  }

  render() {
    return (
      <div className="circle">... implement this render view ...
        <Points data={this.state.points}></Points>
      </div>
    );
  }

  addNewPoints(){
    let newPoints = [...this.state.points];
    newPoints.push(this.generateNewPoints());
    newState = {points :newPoints , npoints : newPoints.length}
    this.setState(newState);
  } 

  generateNewPoints(){
    //getRandomPointInCircle ...
  }

}