let e1, e2, e3;

let selectedLetter = null;

let letterPositions = []; // Array to store previous letter positions

let lastColorChangeTime = 0; // Variable to keep track of the last color change time

let colorChangeInterval = 1000; // Color change interval in milliseconds

let mainLetterColor;

let is3D = false; // This will track whether 3D mode is on or off

​

function preload() {

  myFont = loadFont('fonts/Ralgan.otf'); // Ensure the font file path is correct

}

​

function setup() {

  createCanvas(600, 400);

  textSize(200);

  textFont(myFont);

  textStyle(BOLD);

  textAlign(CENTER, CENTER);

  e1 = createVector(200, height / 2);

  e2 = createVector(300, height / 2);

  e3 = createVector(400, height / 2);

  mainLetterColor = "red";//color(random(255), random(255), random(255));

  noStroke(); // No border around the letters

}

​

function draw() {

  background(0);

​

  // Check if it's time to change color

  if (millis() - lastColorChangeTime > colorChangeInterval) {

    //mainLetterColor = color(random(255), random(255), random(255));

    lastColorChangeTime = millis();

  }

​

  // Update positions array for the trail effect before drawing the main letters

  letterPositions.push({ letter: 'R', x: e1.x, y: e1.y, color: mainLetterColor });

  letterPositions.push({ letter: 'A', x: e2.x, y: e2.y, color: mainLetterColor });

  letterPositions.push({ letter: 'Y', x: e3.x, y: e3.y, color: mainLetterColor });

​

  // Limit the trail length by removing the oldest positions

  if (letterPositions.length > 100) {

    letterPositions.shift(); // Remove the oldest positions

  }

​

  // Draw the letters from previous frames (the trail)

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

    let pos = letterPositions[i];

    fill(pos.color);

    text(pos.letter, pos.x, pos.y);

  }

​

  // Handle the letter movement controls

  if (selectedLetter) {

    if (keyIsDown(LEFT_ARROW)) selectedLetter.x -= 5;

    if (keyIsDown(RIGHT_ARROW)) selectedLetter.x += 5;

    if (keyIsDown(UP_ARROW)) selectedLetter.y -= 5;

    if (keyIsDown(DOWN_ARROW)) selectedLetter.y += 5;

  }

​

  // Draw the main letters, with a 3D effect if is3D is true

  RAY();

}

​

function RAY() {

  push(); // Save current drawing state

  fill(mainLetterColor);

  if (is3D) {

    let fauxDepth = 20; // The number of layers for the faux 3D effect

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

      fill(255 - i * (mainLetterColor / fauxDepth)); // Gradient effect for faux 3D

      stroke(1000);

      text('R', e1.x - i, e1.y - i);

      text('A', e2.x - i, e2.y - i);

      text('Y', e3.x - i, e3.y - i);

    }

  } else {

    stroke(1000);

    text('R', e1.x, e1.y);

    text('A', e2.x, e2.y);

    text('Y', e3.x, e3.y);

  }

  pop(); // Restore original drawing state

}

​

function mousePressed() {

  // Check if a letter was clicked

  if (dist(mouseX, mouseY, e1.x, e1.y) < 100) {

    selectedLetter = e1;

  } else if (dist(mouseX, mouseY, e2.x, e2.y) < 100) {

    selectedLetter = e2;

  } else if (dist(mouseX, mouseY, e3.x, e3.y) < 100) {

    selectedLetter = e3;

  } else {

    selectedLetter = null; // Deselect if clicked outside

  }

}

​

function keyPressed() {

  if (keyCode == 89) { // 'Y' key to toggle 3D

    is3D = !is3D;

  } else if (keyCode == 82 && colorChangeInterval ) { // 'R' key

    colorChangeInterval -= 50;

  } else if (keyCode == 65) { // 'A' key

    colorChangeInterval += 50;

  }

  else if (keyCode == SHIFT) { // 'Shift' key

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

  }

  // Prevent going below certain interval

  colorChangeInterval = max(colorChangeInterval, 100);

  console.log(colorChangeInterval);

}