P5js 中的多重插值答案

【问题标题】：Multiple interpolations in P5jsP5js 中的多重插值
【发布时间】：2017-01-22 18:56:41
【问题描述】：

我正在尝试在 p5js 中创建多个插值，为此我尝试在 javaScript 中重新创建 Ben Fry 的 Integrator 类。我意识到从处理到 p5js 的转换和转换非常困难，所以如果这是不可能的，如果你给我提示以另一种方式做这件事，我将不胜感激。谢谢。

这是我到目前为止所做的。 . .

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

}

这里也是 Ben Fry 原始处理代码的链接 http://benfry.com/writing/map/Integrator.pde

【问题讨论】：

您并没有真正提出问题。这段代码究竟做了什么？哪条线的行为与您的预期不同？
对不起，误会了。我的问题不是为什么代码不起作用，这只是分享我所做的事情。我的问题是如何在 p5js 中实现多个插值。如果我没记错的话，我将无法循环执行，因为它会运行然后给你最终结果。所以我想知道在 p5js 中是否有可能。

标签： loops interpolation p5.js lerp

【解决方案1】：

将类转换为 JavaScript（见下文）相对简单。尽管要注意的一件事是具有相同名称的变量和函数，因为这在 JS 中是不允许的。你可以看到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;
  }
}

【讨论】：