var identity = "developer";

var invert = 1;

var len = name.length;

var a = "a".charCodeAt();

var radius = 150;

var totalAlphabets = 26;

var plan;

var plan1;

​

function preload() {

  plan = loadImage('plan.png');

  plan1 = loadImage('plan1.png');

}

​

function setup() {

  noLoop();

  createCanvas(400, 400);

  name = name.toLowerCase();

}

​

function draw() {

  if (invert == 0) background(255);

  else background(0);

​

  if (identity === "developer") fill(252, 3, 69, 255);

  else if (identity === "designer") fill(0, 166, 255, 255);

​

  noStroke();

  beginShape();

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

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

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

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

      vertex(xCurr, yCurr);  

    }

  endShape(CLOSE);

  push();

    translate(width / 2, height / 2);

    rotate(PI / 4);

    imageMode(CENTER);

    if (invert == 0) image(plan, 0, 0, plan.width / 1.8, plan.height / 1.8);

    else image(plan1, 0, 0, plan.width / 1.8, plan.height / 1.8);

  pop();

}

​

function keyPressed() {

  console.log(key);

  if (key == ' ') {

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

    draw();

  }

}