let poem;

let startIndex = 0;

let me;

let bg = "black"

​

function preload(){

  me = loadImage("me_no_bg.png")

  sourceText = loadStrings("poem.txt");

}

​

function setup() {

  createCanvas(500, 500);

  poem = sourceText.join(' ');

  textFont("Times New Roman");

}

​

function draw() {

  background(bg);

  frameRate(5);

  //

  let charIndex = startIndex;

  let w = width / me.width;

  let h = height / me.height;

  Waves();

   me.loadPixels();

  //So over here we are making use of a pixel array in p5js

  //every pixel has an rgb value and a alpha value, stored in an array so we go to that particular pixel using the formula i + j * me.widthand then access the values. 

  for (let j = 0; j < me.height; j++) {

   for (let i = 0; i < me.width; i++){

      const pixelIndex = (i + j * me.width) * 4;

      const r = me.pixels[pixelIndex + 0];

      const g = me.pixels[pixelIndex + 1];

      const b = me.pixels[pixelIndex + 2];

      const avg = (r + g + b) / 3;

      noStroke();

     //to change the color of the text according to the rgb value of the pixel position in the pixel array

     if(mouseIsPressed){

       fill(r, g, b);

     }

     else{

       fill(avg);

     }   

      textSize(w*1.2);

      textAlign(CENTER, CENTER);

     //for positioning of the poem

      text(poem.charAt(charIndex % poem.length), i * w + w * 0.5, j * h + h * 0.5);

      charIndex++;

    }

  }

  //counter to move the poem according to the framerate

  startIndex++;

}

​

function Waves(){

    for(i = 450; i<height; i+=height/40){

    beginShape();

    noFill();

    stroke((mouseX+mouseY)*0.5, random(100, 200), 256)

    curveVertex(0,i)

    for (j = 0; j < width; j+=width/20) {

      //using noise fuction to create smooth waves

      var d = dist(j,i,width/2,i)

      curveVertex(j,i-noise(i+j*0.08)*(width/2-d))

    }

    curveVertex(width,i)

    curveVertex(width,i)

    endShape();

  }

}

​

// Reference: https://www.youtube.com/watch?v=55iwMYv8tGI&t=28s

​