Рисование непересекающихся точечных рисунков - PullRequest
Новая
       29

Рисование непересекающихся точечных рисунков

0 голосов
/ 06 марта 2020

Какой самый эффективный способ в JS для рисования случайных точечных рисунков с гарантией, что любые две точки НЕ перекрываются?

Мой JS код: 

var radius = 3.0; //radius of ALL dots
var vertical_max = 400;
var horz_max = 800;
var orangeDotsArray = [];

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
context.clearRect(1, 1, canvas.width, canvas.height);

const centerOrange = {x: Math.random()*800,y: Math.random()*400};
const centripetal = Math.random() * (20) + 1;
const distFromCenter = Math.floor(Math.random() * 100) + 10;

var createOrangeDotsCircle = function () {
  for (var i = 0; i <= orangeCircleNum; i++) {
     context.beginPath();
     const dist = (Math.random() * centripetal) * distFromCenter;
     const angle = Math.random() * Math.PI * 2;
     var rand_x = dist * Math.cos(angle) + centerOrange.x;
     var rand_y = dist * Math.sin(angle) + centerOrange.y;
     context.arc(rand_x, rand_y, radius, 1, 2 * Math.PI);
     context.fill();
     context.closePath();
     orangeDotsArray.push(rand_x);
     orangeDotsArray.push(rand_y);
     }  
  }
createOrangeDotsCircle();

Мой HTML: 

<canvas id="canv" width=800 height=400>
<div class="shape"></div>
</canvas>

Мой CSS: 

#canv {
  outline: black 3px solid;
}

I Хотелось бы, чтобы общее число точек равнялось «orangeCircleNum», поэтому в идеале не просто выбрасывать экземпляров перекрывающихся пар, но вместо этого повторять попытку, пока общее количество точек на экране = orangeCircleNum.

...