Нужна помощь в преобразовании моего кода обработки в p5.js (ArrayList + другие!)

Question

Я новичок в Processing и p5.js и безуспешно пытаюсь перевести этот код из Processing в p5. Главное, с чем у меня проблема, это ArrayList в строках 21 и 26, а также функции внутри класса ParticleSystem. Примечание: я знаю, что это, вероятно, очень нубский вопрос, однако я пробовал много методов, и, похоже, ничего не работает, поэтому я запрашиваю помощь у вас, ребята.

Вот рабочий код обработки:

ParticleSystem ps;

void setup() {
    size(1200, 800);
    ps = new ParticleSystem(new PVector(width/2, 50));
    for (int i=0; i<1200; i++) {
        ps.addParticle();
    }
}

void draw() {
    background(255);
    ps.move_away_from(mouseX, mouseY);
    ps.run();
}

class ParticleSystem {
    ArrayList<Particle> particles;
    PVector origin;

    ParticleSystem(PVector position) {
        origin = position.copy();
        particles = new ArrayList<Particle>();
    }

    void addParticle() {
        particles.add(new Particle(origin));
    }

    void run() {
        for (int i = particles.size()-1; i >= 0; i--) {
            Particle p = particles.get(i);
            p.run();
      //      if (p.isDead()) {
              //    particles.remove(i);
      //      }
        }
    }

    void move_away_from( float x, float y){
        for(Particle p : particles){
            float d = dist(x,y,p.position.x, p.position.y);
            if( d < 200 ){ 
                p.velocity.x += map(d,0,200,0.5,0.1)*(p.position.x - x);
                p.velocity.y += map(d,0,200,0.5,0.1)*(p.position.y - y);
            }
        }
    }
}

class Particle {
    PVector position;
    PVector velocity;
    PVector acceleration;
    PVector home;

    Particle(PVector l) {
        acceleration = new PVector(0, 0);
        velocity = new PVector(0,0);//random(-0.0001, 0.00001), random(-0.001, 0.0001));

        l=new PVector(random(0, 1200), random(0, 800));
        position = l.copy();
        home = position.copy();
    }

    void run() {
        update();
        display();
    }

    // Method to update position
    void update() {
        acceleration.x = -0.01*(position.x - home.x);
        acceleration.y = -0.01*(position.y - home.y);
        velocity.add(acceleration);
        velocity.mult(0.9);
        position.add(velocity);
        //   lifespan -= 1.0;
    }

    // Method to display
    void display() {
        noStroke();//stroke(255, lifespan);
        //fill(255, lifespan);
        fill(0);
        ellipse(position.x, position.y, 25, 25);
    }
}

И вот ранняя версия того, как далеко я продвинулся с p5.js, прежде чем я сделал код полным беспорядком:

var ps;

function setup() {
  size(1200, 800);
  ps = new ParticleSystem(new PVector(width/2, 50));
  for (var i=0; i<1200; i++)
  {
    ps.addParticle();
  }
}


function draw() {
  background(255);
  ps.move_away_from(mouseX, mouseY);

  ps.run();
}

class ParticleSystem {
  ArrayList<Particle> particles;
  PVector origin;

  ParticleSystem(PVector position) {
    origin = position.copy();
    particles = new ArrayList<Particle>();
  }

  function addParticle() {
    particles.add(new Particle(origin));
  }

  function run() {
    for (float i = particles.size()-1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.run();
//      if (p.isDead()) {
        //    particles.remove(i);
//      }
    }
  }

  function move_away_from( var x, var y){
    for(Particle p : particles){
      var d = dist(x,y,p.position.x, p.position.y);
      if( d < 200 ){ 
        p.velocity.x += map(d,0,200,0.5,0.1)*(p.position.x - x);
        p.velocity.y += map(d,0,200,0.5,0.1)*(p.position.y - y);
      }
    }
  }

}


class Particle {
  PVector position;
  PVector velocity;
  PVector acceleration;


  PVector home;

  Particle(PVector l) {
    acceleration = new PVector(0, 0);
    velocity = new PVector(0,0);//random(-0.0001, 0.00001), random(-0.001, 0.0001));

    l=new PVector(random(0, 1200), random(0, 800));
    position = l.copy();
    home = position.copy();
  }

  function run() {
    update();
    display();
  }

  // Method to update position
  function update() {
    acceleration.x = -0.01*(position.x - home.x);
    acceleration.y = -0.01*(position.y - home.y);
    velocity.add(acceleration);
    velocity.mult(0.9);
    position.add(velocity);
    //   lifespan -= 1.0;
  }

  // Method to display
  function display() {
    noStroke();//stroke(255, lifespan);
    //fill(255, lifespan);
    fill(0);
    ellipse(position.x, position.y, 25, 25);
  }


}

Так что, если у кого-нибудь есть решение или он может сказать мнешаги, которые мне нужно предпринять, пожалуйста, дайте мне знать!

Answer 1

В JavaScript вам совсем не нужно что-то вроде ArrayList. Массив JavaScript является динамическим. Далее не нужно объявлять свои атрибуты. Атрибуты «создаются» автоматически при назначении чего-либо.

Вместо объекта PVector вы можете использовать p5.Vector. A p5.Vector создается createVector. Кроме того, прочитайте о Классы в JavaScript.

См. Пример:

class Particle {
  
    constructor(l) {
        this.acceleration = createVector(0, 0);
        this.velocity = createVector(0,0);//random(-0.0001, 0.00001), random(-0.001, 0.0001));
        this.position = l ? l.copy() : createVector(Math.random()*1200, Math.random()*1200,);
        this.home = this.position.copy();
    }

    run() {
        this.update();
        this.display();
    }

    // Method to update position
    update() {
        this.acceleration.x = -0.01*(this.position.x - this.home.x);
        this.acceleration.y = -0.01*(this.position.y - this.home.y);
        this.velocity.add(this.acceleration);
        this.velocity.mult(0.9);
        this.position.add(this.velocity);
        //   lifespan -= 1.0;
    }

    // Method to display
    display() {
        noStroke();//stroke(255, lifespan);
        //fill(255, lifespan);
        fill(0);
        ellipse(this.position.x, this.position.y, 25, 25);
    }
}

class ParticleSystem {
    constructor(position) {
        this.origin = position.copy();
        this.particles = [];
    }

    addParticle() {
        //this.particles.push(new Particle(this.origin));
        this.particles.push(new Particle());
    }

    run() {
        for (let i = this.particles.length-1; i >= 0; i--) {
            this.particles[i].run();
    //      if (p.isDead()) {
            //    particles.remove(i);
    //      }
        }
    }

    move_away_from(x, y){
        for (let i = 0; i < this.particles.length; i++) {
            let p = this.particles[i];
            let d = dist(x,y, p.position.x, p.position.y);
            if( d < 200 ){ 
                p.velocity.x += map(d,0,200,0.5,0.1)*(p.position.x - x);
                p.velocity.y += map(d,0,200,0.5,0.1)*(p.position.y - y);
            }
        }
    }
}

var ps;

function setup() {
    createCanvas(1200, 800);
    ps = new ParticleSystem(createVector(width/2, 50));
    for (var i=0; i<1200; i++) {
        ps.addParticle();
    }
}

function draw() {
    background(255);
    ps.move_away_from(mouseX, mouseY);
    ps.run();
}

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