let aArray;

let pane;

let params = {

  text: "a/",

  fontSize: 350,

  sampleFactor: 0.32,

  strokeColor: "#000000",

  shapeColor: "#FFFFFF",

  bg: "#000000",

  strokeWeight: 1,

  fontFamily: "KnockoutE.otf"

};

​

// Load custom fonts

function preload() {

  flexaCondensedBlack = loadFont('GTFlexa-CondensedBlack.otf');

  flexa = loadFont('GTFlexa.otf');

  knockoutC = loadFont('KnockoutC.otf');

  knockoutE = loadFont('KnockoutE.otf');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // Create Tweakpane inputs

  pane = new Tweakpane.Pane();

  pane.addInput(params, 'text', { maxLength: 5 }).on('change', updateLetter);

  pane.addInput(params, 'fontFamily', {

    options: {

      'GTFlexa-CondensedBlack': 'GTFlexa-CondensedBlack.otf',

      'GTFlexa': 'GTFlexa.otf',

      'KnockoutC': 'KnockoutC.otf',

      'KnockoutE': 'KnockoutE.otf'

    }

  }).on('change', updateLetter);

  pane.addInput(params, 'fontSize', { min: 100, max: 1000, step: 10 }).on('change', updateLetter);

  pane.addInput(params, 'sampleFactor', { min: 0.1, max: 1, step: 0.01 }).on('change', updateLetter);

  pane.addInput(params, 'strokeColor');

  pane.addInput(params, 'shapeColor');

  pane.addInput(params, 'bg');

  pane.addInput(params, 'strokeWeight', { min: 0.1, max: 3, step: 0.1 });

  // Add a button to reset to the default state

  pane.addButton({ title: 'Reset to Default' }).on('click', resetToDefault);

  updateLetter();

}

​

function updateLetter() {

  // Limit the input to 5 letters

  params.text = params.text.slice(0, 5);

  // Update the font size

  textSize(params.fontSize);

  // Set the font based on the selected fontFamily

  let selectedFont;

  switch (params.fontFamily) {

    case 'GTFlexa-CondensedBlack.otf':

      selectedFont = flexaCondensedBlack;

      break;

    case 'GTFlexa.otf':

      selectedFont = flexa;

      break;

    case 'KnockoutC.otf':

      selectedFont = knockoutC;

      break;

    case 'KnockoutE.otf':

      selectedFont = knockoutE;

      break;

  }

  // Changing custom text to outlines for manipulation. sampleFactor = resolution

  aArray = selectedFont.textToPoints(params.text, 0, 0, params.fontSize, { sampleFactor: params.sampleFactor });

  // Center the letter

  centerLetter(selectedFont);

}

​

function centerLetter(font) {

  // Calculate the bounding box of the letter

  let bounds = font.textBounds(params.text, 0, 0, params.fontSize);

  // Calculate the center position

  let centerX = (width - bounds.w) / 2;

  let centerY = (height + bounds.h) / 2;

  // Translate the letter points to the center position

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

    aArray[i].x += centerX;

    aArray[i].y += centerY;

  }

}

​

function draw() {

  background(params.bg);

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

    stroke(params.strokeColor);

    strokeWeight(params.strokeWeight);

    fill(params.shapeColor);

    // Calculate the width and height of the rectangle based on the mouse position

    let rectWidth = mouseX - width / 2;

    let rectHeight = mouseY - height / 2;

    // Calculate the position of the rectangle based on the center of the shape

    let rectX = aArray[i].x - rectWidth / 2;

    let rectY = aArray[i].y - rectHeight / 2;

    rect(rectX, rectY, rectWidth, rectHeight);

  }

}

​

function resetToDefault() {

  // Reset all parameters to their default values

  params.text = "a/";

  params.fontSize = 500;

  params.sampleFactor = 0.32;

  params.strokeColor = "#000000";

  params.shapeColor = "#FFFFFF";

  params.bg = "#000000";

  params.strokeWeight = 1;

  params.fontFamily = "KnockoutE.otf";

  // Update the Tweakpane inputs with the default values

  pane.refresh();

  // Update the letter with the default parameters

  updateLetter();

}