Brownian motion for generating random motion and using a spring to follow each brownian motion point and soften the movement. Link to source files.
let Trails = [];
function setup() {
createCanvas(800, 800);
for(let i = 0; i < 30; i++){
append(Trails,new Brownian());
}
noStroke();
}
function draw() {
background(0);
for(let i = 0; i < Trails.length; i++){
let tr = Trails[i];
tr.update();
tr.display();
}
}
class Brownian {
constructor() {
this.bx = random(width);
this.by = random(height);
this.x = this.bx;
this.y = this.by;
this.mass = 9;
this.damping = 0.001;
this.k = (10-this.mass)/10;
this.velx = 0.0; // X Velocity
this.vely = 0.0; // Y Velocity
this.accel = 0; // Acceleration
this.force = 0;
this.r = random(20,200);
this.c = color(random(255),random(255),random(255));
}
update(){
let newpx = random(-15,15);
let newpy = random(-15,15);
if(this.bx + newpx > width || this.bx + newpx < 0){
newpx = -newpx;
}
if(this.by + newpy > height || this.by + newpy < 0){
newpy = -newpy;
}
this.bx = this.bx + newpx
this.by = this.by + newpy;
this.force = -this.k * (this.y - this.by); // f=-ky
this.accel = this.force / this.mass;// Set the acceleration, f=ma == a=f/m
this.vely = this.damping * this.vely + this.accel;// Set the velocity
this.y = this.y + this.vely;// Updated position
this.force = -this.k * (this.x - this.bx);// f=-ky
this.accel = this.force / this.mass;// Set the acceleration, f=ma == a=f/m
this.velx = this.damping * this.velx + this.accel;// Set the velocity
this.x = this.x + this.velx;
}
display(){
fill(this.c);
ellipse(this.x,this.y,this.r,this.r);
fill(255);
ellipse(this.bx, this.by, 10, 10);
stroke(255);
line(this.bx, this.by,this.x,this.y);
noStroke();
}
}