Блог

Я использую JS P5. Я создал функцию, которая создает эллипс. Я хочу зациклить этот эллипс по всему холсту с некоторым расстоянием между каждым эллипсом.

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

Это мой код, здесь у меня есть случайный путь, но я хочу, чтобы это было точное расстояние, например, сетка по всей странице.

Как в этом примере

 let shapes = [];

function setup() {
  createCanvas(600, 600);
  for (let i = 0; i < 500; i  ){
    let x = random(width);
    let y = random(height);

    shapes[i] = new shape(x,y,20);
  }
}

function draw() {
  background(220);

  for (let i = 0; i < shapes.length; i  ){
    shapes[i].display();
  }
}


function shape(tx, ty, ts) {
  this.x = tx;
  this.y = ty;
  this.size = ts;
  this.angle = 0;

  this.update = function(mx, my) {
    this.angle = atan2(my - this.y, mx - this.x);
  };

  this.display = function() {
    push();
    fill(153, 204, 0);
    ellipse(this.x, this.y, this.size, this.size);
    pop();
  };
}  

Отредактированный ответ:

 let shapes = [];

function setup() {
    createCanvas(600, 600);
    for(var x=0;x<width;x =30){
        for(var y=0;y<height;y =30){
            shapes.push(new shape(x,y,20));
        }
    }
}

function draw() {
    background(220);

    for (let i = 0; i < shapes.length; i  ){
        shapes[i].display();
    }
}


function shape(tx, ty, ts) {
    this.x = tx;
    this.y = ty;
    this.size = ts;
    this.angle = 0;

    this.update = function(mx, my) {
        this.angle = atan2(my - this.y, mx - this.x);
    };

    this.display = function() {
        push();
        fill(153, 204, 0);
        ellipse(this.x, this.y, this.size, this.size);
        pop();
    };
}