如何创建具有关键功能的平滑过渡p5.js？

如何解决如何创建具有关键功能的平滑过渡p5.js？

我正在努力实现这一点，每次您键入不同的字母键时，字母的行“合并”到彼此中，而不是像现在那样“跳”到下一个字母。我正在研究 lerp() 函数，但我不确定如何将其应用于我的代码。有人可以帮助我走向正确的方向吗？这是我到目前为止所拥有的：

var redtown;
var fontSize = 500;
var myArray;
var r = 3;

function preload(){
  redtown = loadFont('redtown.otf');

}
function setup(){
  createCanvas(windowWidth,windowHeight);
  textFont(redtown);
  textSize(fontSize);

}

function draw(){
  background(0);

  myArray = redtown.textToPoints(key,width/2,500,fontSize,{
      sampleFactor:0.5
  });
  // text(key,height/2 );

  for (var i = 0; i < myArray.length; i++) {
    // ellipse(myArray[i].x,myArray[i].y,10,10)
    push();
    translate(myArray[i].x,myArray[i].y);
    rotate(r);
    r++;
    stroke(255);
    strokeWeight(1);
    line(-10,-10,10);
    frameRate(17);
    pop();
  }
}

解决方法

这是一个片段，它通过使用 textToPoints 从最后两个按下的键中获取点，然后将旧字符中的每个点滑动到新字符中的位置来从一个字符过渡到另一个字符.

它使用这个公式来获得从旧字符中的点到新字符中的点沿一条线的 x 和 y 位置。

  x = (1-t)*x+t*nextX;
  y = (1-t)*y+t*nextY;

它还使用问题中的旋转线思想来给点一些运动，尽管它将线的大小固定为常数。

  rotate(r+=0.1);
  line(-1,-1,1,1);

你可以在这里看到它的实际效果Fonts Transition

var myFont;
var fontSize = 160;
var fontPoints =[];
var previousFontPoints = [];
var r = 0;
var oldKey = ' ';

function preload(){
  myFont = loadFont('inconsolata.otf');
}

function setup(){
  createCanvas(500,500);
  textFont(myFont);
  textSize(fontSize);
  frameRate(30);
  stroke(255);
  strokeWeight(1);
  background(0);
}

function draw(){
    if (oldKey != key){
       previousFontPoints = 
         myFont.textToPoints(oldKey,width/10,height/2,fontSize,{
         sampleFactor:1
       }); 
      oldKey = key;
      fontPoints = myFont.textToPoints(key,{
        sampleFactor:1
      });
      t = 0.025;
    }

  t += .01;
  if (fontPoints.length > 0 && t< 1.0){
    background(0);
    for (i = 0; i < fontPoints.length; i++){
      let x = 0;
      let y = 0;
      // if we don't have enought points we will just float in from 0,0
      let nextX = 0;
      let nextY = 0;
      push();
      if (previousFontPoints.length > i){
        x = previousFontPoints[i].x;
        y = previousFontPoints[i].y;
        // in case the new array does not have enough points
        nextX = x;
        nextY = y;
      }
      if (fontPoints.length > i){
        nextX = fontPoints[i].x;
        nextY = fontPoints[i].y;
      }
      x = (1-t)*x+t*nextX;
      y = (1-t)*y+t*nextY;
      translate(x,y);
      rotate(r+=0.1);
      line(-1,1);
      pop();
    }
  }
}