​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  rectMode(CENTER);

  nameInput = createInput("Ajith", "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('#F4F4F4');

  drawNameB();

  //drawDate();

  //drawMonth();

}

​

​

function drawNameB() {

  push();

  translate(200, 200);

  strokeWeight(1);

  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) {

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

    }

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

  }

  endShape(CLOSE);

  stroke('#aaa');

  ellipse(0, 0, 200);

​

  pop();

}

​

​

function drawDate() {

  var date = dateInput.value();

}

​

function drawMonth() {

  var month = monthInput.value();

}