let word;

let textinput;

let colorpicker1;

let colorpicker2;

let button;

let slider1;

let slider2;

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  textAlign(CENTER, CENTER);

  textSize(50);

  textinput =createInput("DRAWING")

  textinput.position(0,0);

  colorpicker1 = createColorPicker("#bcf4f5");

  colorpicker1.position(0,30);

  colorpicker2 = createColorPicker("#ffb7c3");

  colorpicker2.position(60,30);

  button1 = createButton("SAVE");

  button1.position(0, 70);

  button1.mousePressed(function(){

   saveCanvas(c,"Tool.jpeg", 6)

  });

  button2 = createButton("GIF");

  button2.position(70, 70);

  button2.mousePressed(function(){

   saveGif("Rotate.gif", 6)

  });

  button3 = createButton("PAUSE");

  button3.position(340, 0);

  button3.mousePressed(function(){

   noLoop();

  });

   button4 = createButton("PLAY");

  button4.position(290, 0);

  button4.mousePressed(function(){

   noLoop();

  });

  slider1=createSlider(0,15,30)

  slider1.size(100)

  slider1.position(width-105, 30);

  slider2=createSlider(50, 200, 1)

  slider2.size(100)

  slider2.position(width-105, 50);

}

​

function draw() {

  word=textinput.value();

  textinput.position(0,0);

  let speed = slider1.value();

  background(220);

  background(colorpicker1.value());

  fill(colorpicker2.value());

  translate(width/2, height/2);

  rotate(frameCount * speed);

  //textSize(64);

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

  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

    rotate(amountToRotate);

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

    text(letter, 0, -slider2.value());

    pop();

  }  

}