let letters = [];

let letterTrail = [];

let letterColor;

let is3D = false;

let noiseFactor = 0;

​

function preload() {

  myFont = loadFont("fonts/Ralgan.otf"); //custom font Ralgan

}

​

function setup() {

  createCanvas(1200, 800);

  textSize(200);

  textFont(myFont);

  textStyle(BOLD);

  textAlign(CENTER, CENTER);

  letterColor = color(255, 0, 0); // start color

  let chars = ["R", "A", "Y"]; //letters

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

    letters.push({

      letter: chars[i],

      pos: createVector(width / 2 + i * 120, height / 2),

      rotation: 0,

      isSelected: false,

    });

  }

}

​

function draw() {

  KBMovement();

  background(0);

  noStroke();

  //trails drawing

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

    let trail = letterTrail[i];

    push();

    fill(trail.color);

    translate(trail.pos.x, trail.pos.y);

    rotate(trail.rotation);

    text(trail.letter, 0, 0);

    pop();

  }

​

  while (letterTrail.length > 5000) { // Limit trail length

    letterTrail.shift();

  }

​

  // Main letter drawing

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

    let letterEntity = letters[i];

​

    push();

    fill(letterColor);

​

    // Apply noise if letter selected

    if (letterEntity.isSelected && noiseFactor !== 0) {

      letterEntity.pos.x += random(-noiseFactor, noiseFactor);

      letterEntity.pos.y += random(-noiseFactor, noiseFactor);

    }

​

    makeTrail(letterEntity); //new trail each frame

​

    //turn text 3D

    if (is3D) {

      make3D(letterEntity);

    } else {

      //2D text

      stroke(1000);

      translate(letterEntity.pos.x, letterEntity.pos.y);

      rotate(letterEntity.rotation);

      text(letterEntity.letter, 0, 0);

    }

    pop();

  }

}

​

function make3D(entity) { //make 3D function

  let fakeDepth = 20;

  for (let i = 0; i < fakeDepth; i++) {

    stroke(1000);

    fill(255 - i * (letterColor / fakeDepth)); //3D gradient

    let offsetPos = p5.Vector.add(entity.pos, createVector(-i, -i));

    push();

    translate(offsetPos.x, offsetPos.y);

    rotate(entity.rotation);

    text(entity.letter, 0, 0);

    pop();

  }

}

​

function makeTrail(entity) { //make trail function

  noStroke();

  letterTrail.push({

    letter: entity.letter,

    pos: entity.pos.copy(),

    color: color(

      letterColor.levels[0],

      letterColor.levels[1],

      letterColor.levels[2],

      letterColor.levels[3]

    ), // capture current color

    rotation: entity.rotation,

  });

}

​

function mousePressed() {

  // Check if letter clicked

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

    let letter = letters[i];

    let letterWidth = textWidth(letter.letter);

    if (

      mouseX > letter.pos.x - letterWidth / 2 &&

      mouseX < letter.pos.x + letterWidth / 2 &&

      mouseY > letter.pos.y - 100 / 2 &&

      mouseY < letter.pos.y + 100 / 2

    ) {

      letter.isSelected = true;

    } else {

      letter.isSelected = false;

    }

  }

}

​

function mouseDragged() {

  // move letter with mouth

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

    let letter = letters[i];

    if (letter.isSelected) {

      letter.pos.x = mouseX;

      letter.pos.y = mouseY;

    }

  }

}

​

function keyPressed() {

  switch (keyCode) {

    case 82: // 'R' key - noise

      noiseFactor = noiseFactor + 1; // noise + 1

      break;

    case 89: // 'Y' key - 3D toggle

      is3D = !is3D;

      break;

    case SHIFT: // Shift - color change

      letterColor = color(random(255), random(255), random(255));

      break;

  }

}

function KBMovement() {

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

    if (letters[i].isSelected) {

      if (keyIsDown(LEFT_ARROW)) letters[i].pos.x -= 5;

      if (keyIsDown(RIGHT_ARROW)) letters[i].pos.x += 5;

      if (keyIsDown(UP_ARROW)) letters[i].pos.y -= 5;

      if (keyIsDown(DOWN_ARROW)) letters[i].pos.y += 5;

      if (keyIsDown(SHIFT)) {

      letterColor = color(random(255), random(255), random(255));

      }

      if (keyIsDown(65)) letters[i].rotation += 0.1; // 'A' key - rotation

    }

  }

}

​