生成随机坐标,存储在圆半径内

Posted

技术标签:

【中文标题】生成随机坐标,存储在圆半径内【英文标题】:Generate random coordinates, store within circle radius 【发布时间】:2018-11-06 14:55:06 【问题描述】:

我有一个公式可以生成需要在网格上显示的数字。所有点都应该从原点开始扩展到所有边。

这些应该随机扩展到各个方面,但是,因为公式随着时间的推移而变化,所以要显示的点越来越多。

假设我们有 100 分,我们已经将它们设置在网格上,公式更新,我们有 150 分。图表应该只更新 50 个新的。

有没有办法在 React javascript 中做到这一点?

下面是 Java 中的一个试验,它不存储数字,只是可视化。

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

【问题讨论】:

欢迎来到 Stack Overflow!请使用tour(你会得到一个徽章!)并通读help center,尤其是How do I ask a good question?你最好的选择是做你的研究,search关于SO的相关主题,然后试一试. 如果您在进行更多研究和搜索后遇到困难并且无法摆脱困境,请发布您的尝试minimal reproducible example,并具体说明您卡在哪里。人们会很乐意提供帮助。这里没有什么特别针对 React 的,数学是一样的,JS 拥有 Java 代码用来执行此操作的所有东西...... 你可能想重新发明***,请查看 google maps api 或 mapbox api.. 它是 github 上的开源代码.. 抱歉,不使用 google maps api..canva? 【参考方案1】:

React 可能特别适合这项任务。运行下面的 sn -p 看看它是否工作。

确保 react 只渲染新元素的技巧是在每个渲染的圆圈上使用唯一的 key 道具。未更改的键不会重新渲染。

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'  viewBox="-1 -1 2 2">
          <rect   x="-1" y="-1" fill="#efefef" />
          <circle cx=0 cy=0r=1 fill="#ffffff" />
          points.map((p,index)=>(
            <circle
              key=`$p.x-$p.y-$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>

【讨论】:

很棒的代码!我试着写一些类似的东西,但是,有没有办法让它们首先在中心形成,然后传播到整个圆圈?在此示例中,点分散在整个空间中……这不是我要寻找的东西 @Johnny 当然,通过存储和增加 getRandomPointInCircle 函数中使用的直径 (2) 好的,所以我们基本上创建了另一个公式来操作半径;说 - time2 = radius (random max 5) .. time5 = radius (random up to 20)?【参考方案2】:

我认为你在这里看到的是一个有状态的组件(React 擅长处理它)。这个组件可以存储点的个数和每个位置,每次添加一个新的点,都会调用set state方法,新的State,就是前一个加上新的点。

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 ...
  


【讨论】:

以上是关于生成随机坐标,存储在圆半径内的主要内容,如果未能解决你的问题,请参考以下文章

LeetCode 0478.在圆内随机生成点

数据结构与算法之深入解析“在圆内随机生成点”的求解思路与算法示例

在原点的给定半径范围内和外部生成随机坐标

谷歌面试题:在半径为1的圆中随机选取一点

478. Generate Random Point in a Circle

如何使用 OpenGL 在圆内绘制随机点?