如何生成这些 "stars"（省略号）的随机数量（有限制）？

Question

function setup() {
  createCanvas(5000, 2100);
  randomX = random(100, 1000)
  randomY = random(100, 1000)
  randomSpeed = random(1, 10)
  randomSize = random(10, 100)
}
 function draw() {
      background(0);
      fill(255)
      ellipse(randomX, randomY, randomSize)
      randomX = randomX + randomSpeed
      if (randomX > 5000) {
        randomX = 0
          }
}

在 draw() 函数中，我需要在 canvas 上随机绘制一个椭圆，有限制地在 canvas 上绘制星夜效果，我该怎么做？

Answer 1

如果我没理解错的话，您想在 canvas 上随机绘制一串椭圆。我已经回答假设这就是你要问的。如果这不是您想要的，我们深表歉意。

这个程序所做的是创建两个列表来保存关于省略号的数据。在 setup() 中，我们选择随机数量的椭圆来绘制。我们制作了那么多随机大小和位置，然后将它们放入列表中。当需要绘制椭圆时，我们循环遍历包含有关它们的信息的列表，并使用它来绘制多个椭圆。


const ellipseMinSize = 1;
const ellipseMaxSize = 10;
const ellipseMinAmount = 10;
const ellipseMaxAmount = 100;

// Create some lists so we can remember where the ellipses are and how big they are
var ellipseSizes = [];
var ellipsePositions = [];

function setup() {
    createCanvas(500, 500);

    // Choose an amount of ellipses to make
    var ellipseAmount = random(ellipseMinAmount, ellipseMaxAmount);

    for (var i = 0; i < ellipseAmount; i ++) {
        // Choose a random size and position, then remember those
        var ellipseSize = random(ellipseMinSize, ellipseMaxSize);
        var ellipsePosition = createVector(random(0, width), random(0, height));
        ellipseSizes.push(ellipseSize);
        ellipsePositions.push(ellipsePosition);
    }
}

function draw() {
    background(0);
    fill(255);

    // Then loop through the remembered positions and sizes, and draw an ellipse with those parameters
    for (var i = 0; i < ellipseSizes.length; i ++) {
        var ellipseSize = ellipseSizes[i];
        var ellipsePosition = ellipsePositions[i];
        ellipse(ellipsePosition.x, ellipsePosition.y, ellipseSize, ellipseSize);
    }
}

如何生成这些 "stars"（省略号）的随机数量（有限制）？

How to spawn a random amount (with limits) of these "stars"(ellipses)?

javascript

p5.js