gistfile1.txt

var particles = [];
var maxVel = 4;

var drugi;

function setup() {
  createCanvas(400, 400);
  
  drugi = createGraphics(400, 400);
  drugi.background(222);
  drugi.colorMode(HSB, 100);
}

function draw() {
  
  image(drugi, 0, 0);
  
  drugi.noStroke();
  drugi.fill(222, 5);
  drugi.rect(0,0,width,height);
  
  for(var k = 0; k < particles.length; k++){
    particles[k].update();
    particles[k].display();
  }
  
}

function mouseClicked(){
  particles.push(new Particle(mouseX, mouseY))
}

class Particle{
  constructor(x, y){
    this.pos = createVector(x, y);
    this.vel = createVector(maxVel*random(-1,1), maxVel*random(-1,1));
    this.acc = createVector(0, 0);
    this.hue = random(0,70);
  }
  
  update(){
    this.acc = createVector(1*random(-1,1), 1*random(-1,1));
    
    var brd = 20;
    if(this.pos.x < brd){
            this.acc.add(createVector(2, 0));
        }
    if(this.pos.y < brd){;
        this.acc.add(createVector(0, 2));
    }

    if(this.pos.x > width - brd){
        this.acc.add(createVector(-2, 0));
    }

    if(this.pos.y > height - brd){
        this.acc.add(createVector(0, -2));
    }
    
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    
    this.vel.mult(0.9);
    
    //var x = this.vel.x;
    //var y = this.vel.y;
    //x = x * 0.97;
    //this.vel.set(x, y);
  }
  
  display(){
    noStroke();
    fill(22);
    ellipse(this.pos.x, this.pos.y, 5, 5);
    
    stroke(255,0,0);
    line(this.pos.x, this.pos.y, this.pos.x+20*this.vel.x, this.pos.y+20*this.vel.y);
    drugi.fill(this.hue, 80, 90);
    drugi.noStroke();
    drugi.ellipse(this.pos.x, this.pos.y, 5, 5);
  }
}