Colorful flow IV

var numMax = 1000; 

var t = 0;

var h = 0.01;

var particles = [];

​

​

var xmax = 4.5;

var xmin = -4.5;

var ymax = 3.5;

var ymin = -3.5;

var sc = 0.3;

var xstep = 0.4;

var ystep = 0.4;

​

var currentParticle = 0;

​

var fshow = false;

​

var buttonField;

​

var WIDTH = 700;

var HEIGHT = 500;

var frameWidth = WIDTH/100;

var frameHeight = HEIGHT/100;

​

function setup() {

  createCanvas(WIDTH, HEIGHT);

  controls();

  smooth();

  frameRate(60);

  //background(0);

  //for (var i=0; i<numMax; i++) {

  //  particles[i] = new Particle(t,h);

  //}

​

}

​

function fieldShow() {

  if(fshow==false) {

    fshow = true;

   } else{

  fshow = false;

  }

}

​

function draw() {

  fill(0,50);

  stroke(255);

  strokeWeight(0.5);

  rect(0,0,width,height);

​

   translate(width/2, height/2);//we need the oringin at the center

  //Reference xy

  stroke(255, 0, 0,100);

  strokeWeight(2);

  line(0,0,100,0);//xAxis

  stroke(51, 204, 51,100);

  line(0,0,0,-100);//yAxis, the value is negative since axis in p5js is upside down

  t += h;

  if(mouseIsPressed){

    let splatter = 0.5;

    let newx = map(mouseX, 0, width, -5, 5);

    let newy = map(mouseY,  height, 0, -3.5, 3.5);

    particles[currentParticle] = new Particle(newx+random(-splatter,splatter), newy+random(-splatter,splatter), t,h);

    currentParticle++;

    if (currentParticle >= numMax)

    {

      currentParticle = 0;

    }

  }

  //if(fieldShow == true){

  //updating and displaying the particles

  for (var i=particles.length-1; i>=0; i-=1) {

    var p = particles[i];

    p.update();

    p.display();

    if ( p.x > 9 ||  p.y > 7 || p.x < -9 ||  p.y < -7 ) {

      particles.splice(i,1);

      currentParticle--;

      //particles.push(new Particle(random(-4,4),random(-3,3),t,h) );

     }

    }

  //}

 if(fshow == true){

 field(t);

  }

 //println(currentParticle);

}

​

​

​

​

///

​

var P = (t, x, y) =>  0.9*( cos(x-y+t)  );//Change this function

​

var Q = (t, x, y) => 0.9*(  sin(2*x+y +t)    );//Change this function

​

​

///

​

//////

​

function Particle(_x, _y, _t, _h) {

  this.x = _x;

  this.y = _y;

  this.time = _t;

  this.radius = random(4,6);

  this.h = _h;

  this.op = random(187,200);

  this.r = random(254,255);

  this.g = random(164,255);

  this.b = random(0,255);

  this.lifespan = 700.0;

 this.update = function() {

    this.k1 = P(this.time, this.x, this.y);

    this.j1 = Q(this.time, this.x, this.y);

    this.k2 = P(this.time + 1/2 * this.h, this.x + 1/2 * this.h * this.k1, this.y + 1/2 * this.h * this.j1);

    this.j2 = Q(this.time + 1/2 * this.h, this.x + 1/2 * this.h * this.k1, this.y + 1/2 * this.h * this.j1);

    this.k3 = P(this.time + 1/2 * this.h, this.x + 1/2 * this.h * this.k2, this.y + 1/2 * this.h * this.j2);

    this.j3 = Q(this.time + 1/2 * this.h, this.x + 1/2 * this.h * this.k2, this.y + 1/2 * this.h * this.j2);

    this.k4 = P(this.time + this.h, this.x + this.h * this.k3, this.y + this.h * this.j3);

    this.j4 = Q(this.time + this.h, this.x + this.h * this.k3, this.y + this.h * this.j3);

    this.x = this.x + this.h/6 *(this.k1 + 2 * this.k2 + 2 * this.k3 + this.k4);

    this.y = this.y + this.h/6 *(this.j1 + 2 * this.j2 + 2 * this.j3 + this.j4);

    this.time += this.h;

    //this.lifespan -= 1.0;

  };    

  this.display = function() {

    fill(this.r, this.b, this.g, this.op);

    noStroke();//stroke(0,random(220,230),  random(250,255),this.lifespan);

    this.updatex = map(this.x, -9.9, 9.9, -width, width);

    this.updatey = map(-this.y, -7, 7, -height, height);

    ellipse(this.updatex, this.updatey, 2*this.radius, 2*this.radius);

  };  

}

​

​

/////

​

function controls() {

  buttonField = createButton('Field');

  buttonField.position(350, 470);

  buttonField.mousePressed(fieldShow);

​

}

​

/////

function field(_time) {

  for(var k=ymin; k<=ymax; k+=ystep){

    for(var j=xmin; j<=xmax; j+=xstep){

      var xx = j + sc * P(_time, j, k);

      var yy = k + sc * Q(_time, j, k);

      var lj = map(j, -9.9, 9.9, -width, width);

      var lk = map(-k, -7, 7, -height, height);

      var lx = map(xx, -9.9, 9.9, -width, width);

      var ly = map(-yy, -7, 7, -height, height);

      var angle = atan2(ly-lk, lx-lj);

      var dist = sqrt((lk-ly)*(lk-ly)+(lj-lx)*(lj-lx));

      fill(220,dist);

      push();

      translate(lj, lk);

      rotate(angle);

      triangle(-10, -4, 10, 0, -10, 4);

      pop();

   }

  }

}

​

/////