javascript - 如何生成没有自由空间的随机非重叠多边形

Question

我需要生成没有自由空间的随机非重叠多边形 (。它们可以有任何形状。

我唯一找到的是一个使用 p5.js 仅创建非重叠圆圈但存在空闲空间的示例。

有人知道怎么做吗？

// Uses P5.js for canvas creation and drawing
function setup() {
  var circles = [],
      circle = {},
      overlapping = false,
      NumCircles = 4000,
      protection = 1000,
      counter = 0,
      canvasWidth = window.innerWidth,
      canvasHeight = window.innerHeight;

  createCanvas(canvasWidth, canvasHeight);

  // populate circles array
  // brute force method continues until # of circles target is reached
  // or until the protection value is reached
  while (circles.length < NumCircles &&
         counter < protection) {
    circle = {
      x: random(width),
      y: random(height),
      r: random(3, 36)
    };
    overlapping = false;
    
    // check that it is not overlapping with any existing circle
    // another brute force approach
    for (var i = 0; i < circles.length; i++) {
      var existing = circles[i];
      var d = dist(circle.x, circle.y, existing.x, existing.y)
      if (d < circle.r + existing.r) {
        // They are overlapping
        overlapping = true;
        // do not add to array
        break;
      }
    }
    
    // add valid circles to array
    if (!overlapping) {
      circles.push(circle);      
    }
    
    counter++;
  }
  
  // circles array is complete
  // draw canvas once
  background("#233")
  fill("#2AC1A6");
  noStroke();
  for (var i = 0; i < circles.length; i++) {
    ellipse(circles[i].x, circles[i].y, 
            circles[i].r*2, circles[i].r*2);
  }
}

* {
  padding: 0;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>

Answer 1

你的问题不是很具体...

random non-overlapping polygons without free spaces

矩形是多边形，让我们制作一堆具有随机大小和颜色的多边形

这里是一个起点:

canvas = document.getElementById('c');
ctx = canvas.getContext('2d');

var colors = ["red", "blue", "orange", "green", "yellow"]
h = Math.floor(canvas.height / Math.floor(Math.random() * 15 + 4))

for (y = 0; y < canvas.height; y += h) {
  w = Math.floor(canvas.width / Math.floor(Math.random() * 15 + 4))
  for (x = 0; x < canvas.width; x += w) {    
    c = colors[Math.floor(Math.random() * 10) % 5]
    draw(x, y, w, h, c)
  }
}

function draw(x, y, w, h, color) {
  ctx.beginPath();
  ctx.rect(x, y, w, h)
  ctx.stroke();
  ctx.fillStyle = color
  ctx.fill();
}

<canvas id="c"></canvas>

---

这是一个帮助您绘制“随机”多边形的函数:

var ctx = document.getElementById('c').getContext('2d');

function polygon(sides, size, Xcenter, Ycenter, offset) {
  ctx.beginPath();
  ctx.moveTo(Xcenter + size * Math.cos(offset), Ycenter + size * Math.sin(offset));
  for (var i = 1; i <= sides; i += 1) {
    x = Xcenter + size * Math.cos(i * 2 * Math.PI / sides +offset)
    y = Ycenter + size * Math.sin(i * 2 * Math.PI / sides +offset)
    ctx.lineTo(x, y);
  }
  ctx.stroke();
}

arr = [3, 4, 5, 6, 7];
arr.sort(() => Math.random() - 0.5);
for (var i = 1; i <= 5; i += 1) {
  offset = Math.random() * 5
  polygon(arr[i-1], 40, 85*i, 60, offset)
}

<canvas id="c" width=600></canvas>