Блог

Я пытаюсь добиться этого, каждый раз, когда вы вводите другую буквенную клавишу, строки букв «сливаются» друг с другом, а не просто «перескакивают» на следующую букву, как это происходит сейчас. Я изучаю функцию 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();
  }
}
 

Вот фрагмент кода, который переходит от одного символа к другому с помощью текстовых точек, чтобы получить точки от двух последних нажатых клавиш, а затем перемещает каждую точку в старом символе на ее место в новом символе.

Он использует эту формулу для определения положения точек x и y вдоль линии от точки в старом символе до точки в новом символе.

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

Он также использует идею вращающихся линий из вопроса, чтобы придать точкам некоторое движение, хотя он привязывает размер линии к константе.

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

Вы можете увидеть это в действии здесь Переход шрифтов

 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 amp;amp; 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();
    }
  }
}