如何使用 key 函数创建平滑过渡 p5.js？

Question

我正在努力实现这一点，每次您键入不同的字母键时，字母 'merge' 的行会彼此相连，而不是像现在这样 'jumping' 到下一个字母。我正在研究 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, width/2, 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,10,10);
    frameRate(17);
    pop();
  }
}

Answer 1

这是一个片段，它通过使用 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, width/10, height/2, fontSize, {
        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,1,1);
      pop();
    }
  }
}

如何使用 key 函数创建平滑过渡 p5.js？

How to create a smooth transition p5.js with key function?

html

javascript

processing

p5.js