let letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; // Letters to use for particles

let repellentColor;

let repellentRadius = 200; // Radius of the repellent area

let colors = ['#00f5d4', '#00bbf9', '#fee440', '#ff006e']; // Array of colors

let customFont; // Variable to store the custom font

​

function preload() {

  // Load a custom font. Make sure the font file is in the 'assets' folder

  customFont = loadFont('Sniglet-ExtraBold.ttf'); // Replace with your font file name

}

​

function setup() {

  createCanvas(1920, 1080);

  textSize(32); // Set the size for the letters

  textAlign(CENTER, CENTER); // Align text to the center

  textFont(customFont); // Apply the custom font

  repellentColor = color(0, 0, 0, 100); // Semi-transparent black color for the repellent area

​

  // Create particles with diverse initial positions and velocities

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

    particles.push(new Particle(random(width), random(height)));

  }

  noStroke(); // Ensure no stroke is drawn around particles

}

​

function draw() {

  background(0, 20); // Trail effect for blending motion

​

  // Draw repellent area if mouse is within canvas

  let mousePos = createVector(mouseX, mouseY);

  if (mousePos.x >= 0 && mousePos.x <= width && mousePos.y >= 0 && mousePos.y <= height) {

    drawRepellentArea(mousePos, repellentRadius); // Draw repellent shape with radius

  }

​

  // Apply repellent force and update particles

  for (let particle of particles) {

    particle.update(mousePos);

    particle.display();

  }

​

  // Remove particles that move off-screen

  for (let i = particles.length - 1; i >= 0; i--) {

    let particle = particles[i];

    if (particle.isOutOfScreen()) {

      particles.splice(i, 1);

      // Add new particles to keep the number constant

      particles.push(new Particle(random(width), random(height)));

    }

  }

}

​

function drawRepellentArea(center, radius) {

  noStroke();

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

    let angle = random(TWO_PI);

    let rad = random(radius);

    let x = center.x + rad * cos(angle);

    let y = center.y + rad * sin(angle);

    let size = random(20, 50); // Randomize size of each "brushstroke"

    let alpha = random(50, 150); // Randomize opacity

    fill(repellentColor.levels[0], repellentColor.levels[1], repellentColor.levels[2], alpha); // Apply semi-transparent color

    ellipse(x, y, size, size); // Draw the brushstroke

  }

}

​

class Particle {

  constructor(x, y) {

    this.pos = createVector(x, y);

    this.vel = createVector(random(-2, 2), random(-2, 2)); // Diverse initial velocities

    this.acc = createVector(0, 0);

    this.maxSpeed = 2;

    this.size = random(10, 20);

    this.letter = letters.charAt(floor(random(letters.length))); // Random letter

    this.baseColor = color(random(colors)); // Randomly assign one of the specified colors

    this.currentColor = this.baseColor;

    this.distortion = random(0.5, 1.5); // Amount of distortion

  }

​

 update(mousePos) {

    // Smooth repellent effect using easing

    let easing = 0.1; // Increased the repellent strength

    let repellentForce = p5.Vector.sub(this.pos, mousePos);

    let distance = repellentForce.mag();

    if (distance < repellentRadius) { 

        // Use proximity to gradually affect repellent force and color

        let strength = map(distance, 0, repellentRadius, 6, 0); // Stronger and faster repellent force

        repellentForce.setMag(strength);

        this.acc.add(repellentForce);

        // Smooth transition in color based on proximity to the repellent

        let proximityRatio = distance / repellentRadius;

        this.currentColor = lerpColor(this.baseColor, color(255, 255, 255), 1 - proximityRatio); // Transition to white near the repellent

​

        // Gradually reduce size as particles approach the repellent

        this.size = lerp(10, 5, 1 - proximityRatio); // Shrink size near repellent

    }

​

    // Add random force to ensure more varied movement

    let randomForce = p5.Vector.random2D().mult(0.05);

    this.acc.add(randomForce);

​

    // Update velocity and position

    this.vel.add(this.acc);

    this.vel.limit(this.maxSpeed);

    this.pos.add(this.vel);

​

    // Reset acceleration

    this.acc.mult(0);

​

    // Wrap around the edges

    if (this.pos.x > width) this.pos.x = 0;

    if (this.pos.x < 0) this.pos.x = width;

    if (this.pos.y > height) this.pos.y = 0;

    if (this.pos.y < 0) this.pos.y = height;

}

​

​

  display() {

    // Apply some distortion to simulate mixed paint effect

    let distortedX = this.pos.x + random(-this.distortion, this.distortion);

    let distortedY = this.pos.y + random(-this.distortion, this.distortion);

    fill(this.currentColor); // Use the assigned color for the letters

    noStroke(); // Ensure no stroke is drawn around the letters

    text(this.letter, distortedX, distortedY); // Display the letter with distortion

  }

​

  isOutOfScreen() {

    return (this.pos.x < 0 || this.pos.x > width || this.pos.y < 0 || this.pos.y > height);

  }

}

​