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 filterSize = 3; // Adjust the filter size to your preference

​

function preload() {

  myFont = loadFont('fonts/Ralgan.otf');

}

​

function setup() {

  createCanvas(600, 400);

  textSize(200);

  textFont(myFont);

  textStyle(BOLD);

  textAlign(CENTER, CENTER);

  stroke(1000);

  e1 = createVector(200, height / 2);

  e2 = createVector(300, height / 2);

  e3 = createVector(400, height / 2);

​

  // Set an initial color for the main letters

  mainLetterColor = clr();

  noStroke(); // Remove the stroke to avoid text outlines

}

​

function clr() {

  return color(random(255), random(255), random(255));

}

​

function draw() {

  background(0);

​

  // Draw the letters at their previous positions with their respective colors

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

    let pos = letterPositions[i];

    noStroke();

    fill(pos.color);

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

  }

​

  if (selectedLetter) {

    // Handle horizontal movement

    if (keyIsDown(LEFT_ARROW)) {

      moveLetter(selectedLetter, -5, 0);

    }

    if (keyIsDown(RIGHT_ARROW)) {

      moveLetter(selectedLetter, 5, 0);

    }

​

    // Handle vertical movement

    if (keyIsDown(UP_ARROW)) {

      moveLetter(selectedLetter, 0, -5);

    }

    if (keyIsDown(DOWN_ARROW)) {

      moveLetter(selectedLetter, 0, 5);

    }

  }

​

  RAY();

​

  // Store the current positions in the array without changing their colors

  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 number of stored positions to control the trail length

  if (letterPositions.length > 100) {

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

  }

}

​

function RAY() {

  // Draw the current letters with the same color every 2 seconds

  if (millis() - lastColorChangeTime > colorChangeInterval) {

    mainLetterColor = clr(); // Change the main letters' color

    lastColorChangeTime = millis(); // Update the last color change time

  }

  fill(mainLetterColor); // Set the color for the main letters

  stroke(1000);

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

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

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

}

​

function mousePressed() {

  let d1 = dist(mouseX, mouseY, e1.x, e1.y);

  let d2 = dist(mouseX, mouseY, e2.x, e2.y);

  let d3 = dist(mouseX, mouseY, e3.x, e3.y);

​

  if (d1 < 100) {

    selectedLetter = e1;

  } else if (d2 < 100) {

    selectedLetter = e2;

  } else if (d3 < 100) {

    selectedLetter = e3;

  } else {

    selectedLetter = null;

  }

}

​

function moveLetter(letter, dx, dy) {

  letter.x += dx;

  letter.y += dy;

​

  // Ensure the letter stays within the canvas boundaries

  letter.x = constrain(letter.x, 0, width);

  letter.y = constrain(letter.y, 0, height);

}

​

function keyPressed() {

  if (keyCode == 82) { // 82 is the keyCode for the 'R' key

    colorChangeInterval = colorChangeInterval - 20;

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

    colorChangeInterval = colorChangeInterval + 20;

  }

  console.log(colorChangeInterval);

}

else if (keyCode == 89)  {

    colorChangeInterval = colorChangeInterval - 20;

  }