let pGraphics;

let img;

let words = ["valuable", "worthy", "brave", "growing", "inspiring", "capable", "beautiful", "special"]

let letters = [];

​

function preload() {

  font = loadFont("Chonburi-Regular.ttf");

}

​

function setup() {

  createCanvas(800, 700);

  noStroke();

​

  textFont(font);

  textSize(40);

  pGraphics = createGraphics(width, height);

  pGraphics.smooth();

  pGraphics.textFont(font);

  pGraphics.textSize(30);

  pGraphics.fill(242, 136, 36);

  pGraphics.textAlign(CENTER);

  pGraphics.text("YOU", pGraphics.width / 2 + 1, pGraphics.height / 2 + 7);

  pGraphics.text("ARE", pGraphics.width / 2, pGraphics.height / 2 + 30);

  //pGraphics.text("YOU", pGraphics.width / 2, pGraphics.height / 2 + 20);

  // pGraphics.text("ARE", pGraphics.width / 2, pGraphics.height / 2 + 60);

  img = fisheye(pGraphics, width / 2, height / 2);

}

​

function draw() {

  background(38, 74, 140);

  image(img, 0, 0);

  //to create a flashlight effect

  fill(242, 136, 36 + sin(frameCount * 0.1) * 200);

  stroke(242, 136, 36);

  let angle = 0; 

  let radius = 200; 

  let angleIncrement=TWO_PI/words.length;

  for (let i=0; i<words.length; i++){

    let x=cos(angle)*radius + width/2;

    let y=cos(angle)*radius + height/2;

    if (mouseX>map(angle,0,TWO_PI,0,width)&&mouseX>20){}

    push()

    rotate(angle)

    translate(x,y);

    rotate(angle);

    text(words[i],0,0 );

    pop();

    angle+=angleIncrement;

  }

}

  // angleMode(DEGREES);

  // let atan2(mouseY - height / 2, mouseX - width / 2);

  // translate(width / 2, height / 2);

​

 // AS THE MOUSE COMES OVER, MORE WORDS COME

  //words appear when you move a mouse 

//   if (mouseX > 230) {

//    text("valuable", width / 2 + 162, height / 2 + 30);

//   }

​

//   if (mouseX > 144) {

//     text("inspiring", width / 2 - 348, height / 2 + 30);

//   }

​

//   push();

//   if (mouseX>120) {

//     let angle2 = radians(270);

//     translate(width / 2, 250);

//     rotate(angle2);

//     text("special", 0,0);

//   }

//   pop();

//   push();

//   if (mouseX>155) {

//     let angle2 = radians(90);

//     translate(width / 2, 500);

//     rotate(angle2);

//     text("brave", 0,0);

//   }

//   pop();

// push()

//   if (mouseX>222){ 

//    let angle2 = radians(45);

//    // translate(100, 270)

//    translate(width/2+150, height/2+120);

//     rotate((angle2)%360);

//     text("worthy", 0,0);

​

// }

//   pop()

//   push()

//   if (mouseX>110 && mouseY>140){ 

//    let angle2 = radians(135);

//    // translate(100, 270)

//    translate(width/2-150, 450);

//     rotate((angle2)%360);

//     text("growing", 0,0);

​

// }

//   pop()

//   push()

//   if (mouseX>100){ 

//    let angle2 = radians(225);

//    // translate(100, 270)

//    translate(width/2-150, 270);

//     rotate((angle2)%360);

//     text("capable", 0,0);

​

// }

//   pop()

//     push()

//   if (mouseX>130){ 

//    let angle2 = radians(305);

//    // translate(100, 270)

//    translate(width/2+150, 270);

//     rotate((angle2)%360);

//     text("beautiful", 0,0);

​

// }

//   pop()

// }

​

function fisheye(input, centerX, centerY) {

  let distances = [

    dist(centerX, centerY, 50, 100),

    dist(centerX, centerY, input.width, 0),

    dist(centerX, centerY, input.width, input.height),

    dist(centerX, centerY, 0, input.height),

  ];

  let distanceMax = max(distances);

​

  let output = createImage(input.width, input.height);

  input.loadPixels();

  output.loadPixels();

  for (let y = 0; y < input.height; y++) {

    for (let x = 0; x < input.width; x++) {

      // calculate the angle and distance between our

      // center point and the current x/y position

      // (these are 'polar' coordinates – a position defined

      // not by x/y but by angle and distance!)

      let distance = dist(x, y, centerX, centerY); // also called 'rho'

      let angle = atan2(y - centerY, x - centerX); // also called 'theta'

​

      // the magic!

      // first, a fisheye effect

      // transform distance my squaring it, then dividing

      // by the max possible distance from the center

      // the angle value stays the same

      distance = (distance * distance) / distanceMax;

​

      // convert back to cartesian (x/y) coordinates

      // using some trig so we can grab a pixel from the

      // the source image

      let tempX = centerX + cos(angle) * 1.8*  distance;

      let tempY = centerY + sin(angle) * 0.8 *  distance;

​

      // get the pixel and put it into the output image

      let px = input.get(tempX, tempY);

      output.set(x, y, px);

    }

  }

  output.updatePixels();

  return output;

}

​