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

【问题标题】：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

标签： javascript css animation

【解决方案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>

【讨论】：