​

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');

​

  translate(200, 200);

  rotate(-90);

​

  drawMonth();

  drawDate();

  drawName();

}

​

function drawName() {

  push();

  //translate(-70, -40);

​

  noFill();

  strokeWeight(1);

  stroke('#333333');

​

  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) - 96;

    var angle = 360/26 * charNumber;

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

  }

  endShape(CLOSE);

  strokeWeight(2);

  stroke('#ccc');

  ellipse(0, 0, 200);

​

  pop();

}

​

​

function drawDate() {

  push();

​

  translate(0, -80);

  rotate(-20);

​

  noStroke();

  fill('#fce2aeae');

​

  var date = Number(dateInput.value());

  var tensDigit = (date / 10 | 0);

  var zeroDigit = (date % 10);

​

  var width  = zeroDigit * 30 + 15;  

  var height = tensDigit * 30 + 15;

​

  rect(0, 0, width, height);

  pop();

}

​

function drawMonth() {

  push();

​

  //translate(-70, -40);

  rotate(45);

  translate(55, 0);

​

  strokeWeight(3);

  stroke('#ffb3b3');

​

  var month = Number(monthInput.value());

  for (var i = 0; i < month; i++) {

    line(i * 10, -120 + i * 10, i * 10, 120 - i * 10);

  }  

​

  pop();

}