Lisa Frank LookAlike

let points;

let textX;

let textY;

​

function preload() {

  font = loadFont('GrandHotel-Regular.ttf');

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  gradientCnv = createGraphics(width, height);

  textCnv = createGraphics(width, height);

  noLoop();

}

​

function frankify(canvas, textString) {

  bounds = font.textBounds(textString, 0, 0, height / 4);

  textX = width/2 - bounds.w/2;

  textY = height/2 - bounds.h/2;

  //create the outline 

  letterPoint = {x: textX, y: textY}; 

  canvas.strokeWeight(20);

  for (let i = 0; i < textString.length; i++) {

    let letter = textString.charAt(i);

    letterBounds = font.textBounds(letter, 0, 0, height / 4);

    points = font.textToPoints(letter, letterPoint.x, letterPoint.y, height / 4, {

      sampleFactor: 5,

      simplifyThreshold: 0

    });

    drawText(textCnv);

    letterPoint.x = letterPoint.x + letterBounds.w;

  }

  //now the inside white lines

  letterPoint = {x: textX, y: textY};

  canvas.strokeWeight(15);

  for (let i = 0; i < textString.length; i++) {

    letter = textString.charAt(i);

    letterBounds = font.textBounds(letter, 0, 0, height / 4);

    points = font.textToPoints(letter, letterPoint.x, letterPoint.y, height / 4, {

      sampleFactor: 5,

      simplifyThreshold: 0

    });

    canvas.erase();

    drawText(textCnv);

    canvas.noErase();

        canvas.textFont(font);

    canvas.textSize(height / 4);

    fill(0);

    noStroke();

    canvas.text(letter, letterPoint.x, letterPoint.y);

    letterPoint.x = letterPoint.x + letterBounds.w;

  }

​

​

​

}

​

function draw() {

  background(255);

//This is where you can change the text!!!!

  let shift = frankify(textCnv, "Lisa Frank");

  //textCnv.translate(shift,0);

  //frankify(textCnv, " Frank");

  //textCnv.translate(-shift,0);

  gradient = prepGradient();

​

  masked = gradient.get()

  masked.mask(textCnv);

​

  image(masked, 0, 0);

​

}

​

function prepGradient() {

  let gradientCnv = createGraphics(width, height);

  let gradient = gradientCnv.drawingContext.createLinearGradient(textX, textY - bounds.h, textX + bounds.w, textY);

​

  gradient.addColorStop(0, color("#ff08d6"));

  gradient.addColorStop(0.15, color("#ffa408"));

  gradient.addColorStop(0.33, color("#fbff00"));

  gradient.addColorStop(0.48, color("#41f01a"));

  gradient.addColorStop(0.75, color("#1ac1f0"));

  gradient.addColorStop(0.95, color("#a51af0"));

  gradientCnv.drawingContext.fillStyle = gradient

  gradientCnv.rect(0, 0, width, height);

​

  return gradientCnv;

}

​

function drawText(context) {

  context.beginShape();

  for (let i = 0; i < points.length; i++) {

    let p = points[i];

    context.vertex(

      p.x, // * width / bounds.w,

      p.y //* height / bounds.h

    );

  }

  context.endShape();

}