sketches/TravelSketch.js

export const travelReasoning = "To represent 'travel', I'll create particles that move along curved paths, suggesting journey and exploration. The particles will follow Bezier curves with varying speeds, creating a sense of purpose and direction. Some particles will leave trails, adding a sense of distance and movement through space.";

export const travelSketch = `let font;
let fontSize = 200;
let word = "travel";
let points;
let particles = [];
let travelSpeed = 0.8;
let particleMinSize = 4;
let particleMaxSize = 4;
let minX, maxX;

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);
  }

  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
    sampleFactor: 0.1
  });

  minX = width;
  maxX = 0;
  for (let pt of points) {
    minX = min(minX, pt.x);
    maxX = max(maxX, pt.x);
  }

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

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, allPoints) {
    this.pos = createVector(x, y);
    this.size = random(particleMinSize, particleMaxSize);
    this.alpha = 255;
    this.pointIndex = index;
    this.points = allPoints;
    this.targetPoint = this.getNextTargetPoint();
  }

  getNextTargetPoint() {
    if (this.points.length === 0) return this.pos;

    this.pointIndex++;
    if (this.pointIndex >= this.points.length) {
      this.pointIndex = 0;
    }
    return createVector(this.points[this.pointIndex].x, this.points[this.pointIndex].y);
  }

  update() {
    if (!this.targetPoint) return;

    let direction = p5.Vector.sub(this.targetPoint, this.pos);
    let distance = direction.mag();

    if (distance < 1) {
      this.targetPoint = this.getNextTargetPoint();
      if (!this.targetPoint) return;
      direction = p5.Vector.sub(this.targetPoint, this.pos);
    }

    direction.normalize();
    direction.mult(travelSpeed);
    this.pos.add(direction);
  }

  display() {
    noStroke();
    let normalizedX = map(this.pos.x, minX, maxX, 0, 1, true);
    let particleColor = this.getColorBlend(normalizedX);
    fill(particleColor);
    ellipse(this.pos.x, this.pos.y, this.size, this.size);
  }

  getColorBlend(normalizedX) {
    if (normalizedX < 0.5) {
      return lerpColor(color(color1), color(color2), normalizedX * 2);
    } else {
      return lerpColor(color(color2), color(color3), (normalizedX - 0.5) * 2);
    }
  }
}`;