sketches/FluidSketch.js

export const fluidReasoning = "To capture the essence of 'fluid', I'll use Perlin noise to create smooth, organic movement of particles. The particles will flow like water or liquid, with each particle following its own noise-based path while maintaining a cohesive, flowing appearance. The blue gradient colors reinforce the liquid feeling, and the screen blend mode creates a glowing effect that enhances the fluid motion.";

export const fluidSketch = `let font;
let fontSize = 200;
let word = "fluid";
let points;
let particles = [];
let particleMinSize = 3;
let particleMaxSize = 7;

// Fluid effect parameters
let noiseScale = 0.015;    // Scale of the Perlin noise - adjust for wave size
let noiseStrength = 20;    // Intensity of the noise displacement
let noiseSpeed = 0.002;    // Speed of the noise evolution

// Colors for gradient
let color1 = "#217BFE";
let color2 = "#078BFE";
let color3 = "#AC87EB";

function preload() {
  font = loadFont('/fonts/GoogleSans-Bold.ttf');
}

function setup() {
  createCanvas(500, 500);
  background(0);
  textFont(font);
  textSize(fontSize);
  textAlign(CENTER, CENTER);

  // Get the width of the text
  let textW = textWidth(word);
  
  // If text is too wide, scale down fontSize
  if (textW > width * 0.8) {
    fontSize = fontSize * (width * 0.8) / textW;
    textSize(fontSize);
    textW = textWidth(word);
  }

  // Get points for the text centered in canvas
  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
    sampleFactor: 0.1
  });

  // Create particles at each point
  for (let i = 0; i < points.length; i++) {
    particles.push(new Particle(points[i].x, points[i].y, i, points.length));
  }
}

function draw() {
  blendMode(BLEND);  // Reset to default blend mode first
  background(0);     // Clear with black background
  blendMode(SCREEN); // Then set screen blend mode for particles

  for (let particle of particles) {
    particle.update();
    particle.display();
  }
}

class Particle {
  constructor(x, y, index, totalParticles) {
    this.pos = createVector(x, y);
    this.originalPos = createVector(x, y);
    this.originalX = x;
    this.originalY = y;
    this.size = random(particleMinSize, particleMaxSize);
    this.alpha = 255;
    this.colorValue = this.getColor(index, totalParticles);
  }

  getColor(index, totalParticles) {
    let normalizedIndex = index / (totalParticles - 1);
    let particleColor;
    if (normalizedIndex < 0.5) {
      particleColor = lerpColor(color(color1), color(color2), normalizedIndex * 2);
    } else {
      particleColor = lerpColor(color(color2), color(color3), (normalizedIndex - 0.5) * 2);
    }
    return particleColor;
  }

  update() {
    let noiseValueX = noise((this.originalX + frameCount) * noiseScale, 
                           this.originalY * noiseScale, 
                           frameCount * noiseSpeed);
    let noiseValueY = noise(this.originalX * noiseScale, 
                           this.originalY * noiseScale, 
                           frameCount * noiseSpeed + 1000);

    let offsetX = map(noiseValueX, 0, 1, -noiseStrength, noiseStrength);
    let offsetY = map(noiseValueY, 0, 1, -noiseStrength, noiseStrength);

    this.pos.x = this.originalPos.x + offsetX;
    this.pos.y = this.originalPos.y + offsetY;
  }

  display() {
    noStroke();
    fill(this.colorValue);
    ellipse(this.pos.x, this.pos.y, this.size, this.size);
  }
}`;