Как создать случайное количество (с ограничениями) этих «звезд» (эллипсов)?

#javascript #p5.js

#javascript #p5.js

Вопрос:

 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() есть эллипс, который мне нужно нарисовать на холсте случайное количество раз, С ОГРАНИЧЕНИЕМ, на холсте, чтобы создать эффект звездной ночи, как мне это сделать?

Ответ №1:

Если я вас правильно понял, вы хотите нарисовать кучу эллипсов на холсте в случайных позициях. Я ответил, предполагая, что это то, о чем вы спрашиваете. Извиняюсь, если это не то, что вы хотите.

Что делает эта программа, так это создает два списка, которые содержат данные об эллипсах. В 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);
    }
}