​

var bookmarkX = 220;

var bookmarkY = 15;

var bookmarkWidth = 192;

var bookmarkHeight = 576;

​

var nameInput;

var name;

​

function preload() {

  font = loadFont("./Roboto-Regular.ttf");

}

​

function setup() {

  createCanvas(700, 600);

  textSize(14);

  textFont(font);

  textAlign(LEFT, CENTER);

​

  colorMode(HSB, 100);

​

  nameInput = createInput('Priti Pandurangan');

  nameInput.position(15, 35);

}

​

function draw() {

  background(240);

  fill('black');

  noStroke();

  text('Your name', 15, 20);

  name = nameInput.value().toLowerCase().replace(/[^a-z]/g, "");

  fill('black');

  rect(bookmarkX, bookmarkY, bookmarkWidth, bookmarkHeight);

​

  for (let i = 0; i < 100; i++) {

    //noStroke();

    stroke('white');

    noFill();

    // fill(250, 100, 50, 50);

    ellipse(bookmarkX + bookmarkWidth, bookmarkY + bookmarkHeight, 100 + i * 25);

  }

​

  var padding = 20;

  var gradientStart = color(name.length, 100, 100);

  var gradientStop = color(name.length + 10, 100, 50);

​

  beginShape(TRIANGLE_STRIP);

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

    let charNumber = name[i].charCodeAt(0) - 97;

    stroke('black');

    fill(lerpColor(gradientStart, gradientStop, (name.length - i)/name.length));

    vertex(bookmarkX + padding + ((bookmarkWidth - 2 * padding) / 26) * charNumber, bookmarkY + padding + ((bookmarkHeight - 2 * padding) / name.length) * i);

  }

  endShape();

}

​