text:"Hello There!",

    textR:0,

    textG:0,

    textB:0,

    textsize:50,

    textspacing:1

};

​

var x = [];

var y = [];

var segLength = 30;

var numSegs = 10;

​

function setup() { 

    var canvas = createCanvas(800, 800);

    canvas.parent("canvasParent");

    strokeWeight(2);

    textAlign(CENTER,CENTER);

    reload();

};

​

function draw(){

      background(255);

      dragSegment(0, mouseX, mouseY);

      for(var i=0; i < CHAINDETAILS.text.length-1; i++) {

       dragSegment(i+1, x[i], y[i]);

      }

}

​

function dragSegment(i, xin, yin) {

    var dx = xin - x[i];

    var dy = yin - y[i];

    var angle = atan2(dy,dx);

    var thisLetter = CHAINDETAILS.text[i];

    var prevLetter = CHAINDETAILS.text[i-1];

    if(! prevLetter) {

      prevLetter = " ";

    }

    let tlw = textWidth(thisLetter);

    let plw = textWidth(prevLetter);

    let ts = CHAINDETAILS.textspacing;

    var w = (tlw + plw) * (ts / 2);

    x[i] = xin - cos(angle) * w;

    y[i] = yin - sin(angle) * w;

  segment(CHAINDETAILS.text[i], w, x[i], y[i], angle);

}

​

function segment(c,w,x,y,a){

  push();

  translate(x, y);

  //point(0, 0);

  rotate(a+PI);

  line(0, 0, -w, 0);

  ellipse(0, 0, 2, 2);

  text(c, 0, 0);

  pop();

}

​

​

function reload(){

  // eval("CHAINDETAILS = "+document.getElementById('setup').value);

  stroke(CHAINDETAILS.textR,CHAINDETAILS.textG,CHAINDETAILS.textB);

  fill(CHAINDETAILS.textR,CHAINDETAILS.textG,CHAINDETAILS.textB);

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

        x.push(width/2);

        y.push(height/2);

  }

   textSize(CHAINDETAILS.textsize);

}

​

​