I am trying without success to translate this code from Processing to p5.
I’m having an issue with the ArrayList at line 21 & 26, and also the functions inside the ParticleSystem class.
Here's the working Processing code:
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);
}
}
And here's an early version of how far i got with p5.js before i made the code a complete mess:
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);
}
}
So if anyone has got the solution or can tell me the steps i need to take please let me know!
In JavaScript you don't need something like an ArrayList at all. A JavaScript array is dynamic. Further it is not necessary to declare the attributes. Attributes are "created" automatically when something is assigned to.
Instead of a PVector object you can uss p5.Vector. A p5.Vector is created by createVector. Furthermore, read about Classes in JavaScript.
See the example:
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>