var len = name.length;

var a = "a".charCodeAt();

var radius = 150;

var totalAlphabets = 26;

​

​

function setup() {

  noLoop();

  createCanvas(400, 400);

  name = name.toLowerCase();

}

​

function draw() {

  background(255);

​

  noFill();

  stroke(0);

  strokeWeight(10);

  ellipse(width / 2, height / 2, radius * 2);

​

  strokeWeight(3);

  for (var i = 1; i < len; i++) {

    var posCurr = name[i].charCodeAt() - a;

    var posPrev = name[i - 1].charCodeAt() - a;

​

    var xCurr = width / 2 + radius * cos(posCurr * TWO_PI / totalAlphabets - PI / 2);

    var yCurr = height / 2 + radius * sin(posCurr * TWO_PI / totalAlphabets - PI / 2);

​

    var xCurrCtrl = (width / 2 + xCurr) / 2;

    var yCurrCtrl = (height / 2 + yCurr) / 2;

​

    var xPrev = width / 2 + radius * cos(posPrev * TWO_PI / totalAlphabets - PI / 2);

    var yPrev = height / 2 + radius * sin(posPrev * TWO_PI / totalAlphabets - PI / 2);

​

    var xPrevCtrl = (width / 2 + xPrev) / 2;

    var yPrevCtrl = (height / 2 + yPrev) / 2;

    bezier(xPrev, yPrev, xPrevCtrl, yPrevCtrl, xCurrCtrl, yCurrCtrl, xCurr, yCurr,);

  }

}

​

function keyPressed() {

  console.log(key);

  if (key == ' ') {

    saveCanvas((name + '-' + (floor(random(100)))), 'png');

    draw();

  }

}