​

var monthColors = [

  'rgb(253, 236, 130)',

  'rgb(210, 234, 200)',

  'rgb(179, 132, 185)',

  'rgb(243, 182, 112)',

  'rgb(170, 182, 191)',

  'rgb(245, 207, 228)',

  'rgb(137, 176, 208)',

  'rgb(188, 220, 120)',

  'rgb(236, 134, 119)',

  'rgb(189, 187, 215)',

  'rgb( 93, 115,  64)',

  'rgb(156, 209, 199)'

];

​

// Change this to change the color!

var selectedColor = monthColors[2];

​

var font;

​

function preload() {

  font = loadFont("./fonts/Montserrat-Medium.ttf");

}

​

function setup() {

  createCanvas(278, 393);

​

  angleMode(DEGREES);

​

  nameInput = createInput("Muriel Cooper", "text");

  nameInput.attribute("placeholder", "Your name");

  nameInput.position(300, 0);

​

  var downloadButton = createButton("Download as JPEG");

  downloadButton.attribute("onclick", "saveImage()");

  downloadButton.position(300, 30);

​

  textFont(font);

  textSize(16);

  textAlign(CENTER, CENTER);

}

​

function draw() {

  background('#F4F4F4');

​

  drawName();

}

​

function drawName() {

  push();

  noFill();

​

  stroke(selectedColor);

  strokeWeight(1);

  rect(10, 10, width - 20, height - 20);

  strokeWeight(6);

  var name = nameInput.value();

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

​

  var xStart = 20;

  var yStart = 10;

  var xDiff = (width - 30) / 26;

  var yDiff = (height - 100) / (nameClean.length - 1);

​

  beginShape();

  for (var i = 1; i < nameClean.length; i++) {

    var prevCharNum = nameClean[i - 1].charCodeAt(0) - 97;

    var currCharNum = nameClean[i].charCodeAt(0) - 97;

    vertex(xStart + prevCharNum * xDiff,

           yStart + (i % 2 == 0 ? i - 1 : i + 1) * yDiff);

    vertex(xStart + currCharNum * xDiff,

           yStart + (i % 2 == 0 ? i - 1 : i + 1) * yDiff);

​

  }

  endShape();

​

  fill('#aaa');

  noStroke();

  text(name, 0.5 * width, height - 40);

​

  pop();

}

​

function saveImage() {

  var name = nameInput.value();

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

​

  save(nameClean + ".jpeg");

}