A simple brownian motion sketch with a circular border. Link to source files.
let Brownian = [];
let numpts = 100;
let tc = 0;
let tlimit = 0;
function setup() {
createCanvas(800, 800);
}
function draw() {
background(0);
if(tc > tlimit){
append(Brownian,new Bpoint());
tc = 0;
tlimit = random(30) + 10;
}
tc++;
for(let i = 0; i < Brownian.length; i++){
let tr = Brownian[i];
tr.update();
tr.display();
}
}
class Bpoint {
constructor() {
this.maxr = height/2-25;
this.prad = random(this.maxr-25);
this.x = width/2 + this.prad * cos(random(8));
this.y = height/2 + this.prad * sin(random(8));
this.pos = [];
this.c = color(random(255),random(255),random(255));
append(this.pos, createVector(this.x, this.y));
}
update(){
let newpx = random(-12,12);
let newpy = random(-12,12);
let dd = dist(this.x + newpx, this.y + newpy,width/2,height/2);
if(dd > this.maxr){
newpx = -newpx;
newpy = -newpy;
}
this.x = this.x + newpx
this.y = this.y + newpy;
append(this.pos, createVector(this.x, this.y));
if(this.pos.length > 400){
this.pos.splice(0,1);
}
}
display(){
for(let i = 0; i < this.pos.length-1; i++){
let pt = this.pos[i];
let pt2 = this.pos[i+1];
stroke(this.c);
line(pt.x,pt.y,pt2.x,pt2.y);
}
noStroke();
fill(this.c);
ellipse(this.x, this.y, 10, 10);
}
}