var letters = "abcdefghijklmnopqrstuvwxyz";

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  textAlign(CENTER, CENTER);

  noLoop();

  strokeWeight(2);

}

​

function draw() {

  background(249);

​

  translate(width / 2, height / 2);

​

  noStroke();

  noFill();

  //ellipse(0, 0, 285, 285);

​

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

    var letter = letters[i];

    var angle = (360 / letters.length) * i;

​

    push();

    noFill();

    if (name.includes(letter)) {

      stroke("#6461A0");

    } else {

      stroke(200);

    }

    line(145 * cos(angle), 145 * sin(angle),

      155 * cos(angle), 155 * sin(angle));

    pop();

​

    push();

    noStroke();

    if (name.includes(letter)) {

      fill("#6461A0");

    } else {

      fill(200);

    }

    text(letter, 165 * cos(angle), 165 * sin(angle));

    pop();

  }

​

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

    var char = name[i];

    var r = (170 - 50) / name.length * (name.length - i);

    var angle = (360 / letters.length) * (name.charCodeAt(i) - 97);

    var nextAngle = (360 / letters.length) * (name.charCodeAt(i + 1) - 97)

​

    fill("#6461A0");

    ellipse(r * cos(angle), r * sin(angle), 5, 5);

    stroke("#6461A0");

    line(r * cos(angle),

      r * sin(angle),

      (r + (170 - 50) / name.length) * cos(angle),

      (r + (170 - 50) / name.length) * sin(angle));

​

    noFill();

    arc(0, 0, 2 * r, 2 * r, angle, nextAngle);

  }

}