My Sketch

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;

​

let a_1, a_2, b_1, b_2, c_1, c_2, d_1, d_2;

​

let myPointA, myPointB, myPointC, myPointD;

​

let colorA = {r:255, g: 100, b:0};

let colorB = {r:255, g: 0, b:0};

let colorC = {r:0, g: 0, b:250};

let colorD = {r:0, g: 200, b:0};

​

function setup() {

  createCanvas(WIDTH, HEIGHT);

  myPointA = new DraggablePoint(width / 2+70, height / 2+70, 20, colorA);

  myPointB = new DraggablePoint(width / 2+70, height / 2-70, 20, colorB);

  myPointC = new DraggablePoint(width / 2-70, height / 2+70, 20, colorC);

  myPointD = new DraggablePoint(width / 2-70, height / 2-70, 20, colorD);

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

  myPointA.checkHovering();

  myPointA.display();

  myPointB.checkHovering();

  myPointB.display();

  myPointC.checkHovering();

  myPointC.display();

  myPointD.checkHovering();

  myPointD.display();

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

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

  a_1 = map(myPointA.x, 0, width, -5, 5); 

  a_2 = map(myPointA.y, height, 0, -3.5, 3.5);

  b_1 = map(myPointB.x, 0, width, -5, 5); 

  b_2 = map(myPointB.y, height, 0, -3.5, 3.5);

  c_1 = map(myPointC.x, 0, width, -5, 5); 

  c_2 = map(myPointC.y, height, 0, -3.5, 3.5);

  d_1 = map(myPointD.x, 0, width, -5, 5); 

  d_2 = map(myPointD.y, height, 0, -3.5, 3.5);

  console.log(a_1,a_2);

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

}

​

function mousePressed() {

  myPointA.checkDragging();

  myPointB.checkDragging();

  myPointC.checkDragging();

  myPointD.checkDragging();

}

​

function mouseReleased() {

  myPointA.stopDragging();

  myPointB.stopDragging();

  myPointC.stopDragging();

  myPointD.stopDragging();

}

​

​

​

///

​

//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 P(t, x, y) {

    let u =

      a_1 * (c_1 * (x * x + y * y) + d_1 * x + d_2 * y) +

      a_2 * c_2 * x * x +

      a_2 * c_2 * y * y +

      a_2 * d_2 * x -

      a_2 * d_1 * y +

      b_1 * (c_1 * x - c_2 * y + d_1) +

      b_2 * c_2 * x +

      b_2 * c_1 * y +

      b_2 * d_2;

    let d =

      2 * c_1 * (d_1 * x + d_2 * y) +

      c_2 * (2 * d_2 * x - 2 * d_1 * y) +

      c_1 * c_1 * (x * x + y * y) +

      c_2 * c_2 * (x * x + y * y) +

      d_1 * d_1 +

      d_2 * d_2;

​

    return u / d;

  }

​

 function Q(t, x, y) {

    let u =

      a_2 * (c_1 * (x * x + y * y) + d_1 * x + d_2 * y) -

      a_1 * c_2 * x * x -

      a_1 * c_2 * y * y -

      a_1 * d_2 * x +

      a_1 * d_1 * y -

      b_1 * (c_2 * x + c_1 * y + d_2) +

      b_2 * c_1 * x -

      b_2 * c_2 * y +

      b_2 * d_1;

    let d =

      2 * c_1 * (d_1 * x + d_2 * y) +

      c_2 * (2 * d_2 * x - 2 * d_1 * y) +

      c_1 * c_2 * (x * x + y * y) +

      c_2 * c_2 * (x * x + y * y) +

      d_1 * d_1 +

      d_2 * d_2;

​

    return u / d;

  }

​

​

///

​

//////

​

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(windowWidth/2, 570);

  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();

   }

  }

}

​

class DraggablePoint {

  constructor(x, y, size, color) {

    this.x = x;

    this.y = y;

    this.size = size;

    this.color = color;

    this.dragging = false;

    this.offsetX = 0;

    this.offsetY = 0;

  }

​

  display() {

    if (this.dragging) {

      this.x = mouseX + this.offsetX;

      this.y = mouseY + this.offsetY;

    }

​

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

    ellipse(this.x, this.y, this.size);

  }

​

  checkDragging() {

    let d = dist(mouseX, mouseY, this.x, this.y);

    if (d < this.size / 2) {

      this.dragging = true;

      this.offsetX = this.x - mouseX;

      this.offsetY = this.y - mouseY;

    }

  }

​

  stopDragging() {

    this.dragging = false;

    cursor("default");

  }

​

  checkHovering() {

    let d = dist(mouseX, mouseY, this.x, this.y);

    if (d < this.size / 2) {

      cursor("pointer");

    } else {

      cursor("default");

    }

  }

}

​

/////