如何使用数学随机绘制圆形图？

Posted 2023-03-06

【中文标题】如何使用数学随机绘制圆形图？

【英文标题】：How to Plot circle graph using math Random?

【发布时间】：2022-01-15 09:27:50

【问题描述】：

我正在使用 javascript 用 css 制作一个闪闪发光的动画。

<div class="r1">       
    <img src="star.png">     
</div>

每个点

.dotter
  width: 4px;
  height: 4px;
  background: blue;
  border-radius: 50px;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(0,0);

Javascript

const block = document.querySelector('.r1');
const css = document.createElement('style');

function creator()
  var newKey = new String;
  for(i=0;i<=100;i++)
    var dot = document.createElement('div');
    dot.classList.add('dotter');
    dot.style.animation = `fadeOut$i 1s linear infinite`;
    var keyframes = `@keyframes fadeOut$i from transform: translate(0,0) scale(1);opacity: 1;to transform: translate($newRandom()[0]%,$newRandom()[1]%) scale(0.1);opacity: 0;`;
    block.appendChild(dot);
    newKey += keyframes;
  
  css.innerText = newKey;
  document.getElementsByTagName('body')[0].appendChild(css);
;

creator();

function newRandom()
  const n1p1 = Math.random()*900;
  const n1p2 = Math.random()*(-900);
  
  const n2p1 = Math.random()*(-900);
  const n2p2 = Math.random()*900;

  const n1 = Math.random() < 0.5 ? n1p1 : n1p2;
  const n2 = Math.random() < 0.5 ? n2p1 : n2p2;
  
  const m1 = Math.abs(n1);
  const m2 = Math.abs(n2);

  if( m1>=850 || m2>850 )
    if((m1 + m2) >= 900)
      return [n2,n1];
    else
      return newRandom();
    
  else
    return newRandom();
  
;

现在的问题是，当我运行代码时，火花最终会在图像外部形成一个正方形，我需要一个数值解决方案来解决如何使火花最终形成一个圆形。

【问题讨论】：

这个视频可能会有所帮助：youtube.com/watch?v=4y_nmpv-9lI

【参考方案1】：

如果有帮助，我更改了你的 NewRandom() 函数来实现这一点

const blocks = document.querySelectorAll('.r');
const css = document.createElement('style');

function creator() 
  var newKey = new String;
  blocks.forEach(function(block) 
    for (i = 0; i <= 100; i++) 
      var dot = document.createElement('div');
      dot.classList.add('dotter');
      dot.style.animation = `fadeOut$i 1s linear infinite`;
      var keyframes = `@keyframes fadeOut$i from transform: translate(0,0) scale(1);opacity: 1;to transform: translate($newRandom()[0]%,$newRandom()[1]%) scale(0.1);opacity: 0;`;

      block.appendChild(dot);

      newKey += keyframes;
    
  );
  css.innerText = newKey;
  document.getElementsByTagName('body')[0].appendChild(css);
;

creator();

function newRandom() 
  const angle = Math.random() * 360;
  const dist = Math.random() * 2000;
  const x = Math.cos(angle) * dist;
  const y = Math.sin(angle) * dist;

  return [x, y];
;

.dotter 
  width: 4px;
  height: 4px;
  background: blue;
  border-radius: 50px;
  position: absolute;
  transform: translate(0, 0);

<div class="r">
  <img src="star.png">
</div>
<br><br><br><br><br>

<div class="r">
  <img src="star.png">
</div>