// let word;

let texInput;

let colorPicker1;

let colorPicker2;

let button1;

let button2;

let button3;

let button4;

let slider1;

let slider2;

​

function setup() {

  createCanvas(400, 400);

  textAlign(CENTER, CENTER);

  textSize(60);

  angleMode(DEGREES)

  textInput = createInput('AROUND')

  textInput.position(0,0);

  colorPicker1 = createColorPicker('#8ED14D')

  colorPicker1.position(0,30)

  colorPicker2 = createColorPicker('lightyellow')

  colorPicker2.position(60,30)

  button1 = createButton('SAVE PIC');

  button1.position(0,70)

  button1.mousePressed(function() {

    saveCanvas(c, 'text4.jpeg')

  })

  button2 = createButton('SAVE GIF')

  button2.position(90, 70)

  button2.mousePressed(function() {

    saveGif('rotate-gif', 2)

  })

  button3 = createButton('PAUSE')

  button3.position(0, 100);

  button3.mousePressed(function() {

    noLoop();

  })

  button4 = createButton('PLAY')

  button4.position(70, 100)

  button4.mousePressed(function(){

    Loop();

  })

  slider1 = createSlider(0, 10, 1, 0.1);

  slider1.size(100)

  slider1.position(width - 100, 35)

  slider2 = createSlider(50, 200, 1)

  slider2.size(100)

  slider2.position(width - 100, 0)

​

}

​

​

function draw() {

  // textSize(slider1.value())

  // text(textinput.value(), width / 2, height /2);

//important step

  word = textInput.value()

  let speed = slider1.value();

  background(colorPicker1.value());

  fill(colorPicker2.value());

  translate(width /2, height /2);

  rotate(frameCount * speed);

  console.log(textInput.value())

 for(let index = 0; index < word.length; index +=1){

   push()

   let amountToRotate=map(index, 0, word.length, 0, 360)

   let letter = word[index];

   rotate(amountToRotate)

   // text("A", 0, 100)

   text(word[index], 0, -100)

   pop();

 }

}