let secndName, secndNameInput;

let compyName, compyNameInput;

​

let submitBtn;

​

var letters = "abcdefghijklmnopqrstuvwxyz";

​

function preload() {

  font = loadFont("NotoSans-Regular.ttf")

}

​

function setup() {

  // Original

  // createCanvas(595, 420);

​

  // Width: 5.5in

  // Height: 4.25in

  createCanvas(528, 408);

  firstNameInput = createInput("Joe", "text");

  firstNameInput.position(0, 430);

​

  secndNameInput = createInput("Blogs", "text");

  secndNameInput.position(140, 430);

  compyNameInput = createInput("Gramener", "text");

  compyNameInput.position(280, 430);

  submitBtn = createButton("Save as image")

  submitBtn.position(420, 430);

  submitBtn.mousePressed(saveImage)

  angleMode(DEGREES);

  textAlign(CENTER, CENTER);

}

​

function draw() {

  background("#050404");

  firstName = firstNameInput.value();

  firstName = firstName.toLowerCase().replace(/[^a-z]/g, "") || ""

  secndName = secndNameInput.value();

  secndName = secndName.toLowerCase().replace(/[^a-z]/g, "") || ""

  compyName = compyNameInput.value();

​

  translate(60, 0)

  xWidth = width - 100

​

  noFill()

  stroke(0, 255, 0)

  strokeWeight(0.25)

  drawName(firstName)

  stroke(218, 62, 82)

  strokeWeight(0.25)

  drawName(secndName)

  fill("#DB995A")

  noStroke()

  for (var i = 0; i < letters.length; i++) {

    var letter = letters[i];

    if (firstName.indexOf(letter) !== -1 ||

        secndName.indexOf(letter) !== -1) {

      fill(237,247,210, 255)

      textStyle(BOLD)

      text(letter, (xWidth/26) * i, height/2)

    } else {

      fill(237,247,210, 70)

      textStyle(BOLD)

      text(letter, (xWidth/26) * i, height/2)    

    }

  }

  // push()

  // textFont(font)

  // textSize(25)

  // textAlign(RIGHT, CENTER)

  // textStyle(NORMAL)

  // noStroke()

  // fill(237,247,210);

  // text(firstNameInput.value() + " " + secndNameInput.value(), 450, 40)

  // textSize(17)

  // fill(237,247,210, 190);  

  // text(compyName, 450, 70)

  // pop()

}

​

function drawWaves(centerX, centerY, w, h, startAngle, endAngle) {

  for (var arcH = h - 24; arcH <= h + 24; arcH += 2) {

    beginShape()

    curveVertex(centerX + w/2 * cos(startAngle),

                centerY + arcH/2 * sin(startAngle))

    for (var angle = startAngle; angle <= endAngle; angle += 10) {

      if (angle == startAngle || angle == endAngle) {

        var x = centerX + w/2 * cos(angle)

        var y = centerY + arcH/2 * sin(angle)

​

        curveVertex(x, y)

       } else {

         var nangle = map(angle, startAngle, endAngle, 0, 10)

         var nheight = map(arcH, h - 30, h + 30, 0, 10)

         var nx = map(centerX + w/2, 0, width, 0, 10)

         var ny = map(centerY + h/2, 0, height, 0, 10)

​

         var n = noise(nangle, nheight)

​

         var x = centerX + (w/2 + 10 * n) * cos(angle)

         var y = centerY + (arcH/2 + 10 * n) * sin(angle)

​

         curveVertex(x, y)

       }

    }

    curveVertex(centerX + w/2 * cos(endAngle),

                centerY + arcH/2 * sin(endAngle))

    endShape()  

  }

}

​

function drawName(name) {

  var direction = -1

  for (var i = 0; i < name.length - 1; i++) {

    var currLetter = name[i];

    var currIndex = letters.split("").findIndex(char => char == currLetter);

    var currX = (xWidth/26) * currIndex;

​

    var nextLetter = name[i + 1];

    var nextIndex = letters.split("").findIndex(char => char == nextLetter);

    var nextX = (xWidth/26) * nextIndex;

    var centerX = currX + (nextX - currX)/2;

    var centerY = height/2;

    var radius = abs(nextX - currX)/2;

    if (direction == 1) {

      arc(centerX, height/2 - 5, abs(nextX - currX), abs(nextX - currX), 180, 360);

    }

    if (direction == -1) {

      arc(centerX, height/2 + 5, abs(nextX - currX), abs(nextX - currX), 0, 180);

    }

​

    direction *= -1;

  }

}

​

function saveImage() {

  save(`${firstName}-${secndName}.jpeg`)

}