simple interactive single-molecule "like" diffusion/flow/blinking generator using p5.js

p5STICS.js

var system;
var input, button, greeting;
var diffusion;
var nParticleTotN;
var sigma;
var nLifetime;
var velocityx;
var velocityy;

function setup() {
  createCanvas(720, 400);
  system = new ParticleSystem(createVector(width/2, 100));
  diffusion = 2;
  nParticleTotN = 50;
  nLifetime = 0;
  sigma=5;
  velocityx=0;
  velocityy=0;

//Particle N
  inputpn = createInput('50','text');
  inputpn.position(20, 450);
  buttonpn = createButton('set');
  buttonpn.position(200, 450);
  buttonpn.mousePressed(setparticlen);
  particleN = createElement('h4', 'Particles number, now 50');
  particleN.position(20,400);

//Particle size
  inputsd = createInput('5','text');
  inputsd.position(20, 500);
  buttonsd = createButton('set');
  buttonsd.position(200, 500);
  buttonsd.mousePressed(setsigma);
  sigmatitle = createElement('h4', 'Particle size (SD, px)');
  sigmatitle.position(20,450);

//Lifetime
  inputlt = createInput('0','text');
  inputlt.position(20, 550);
  buttonlt = createButton('set');
  buttonlt.position(200, 550);
  buttonlt.mousePressed(setlifetime);
  lifetimetitle = createElement('h4', 'Particle lifetime (0=infinite)');
  lifetimetitle.position(20,500);

//Diffusion
  inputd = createInput('2','text');
  inputd.position(20, 600);
  buttond = createButton('set');
  buttond.position(200, 600);
  buttond.mousePressed(setdiffusion);
  diffusiontitle = createElement('h4', 'Diffusion displacement (px)');
  diffusiontitle.position(20, 550);

//velocity X
  inputvx = createInput('0','text');
  inputvx.position(20, 650);
  buttonvx = createButton('set');
  buttonvx.position(200, 650);
  buttonvx.mousePressed(setvelx);
  velxtitle = createElement('h4', 'Velocity X (px)');
  velxtitle.position(20, 600);

//velocity Y
  inputvy = createInput('0','text');
  inputvy.position(20, 700);
  buttonvy = createButton('set');
  buttonvy.position(200, 700);
  buttonvy.mousePressed(setvely);
  velytitle = createElement('h4', 'Velocity Y (px)');
  velytitle.position(20, 650);


  textAlign(CENTER)
  textSize(20);
}

function draw() {
var dp;
  background(0);
  if(system.particles.length<nParticleTotN)
  {
    dp=(nParticleTotN-system.particles.length)
    while (dp>1)
    {
      system.addParticle();
      dp--;
    }
  }
  system.run();
  particleN.html('Particles number, now '+nf(system.particles.length));
}

function setdiffusion() {
  var name = inputd.value();
  diffusion=int(name);
  //greeting.html('hello '+name+'!');
  inputd.value(name);
}

function setparticlen() {
  var name = inputpn.value();
  nParticleTotN=int(name);
  //inputpn.html('Particle number (current ('+name+')');
  if(nParticleTotN>0)
    inputpn.value(name);
}
function setsigma() {
  var name = inputsd.value();
  sigma=int(name);
  //inputpn.html('Particle number (current ('+name+')');
  if(sigma>0)
    inputsd.value(name);
}

function setlifetime() {
  var name = inputlt.value();
  nLifetime=int(name);
  //inputpn.html('Particle number (current ('+name+')');
  //if(sigma>0)
  system.updatelt();
    inputlt.value(nf(nLifetime));
}

function setvelx() {
  var name = inputvx.value();
  velocityx=int(name);

    inputvx.value(name);
    system.updateVx();
}
function setvely() {
  var name = inputvy.value();
  velocityy=int(name);

    inputvy.value(name);
    system.updateVy();
}

// A simple Particle class
var Particle = function(position) {
  //this.acceleration = createVector(0, 0.05);
  this.acceleration = createVector(random(-0.05,0.05), random(-0.05,0.05));
  //this.velocity = createVector(random(-1, 1), random(-1, 0));
  this.velocity = createVector(velocityx, velocityy);
  this.position = position.copy();

  this.lifespan = random(nLifetime);
  this.intensity = random(255);
};

Particle.prototype.run = function() {
  this.update();
  this.display();
};

// Method to update position
Particle.prototype.update = function(){
  //this.velocity.add(this.acceleration);
  this.position.add(this.velocity);

  this.position.add(createVector(random(-diffusion, diffusion), random(-diffusion, diffusion)));
  this.lifespan -= 1;
};

// Method to update velocity X
Particle.prototype.updatevx = function(){

  this.velocity = createVector(velocityx,this.velocity.y);

};
// Method to update velocity Y
Particle.prototype.updatevy = function(){

  this.velocity = createVector(this.velocity.x,velocityy);

};

// Method to update lifespan
Particle.prototype.updatelt = function(){
 if(this.lifespan>nLifetime || nLifetime==0)
  this.lifespan = random(nLifetime);

};

// Method to display
Particle.prototype.display = function() {

  // sigma = 5;

  for (var i = sigma*2; i >= 1; i--)
  {

    stroke(this.intensity*(exp(-pow(i,2)/(2*sigma*sigma))));//+random(-30,30));
    //fill(round(255/i));
    ellipse(this.position.x, this.position.y, i, i);
  }
  /*
  stroke(200);
  //stroke(200, this.lifespan);
  strokeWeight(2);
  fill(127);
  //fill(127, this.lifespan);
  ellipse(this.position.x, this.position.y, 12, 12);
  */
};

// Is the particle still useful?
Particle.prototype.isDead = function(){
  //if (this.lifespan < 0) {
  if (this.position.y > height ||this.position.y <0 ||this.position.x <0 ||this.position.x >width)//||this.lifespan < 0)
  {

          return true;

  } else {
    if(nLifetime==0)
      return false;
    else {
      if(this.lifespan<0)
          return true;
      }


  //  return false;
  }
};

var ParticleSystem = function(position) {
  this.origin = position.copy();
  this.particles = [];
};

ParticleSystem.prototype.addParticle = function() {
  //this.particles.push(new Particle(this.origin));
  this.particles.push(new Particle(createVector(random(width), random(height))));
};

ParticleSystem.prototype.updateVx = function() {
  //this.particles.push(new Particle(this.origin));
  //this.particles.push(new Particle(createVector(random(width), random(height))));
  for (var i = this.particles.length-1; i >= 0; i--)
  {
    var p = this.particles[i];
    p.updatevx();
  }

};
ParticleSystem.prototype.updateVy = function() {
  //this.particles.push(new Particle(this.origin));
  //this.particles.push(new Particle(createVector(random(width), random(height))));
  for (var i = this.particles.length-1; i >= 0; i--)
  {
    var p = this.particles[i];
    p.updatevy();
  }

};

ParticleSystem.prototype.updatelt = function() {
  //this.particles.push(new Particle(this.origin));
  //this.particles.push(new Particle(createVector(random(width), random(height))));
  for (var i = this.particles.length-1; i >= 0; i--)
  {
    var p = this.particles[i];
    p.updatelt();
  }

};


ParticleSystem.prototype.run = function() {
  for (var i = this.particles.length-1; i >= 0; i--)
  {
    var p = this.particles[i];
    p.run();
    if (p.isDead()) {
      this.particles.splice(i, 1);
    }
  }
  if(this.particles.length>nParticleTotN)
  {
    this.particles.splice(0, 1);
  }
};