Multiple interpolations in P5js

Question

I'm trying to create multiple interpolations in p5js and for that purpose I tried to re-create Ben Fry's Integrator class in javaScript. I realize that transition and conversion from processing to p5js is quite difficult so if this is not possible, I would appreciate if you gave me a hint for doing it in another way. Thank you.

Here is what I have done so far. . .

   function Integrator(value, damping, attraction)
{
  this.DAMPING=0.5;
  this.ATTRACTION=0.2;

  this.value;
  this.vel;
  this.accel;
  this.force;
  this.mass=1;

  this.damping=this.DAMPING;
  this.attraction=this.ATTRACTION;

  this.targeting; //boolean
  this.target;

  this.value=value;
  this.damping=damping;
  this.attraction=attraction;

  this.set =function(v)
  {
    this.value=v;
  }

  this.update = function()
  {
    if(this.targeting)
    {
      this.force +=this.attraction *(this.target-this.value);
    }

    this.accel = this.force/this.mass;
    this.vel = (this.vel+this.accel)*this.damping;
    this.value +=this.vel;

    this.force=0;
  }

  this.target = function(t)
  {
    this.targeting=true;
    this.target=t;
  }

  this.noTarget = function()
  {
    this.targeting = false;
  }

}

Here is also the link to the original processing code by Ben Fry http://benfry.com/writing/map/Integrator.pde

Answer 1

Converting the class to JavaScript (see below) is relatively straightforward. Though one thing to watch for is variables and functions with the same name, as this is not allowed in JS. You can see the demo here

class Integrator {
  
  constructor(value = 100, damping = 0.5, attraction = 0.2) {
    this.force = 0;
    this.vel = 0;
    this.accel = 0;
    this.mass = 1;
    
    this.damping = damping;
    this.attraction = attraction;
    
    this._value = value;
    this._target = value;
  }

  value(v) {
    if (typeof v !== 'undefined') {
      this._value = v;
      return this;
    }
    return this._value;
  }

  update() {
    if (this.targeting) {
      this.force += this.attraction * (this._target - this._value);
    }

    this.accel = this.force / this.mass;
    this.vel = (this.vel + this.accel) * this.damping;
    this._value += this.vel;

    this.force = 0;
  }

  target(t) {
    if (typeof t !== 'undefined') {
      this.targeting = true;
      this._target = t;
      return this;
    }
    return this._target;
  }

  noTarget() {
    this.targeting = false;
  }
}