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

【问题标题】：How to create a smooth transition p5.js with key function?如何创建具有关键功能的平滑过渡 p5.js？
【发布时间】：2021-04-16 12:37:09
【问题描述】：

我正在努力实现这一点，每次您键入不同的字母键时，字母的行都会“合并”到彼此中，而不是像现在这样“跳”到下一个字母。我正在研究 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();
  }
}

【问题讨论】：

标签： javascript html processing p5.js

【解决方案1】：

这是一个 sn-p，它通过使用 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();
    }
  }
}

【讨论】：