* How to use:

 * Help the text get back it's groove by clicking on the canvas

 * LET"S GET GROOVY

 *

 * Vidya Kannappan N10887016

 *

 * Code adapted from: 

 *https://p5js.org/reference/#/p5.Font/textToPoints

 *https://p5js.org/reference/#/p5/vertex

 *Learnt how to use texttopoints() and vertex() from here but other

 than that it is my own code

 */

​

let font;

let points;

//waviness of text

let sway = 0;

//how fast the background color switches

let backgroundColor = 0;

let textx = 50;

let texty = 270;

let msg = "Groovy";

let xspeed = 2.5;

let yspeed = 2.5;

​

function preload() {

  font = loadFont("data/SpicyRice-Regular.ttf");

}

​

function setup() {

  createCanvas(500, 500);

  colorMode(HSB);

​

  //convert fonts into points

  points = font.textToPoints(msg, 0, 0, 120, {

    // determines how many points there are

    sampleFactor: 0.25,

    //determines complexity of points

    simplifyThreshold: 0,

  });

}

​

function draw() {

  //colour changing background

  background((backgroundColor * frameCount) % 360, 100, 100);

​

  /*make text curvy*/

  //position of text

  translate(textx, texty);

  //need to use begin shape when using vertex

  beginShape(POINTS); //POINTS converts outline of shape into dots

  stroke("white");

  strokeWeight(5);

  //vertex specifies coordinates of points

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

    vertex(

      points[i].x + sin(frameCount * 0.05 + points[i].y * 0.1) * sway,

      points[i].y

    );

  }

  //endshape needs to be here for vertex() to work

  endShape();

​

  /*End product, text dancing on it's own*/

  if (sway === 16) {

    textx += xspeed;

    texty += yspeed;

​

    //keeps text within canvas and bouncing of the walls

    if (textx > 130 || textx < 0) {

      xspeed = -xspeed;

    } else if (texty > 470 || texty < 90) {

      yspeed = -yspeed;

    }

  }

}

​

//Get the word to dance more every click

function mouseClicked() {

  if (sway < 16) {

    //increases curvyness of word

    sway += 2;

    //increases background color changing speed

    backgroundColor += 0.6;

    //shifts text to random position every click

    textx = random(0, 130);

    texty = random(90, 470);

  }

}

​