​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  rectMode(CENTER);

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

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

  nameInput.position(410, 0);

  dateInput = createInput("12", "number");

  dateInput.attribute("min", 1);

  dateInput.attribute("max", 31);

  dateInput.position(410, 30);

  var separator = createSpan("/");

  separator.position(450, 32);

​

  monthInput = createInput("5", "number");

  monthInput.attribute("min", 1);

  monthInput.attribute("max", 12);

  monthInput.position(460, 30);

}

​

function draw() {

  background('#FFFAF0');

  drawNameB();

  //drawDate();

  //drawMonth();

}

​

​

​

function drawNameB() {

  push();

  translate(200, 200);

  strokeWeight(3);

  stroke(255, 114, 92);

  //fill(255, 223, 223, 100);

  noFill();

​

  var name = nameInput.value();

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

​

  // Point on circle at angle:

  // (x, y) = (r * cost, r * sint)

  beginShape();

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

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

    var angle = 360/26 * charNumber;

​

    if (i === 0 || i === name.length - 1) {

      curveVertex(100 * cos(angle), 100 * sin(angle));  

    }

    curveVertex(100 * cos(angle), 100 * sin(angle));

  }

  endShape();

  push()

  var letters = 'abcdefghijklmnopqrstuvwxyz'

  fill(0);

  noStroke();

  for (var i = 0; i < 26; i += 1) {

    var angle = 360/26 * i;

    circle(100 * cos(angle), 100 * sin(angle), 4)

    text(letters[i], 120 * cos(angle), 120 * sin(angle))

  }

  pop()

​

  // stroke('#aaa');

  // ellipse(0, 0, 200);

​

  pop();

}

​

​

function drawDate() {

  var date = dateInput.value();

}

​

function drawMonth() {

  var month = monthInput.value();

}

​

function keyPressed() {

  if (key === "s") {

    save()

  }

}