xxxxxxxxxx
137
let particles = [];
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);
}
}