ghost-particles

var points = [];

var painting = false;

​

var scl = 20;

var cols, rows;

var inc = 0.2;

var particles = [];

var flowField = [];

var saturation = [];

var pFrameRate = 0;

var maxSaturation = 200;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0);

  pixelDensity(5);

  cols = floor(windowWidth / scl);

  rows = floor(windowHeight / scl);

  flowField = Array(cols * rows * 2);

  saturation = Array(windowWidth * windowHeight).fill(0);

  greateForceField(false);

}

​

function mousePressed() {

  painting = true;

}

​

function mouseReleased() {

  painting = false;

}

​

function greateForceField(show){

  var xOff = 0;

  var mag = scl/4;

  for(var i = 0; i < cols; i++){

    var yOff = 0;

    for(var j = 0; j < rows; j++){

      yOff += inc; 

      var index = 2 * (i * cols + j);

      var angle = noise(xOff, yOff, 0) * TWO_PI;

      flowField[index] = mag * cos(angle);

      flowField[index+1] = mag * sin(angle);

      if(show){

        push();

        translate(i * scl, j * scl);

        strokeWeight(3);

        stroke(225,0,0,127);

        point(0,0)

        strokeWeight(1);

        stroke(225,127);

        line(0, 0, flowField[index] ,flowField[index+1]);

        pop();

      }

    }

    xOff += inc;

  }

  if(show) console.log(flowField);

}

​

function showFrameRate(){

  noStroke();

  textSize(120);

  fill(0);

  text(pFrameRate,10,130);

  pFrameRate = floor(frameRate());

  fill(255);

  text(pFrameRate,10,130);

}

​

function draw(){

  // showFrameRate();

  if(painting){

    var r = scl;

    // var r = 1 + sqrt(sq(mouseX - pmouseX) + sq(mouseY - pmouseY));

    var idx = mouseY * windowWidth + mouseX;

    while(saturation[idx] < maxSaturation){

      var ang = random(TWO_PI);

      var rad = random(r);

      var x = mouseX + rad * cos(ang);

      var y = mouseY + rad * sin(ang);

      var particle = new Particle(x, y);

      particles.push(particle);

      saturation[idx] ++;

    }

  }

  particles.map((particle, idx) => {

    particle.follow();

    particle.update();

    particle.show();

    if(particle.spread <= 0){

      particles.splice(idx, 1);

    }

  });

}

​

function Particle(x,y){ 

  this.x = x;

  this.y = y;

  this.px = x;

  this.py = y;

  this.vx = 0;

  this.vy = 0;

  this.ax = 0;

  this.ay = 0;

  this.spread = 127;

  this.spreadInc = scl;

  this.maxSpeed = 4*scl;

  this.update = function(){

    this.spread -= this.spreadInc;

    if(sqrt(sq(this.vx) + sq(this.vy)) < this.maxSpeed){

      this.vx += this.ax;

      this.vy += this.ay;

    }

    this.x += this.vx;

    this.y += this.vy;

    this.ax = 0;

    this.ay = 0;

  }

  this.follow = function(){

    var i = floor(this.x / scl);

    var j = floor(this.y / scl);

    var index =  2 * (i * cols + j);

    this.ax += flowField[index];

    this.ay += flowField[index + 1];

  }

  this.show = function(){

    stroke(255, this.spread);

    strokeWeight(.3 * this.spread / 127);

    line(this.px, this.py, this.x, this.y);

    this.px = this.x;

    this.py = this.y;

  }

}