* the speed, canvas size, what words are displayed, and the colours of everything.

 * You can type and backspace to change what word is displayed.

 */

​

let canvasWidth = 400;

let canvasHeight = 400;

​

// String to be displayed

let inputString = "joi!"

let fontSize;

// Height of the wave and ring

let amplitude; 

// Width of ring

let xAmplitude; 

// Speed in seconds. Not quite sure what happens in that second, but it sure does

let waveSpeed = 2;

let ringSpeed = 0.5;

​

let backgroundColour = [237, 233, 100, 255];

let waveColour = [255, 0, 100, 255];

let ring1Colour = [0, 255, 0, 255];

let ring2Colour = [100, 0, 255, 255];

​

// Timer for the rate that backspace deletes keys.

let backspaceTimer = 0;

let backspaceInterval = 1;

​

function setup() {

  createCanvas(canvasWidth, canvasHeight);

  amplitude = (canvasHeight) / 4;

  xAmplitude = (canvasWidth) / 4;

}

​

function draw() {

  background(backgroundColour);

  // Scales the font size based on how wide the canvas and the string is, so that 

  // it always fits on the screen/in the ring

  fontSize = canvasWidth / (inputString.length + 1);

  textSize(fontSize);

  if (backspaceTimer < backspaceInterval)

    backspaceTimer += deltaTime / 100;

  if (keyIsDown(BACKSPACE))

  {

      if (backspaceTimer >= backspaceInterval)

      {

        backspaceTimer = 0

        inputString = inputString.slice(0, inputString.length - 1);

        backspaceHeld = true;

      }

  }

  // Goes through each letter to display it

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

    // Funky math

    // Displays the word as a wave

    let x = fontSize * (i + 0.5);

    let y = amplitude * sin(i - (millis() * 0.001 * waveSpeed)) + canvasHeight * 0.5;

    fill(waveColour);

    text(inputString[i], x, y);

    // Displays the word as a ring

    x = xAmplitude * cos(i * (2 * PI / (inputString.length + 1)) + (millis() * 0.001 * ringSpeed)) + canvasWidth * 0.5;

    y = amplitude * sin(i * (2 * PI / (inputString.length + 1)) + (millis() * 0.001 * ringSpeed)) + canvasHeight * 0.5;

    fill(ring1Colour);

    text(inputString[i], x, y);

    // Displays the word as a warping ring

    x = xAmplitude * cos(i * (2 * PI / (inputString.length + 1)) - (millis() * 0.001 * ringSpeed)) + canvasWidth * 0.5;

    y = amplitude * cos(i * (2 * PI / (inputString.length + 1)) + (millis() * 0.001 * ringSpeed)) + canvasHeight * 0.5;

    fill(ring2Colour);

    text(inputString[i], x, y);

  }

}

​

/* Add the typed key to the end of the string. Allows the user to type whatever 

 * they want into the program

 */

function keyTyped()

{

  inputString += key;

}