CODEWITHSUNDEEP
javascripthtmlprocessingp5.js
donnapls
donnapls

Reputation: 21

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

I'm trying to achieve that, everytime you type a different letter key, the lines of the letters 'merge' into eachother instead of just 'jumping' to the next letter like it's doing now. I'm looking into the lerp() function but i'm not sure how to apply this to my code. Can someone help me into the right direction? This is what i have untill now:

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

Upvotes: 0

Views: 630

Answers (1)

Charlie Wallace
Charlie Wallace

Reputation: 1830

Here is a snippet that transitions from one character to another by using textToPoints to get the points from the last two keys that have been pressed and then slides each point in the old character to its position in the new character.

It uses this formula to get the x and y positions of points along a line from the point in the old character to the point in the new character.

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

It also uses the spinning lines idea from the question to give the points some motion although it pins the line size to a constant.

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

You can see it in action here 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();
    }
  }
}

Upvotes: 1

Related Questions