Есть ли способ бесконечно добавлять по одному пузырьку за раз на холсте, используя готовый класс Bubble? - PullRequest
Новая
       18

Есть ли способ бесконечно добавлять по одному пузырьку за раз на холсте, используя готовый класс Bubble?

0 голосов
/ 04 мая 2020

Вот ссылка на мой проект: https://editor.p5js.org/darkknightishaan/sketches/mXgN5Z_72

Сейчас я использую функцию setup() для создания холста и для создания пузыри. Я попытался переместить объявление переменной Bubble в его собственную функцию до и после функции setup(), а также в функции draw() и за пределами обеих функций. Я также попытался переместить создание холста в другую часть, но ни одно из этих решений не сработало. Как настроить этот код так, чтобы он создавал новый пузырь на холсте каждые 0,5 с вместо сброса холста и пузырьков каждые 2,9 с? 

class Bubble {

  constructor() {
    let allInstances = [];

    let radius = random(20, 200);
    let red = random(210, 255);
    let randRed = parseInt(red);
    let alpha = random(0.25, 0.6);
    let randAlpha = alpha.toFixed(2);
    let color = `rgba(${randRed},255,255,${randAlpha})`;
    this.x = random(100, 700);
    this.y = random(100, 500);
    this.width = radius;
    this.height = radius;
    this.color = color;
    this.velocityX = random(-5, +5);
    this.velocityY = random(-5, +5);

    this.display = function() {
      stroke(255);
      fill(this.color);
      ellipse(this.x, this.y, this.width, this.height);
    }

    this.move = function() {
      this.x = this.x + this.velocityX;
      this.y = this.y + this.velocityY;
    }

  }
}
/*
var bubbles = [];

function setup() {
  createCanvas(800, 600);
  bubble1 = new Bubble();
  bubble2 = new Bubble();
  bubble3 = new Bubble();
  bubble4 = new Bubble();
  bubble5 = new Bubble();
  bubble6 = new Bubble();
}


function draw() {
  background(56, 226, 232);
  bubble1.move();
  bubble2.move();
  bubble3.move();
  bubble4.move();
  bubble5.move();
  bubble6.move();

  bubble1.display();
  bubble2.display();
  bubble3.display();
  bubble4.display();
  bubble5.display();
  bubble6.display();
}

setInterval(function() {
  setup();
  draw();
}, 2900);
*/
html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />
  <script src="Bubble.js"></script>
</head>

<body>
  <script src="sketch.js"></script>
</body>

</html>

Вот мой код, закомментированный код - мой текущий JavaScript код, который имеет вышеупомянутые setup() и функции рисования и Bubble класс.

1 Ответ

0 голосов
/ 06 мая 2020

Здесь много чего происходит, поэтому я попытаюсь go пройти через все это.

Во-первых, при использовании библиотеки p5 вы setup() вызываете функцию в начале вашей программы и так для хорошей практики вы никогда не должны называть это. Во-вторых, draw() вызывается системой 60 раз в секунду для начала. Вы можете изменить это с помощью framerate(put what every number you would like

Теперь для ваших пузырей. То, что вы хотите сделать, это использовать для l oop, чтобы начать с создания ваших пузырей. и перерисовать их. что-то вроде этого. для создания. 

for (i=0; i<numOfBubbles; i++) {
  bubble[i] = new Bubble();
}

Затем, чтобы заставить их двигаться и рисовать, это работает. 

for (i=0; i<numOfBubbles; i++) {
bubble[i].move();
bubble[i].display();
}

N0, чтобы создать новый пузырь, замените этот 

setInterval(function() {
  setup();
  draw();
}, 2900);

просто не берите в расчет, что циклы for могут быть забавными с числами, потому что они начинаются с итерации 0 и идут только до 4, так как меньше 5. Если вы думаете об этом, будет иметь смысл 

function newbubble() {
  bubble[numOfBubbles] = new Bubble();
  numOfBubbles++
}

setInterval(newbubble, 2000);

Обратите внимание, что вам понадобится лучшие переменные 

var bubble = {};
// note this should be one less then what you want as for loops first iterations as at 0
var numOfBubbles = 5;

Также теперь вы прочитали все это объяснение вот код https://editor.p5js.org/16340jt@hvhs.school.nz / sketchches / qahzu3opJ

Это должно ответить на ваши вопросы, но это более или менее переписать вашу программу, но если вы возьмете этот урок, он действительно поможет вам в будущем.

...