let c;

let img;

let word;

let textinput;

let colorPicker1;

let colorPicker2;

let button1;

let button2;

let button3;

let button4;

let slider1;

let slider2;

let slider3;

let slider4;

let slider5;

let slider6;

let speed;

​

function preload() {

   img = loadImage('./ios_large_1632758925_image.jpg');

}

​

function setup() {

  c = createCanvas(600, 600);

​

  angleMode(DEGREES);

  textAlign(CENTER, CENTER);

  textinput = createInput("ROTATE");

  textinput.position(10, 10);

​

  colorPicker1 = createColorPicker("lightgrey");

  colorPicker1.position(10, 30);

​

  colorPicker2 = createColorPicker("blue");

  colorPicker2.position(70, 30);

​

  button1 = createButton("DONT CLICK ME");

  button1.position(10, 65);

  button1.mousePressed(function () {

    image(img, 300, 300, width, height);

  });

​

  button2 = createButton("SAVE GIF");

  button2.position(10, 85);

  button2.mousePressed(function () {

    saveGif("rotate-gif", 2);

  });

​

  button3 = createButton("PLAY");

  button3.position(10, 105);

  button3.mousePressed(function () {

    loop();

  });

​

  button3 = createButton("PAUSE");

  button3.position(10, 125);

  button3.mousePressed(function () {

    noLoop();

  });

​

  // if (paused){

  //   loop();

  //   pause = false

  // } else {

  //   noLoop()

  //   pause = true

  // }

​

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

  slider1.position(10, 160);

  slider1.size(100);

​

  slider2 = createSlider(-300, -1, 0, 0.1);

  slider2.position(10, 180);

  slider2.size(100);

​

  slider3 = createSlider(30, 300, 0, 0.1);

  slider3.position(10, 200);

  slider3.size(100);

​

  slider4 = createSlider(0, 400, 0, 0.1);

  slider4.position(10, 220);

  slider4.size(100);

​

  slider5 = createSlider(30, 300, 0, 0.1);

  slider5.position(10, 240);

  slider5.size(100);

  slider6 = createSlider(30, 300, 0, 0.1);

  slider6.position(10, 260);

  slider6.size(100);

}

​

function mouseClicked() {

  console.log("CLICKED BY BUTTON");

}

​

function draw() {

  textSize(slider3.value());

​

  let speed = slider1.value();

  let word = textinput.value();

  let letter = word;

​

  background(colorPicker1.value());

​

  translate(width / 2, height / 2);

​

  rotate(frameCount * speed);

  //use negative number to make it readable.

​

  //console.log(textinput.value())

  push();

​

  for (let index = 0; index < slider6.value(); index += 1){

    let amountToRotate = map(index, 0, 100, 0, 360);

    rotate(amountToRotate);

  }

  fill("white");

  circle(0, slider4.value(), slider5.value());

​

  pop();

​

  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);

​

    fill(colorPicker2.value());

    text(word[index], 0, slider2.value()), 

    pop();

  }

}

​