Starionary flow

var numMax = 500; 

var t = 0;

var h = 0.01;

var particles = [];

​

​

var xmax = 6;

var xmin = -6;

var ymax = 4;

var ymin = -4;

var sc = 0.3;

var xstep = 0.4;

var ystep = 0.4;

​

var currentParticle = 0;

​

var fshow = false;

var tshow = false;

​

var sliderstrength;

var buttonField;

var buttonTrace;

​

var WIDTH = 700;

var HEIGHT = 500;

var frameWidth = WIDTH/100;

var frameHeight = HEIGHT/100;

​

function setup() {

  createCanvas(WIDTH, HEIGHT);

  controls();

  //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;

  }

  if(tshow==true) {

    tshow = false;

   }

}

​

function traceShow() {

  if(tshow==false) {

    tshow = true;

   }else{

  tshow = false;

  }

  if(fshow==true) {

    fshow = false;

   }

}

​

function draw() {

  //This is for drawing the trace of particles

  if(tshow==true){

   fill(0,6);

   } else{

     fill(0,100);

  }

  stroke(255);

  strokeWeight(0.5);

  rect(0,0,width,height);

  //////////////////////////

  var stg = map(sliderstrength.value(),-2,2,-2,2);

  fill(250);

  textSize(15);

  text('k= '+nfc(stg,1,1),60,460);//for slider

​

   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.4;

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

    let newy = map(mouseY,  height, 0, -2.5, 2.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 > 3.5 ||  p.y > 2.5 || p.x < -3.5 ||  p.y < -2.5 ) {

      particles.splice(i,1);

      currentParticle--;

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

     }

    }

  //}

 if(fshow == true){

 field(t);

  }

 //println(currentParticle);

}

​

function mousePressed(){

  if(mouseButton == RIGHT){

 if (fieldShow == false) {

    fieldShow = true;

  } else {

    fieldShow = false;

  } 

 }

}

​

​

///

​

var P = (t, x, y) =>  sliderstrength.value()*(  -y  );//Change this function

​

var Q = (t, x, y) => sliderstrength.value()*(  x    );//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(100,255);

  this.g = random(0,255);

  this.b = random(200,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, -7, 7, -width, width);

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

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

  };  

}

​

​

/////

​

function controls() {

  sliderstrength = createSlider(-2, 2, 1.2, 0.1);

  sliderstrength.position(10, 470);

  sliderstrength.style('width', '140px');

  buttonField = createButton('Field');

  buttonField.position(350, 470);

  buttonField.mousePressed(fieldShow);

  buttonTrace = createButton('Trace');

  buttonTrace.position(300, 470);

  buttonTrace.mousePressed(traceShow);

​

}

​

/////

function field(_time) {

  this.time = _time;

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

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

      var xx = j + sc * P(this.time, j, k);

      var yy = k + sc * Q(this.time, j, k);

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

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

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

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

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

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

      fill(200,dist);

      push();

      translate(lj, lk);

      rotate(angle);

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

      pop();

   }

  }

}

​

​