​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  rectMode(CENTER);

}

​

function draw() {

  background('#F4F4F4');

  drawName();  

}

​

​

function drawName() {

  push();

  translate(200, 200);

  strokeWeight(1);

  stroke(255, 114, 92);

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

  noFill();

​

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

}

​