AI Ink Flow Meditation - Zen Calligraphy Brush Simulation - xelsed.ai

function setup() {
  createCanvas(windowWidth, windowHeight);
  pixelDensity(1); // Ensure consistent pixel density across devices

  // Create graphics buffer for ink and paper texture
  pg = createGraphics(width, height);
  pg.pixelDensity(1);

  // Create graphics buffer for vignette
  vignetteGraphics = createGraphics(width, height);
  vignetteGraphics.pixelDensity(1);
  drawVignette(); // Draw vignette once, it's static

  // Initial paper texture
  drawPaperTexture(pg);

  // Set last mouse moved time
  lastMouseMovedTime = millis();
}

function draw() {
  // Clear the main canvas
  background(255);

  // Clear the ink buffer (pg) with transparency
  pg.clear();

  // Redraw the paper texture (with animating fibers)
  drawPaperTexture(pg);

  // Draw all existing ink strokes
  for (let i = inkStrokes.length - 1; i >= 0; i--) {
    inkStrokes[i].draw(pg);
    if (inkStrokes[i].isDry()) {
      inkStrokes.splice(i, 1); // Remove dry strokes to save memory and performance
    }
  }

  // Draw current ink stroke being drawn
  if (currentStroke) {
    currentStroke.draw(pg);
  }

  // Draw the combined paper and ink from pg to the main canvas
  image(pg, 0, 0);

  // --- Handle cherry blossom petals if mouse is idle ---
  mouseIdleTimer = millis() - lastMouseMovedTime;
  if (mouseIdleTimer > 3000) { // 3 seconds idle
    if (frameCount % 30 == 0) { // Add a new petal every 30 frames
      cherryBlossomPetals.push(new Petal());
    }
    for (let i = cherryBlossomPetals.length - 1; i >= 0; i--) {
      cherryBlossomPetals[i].update();
      cherryBlossomPetals[i].draw();
      if (cherryBlossomPetals[i].isOffScreen()) {
        cherryBlossomPetals.splice(i, 1);
      }
    }
  }

  // Draw vignette on top of everything
  image(vignetteGraphics, 0, 0);

  // Handle ink ripple effect (simple version)
  // Only draw if a stroke is actively being made
  if (currentStroke) {
    drawRipple(pg, mouseX, mouseY);
  }
}

constructor(x, y, speed, weight) {
    this.points = [{ x, y, speed, weight }];
    this.wetness = 1.0; // 1.0 = fully wet, 0.0 = fully dry
    this.dryingRate = 0.005; // How fast wetness decreases per frame
    this.baseWeight = weight; // Store initial weight for consistent bleed
  }

addPoint(x, y, speed, weight) {
    this.points.push({ x, y, speed, weight });
  }

draw(g) {
    if (this.points.length < 2) return;

    // Gradual drying effect: reduce wetness over time
    if (this.wetness > 0) {
      this.wetness -= this.dryingRate;
      this.wetness = max(0, this.wetness);
    }

    // --- Draw the main stroke body ---
    g.blendMode(MULTIPLY); // Ink darkens overlaps
    g.noStroke();

    // Calculate current alpha based on wetness
    // Dries lighter, not fully transparent, to maintain definition
    let mainAlpha = map(this.wetness, 0, 1, 100, 255);
    g.fill(0, mainAlpha); // Black ink

    g.beginShape();
    // Repeat first and last points for curveVertex to work properly with fewer points
    g.curveVertex(this.points[0].x, this.points[0].y);
    for (let i = 0; i < this.points.length; i++) {
      let pt = this.points[i];
      g.curveVertex(pt.x, pt.y);
    }
    g.curveVertex(this.points[this.points.length - 1].x, this.points[this.points.length - 1].y);
    g.endShape();

    // --- Draw organic edges / bleeding effect ---
    g.blendMode(ADD); // Makes bleeding brighter and more diffuse
    g.noStroke();

    // Bleed effect is more prominent when ink is wet
    let bleedAlpha = map(this.wetness, 0, 1, 0, 15); // Fades out as ink dries
    g.fill(0, bleedAlpha);

    for (let i = 0; i < this.points.length; i++) {
      let pt = this.points[i];
      let strokeWidth = map(pt.speed, 0, 20, this.baseWeight * 1.5, this.baseWeight * 0.5, true); // Bleed width scales with stroke

      // Determine stroke direction to calculate perpendicular angle for edges
      let prevPt = this.points[max(0, i - 1)];
      let angle = atan2(pt.y - prevPt.y, pt.x - prevPt.x);
      let perpAngle = angle + HALF_PI;

      // Draw small circles along the edges with noise offset for organic texture
      let edgeCount = 5; // More circles for smoother bleed
      for (let j = 0; j < edgeCount; j++) {
        let offset = map(j, 0, edgeCount - 1, -strokeWidth / 2, strokeWidth / 2);
        let noiseOffset = noise(pt.x * 0.01, pt.y * 0.01 + offset * 0.05, frameCount * 0.01);
        noiseOffset = map(noiseOffset, 0, 1, -strokeWidth * 0.5, strokeWidth * 0.5); // More dramatic bleed

        let edgeX1 = pt.x + cos(perpAngle) * (offset + noiseOffset * this.wetness); // Noise effect reduces as ink dries
        let edgeY1 = pt.y + sin(perpAngle) * (offset + noiseOffset * this.wetness);

        let bleedSize = map(this.wetness, 0, 1, 5, strokeWidth * 0.7); // Bleed is wider when wet
        g.ellipse(edgeX1, edgeY1, bleedSize, bleedSize);
      }
    }
  }

isDry() {
    return this.wetness <= 0;
  }

constructor() {
    this.x = random(-width * 0.1, width * 1.1);
    this.y = random(-height * 0.1, height * 0.1);
    this.vx = random(-0.5, 0.5);
    this.vy = random(0.5, 1.5);
    this.rotation = random(TWO_PI);
    this.rotationSpeed = random(-0.02, 0.02);
    this.size = random(10, 25);
    this.color = color(255, 150, 180, 200); // Pink, semi-transparent
  }

update() {
    this.x += this.vx;
    this.y += this.vy;
    this.rotation += this.rotationSpeed;
  }

draw() {
    push();
    translate(this.x, this.y);
    rotate(this.rotation);
    fill(this.color);
    noStroke();
    // Simple petal shape
    beginShape();
    vertex(0, -this.size / 2);
    bezierVertex(this.size / 2, -this.size / 2, this.size / 2, this.size / 2, 0, this.size / 2);
    bezierVertex(-this.size / 2, this.size / 2, -this.size / 2, -this.size / 2, 0, -this.size / 2);
    endShape();
    pop();
  }

isOffScreen() {
    return this.y > height * 1.1;
  }

function mouseDragged() {
  // If no current stroke, start a new one
  if (!currentStroke) {
    let speed = dist(pmouseX, pmouseY, mouseX, mouseY);
    let weight = map(speed, 0, 20, 30, 5, true); // Slower = thicker, faster = thinner
    currentStroke = new InkStroke(mouseX, mouseY, speed, weight);
    inkStrokes.push(currentStroke);
  } else {
    let speed = dist(pmouseX, pmouseY, mouseX, mouseY);
    let weight = map(speed, 0, 20, 30, 5, true);
    currentStroke.addPoint(mouseX, mouseY, speed, weight);
  }
  lastMouseMovedTime = millis();
  return false; // Prevent default browser behavior (e.g., text selection)
}

function mouseReleased() {
  currentStroke = null; // End the current stroke
  return false;
}

function mouseMoved() {
  lastMouseMovedTime = millis();
  return false;
}

function touchStarted() {
  lastMouseMovedTime = millis();
  return false; // Prevent default browser touch behavior (e.g., zooming)
}

function touchMoved() {
  if (touches.length > 0) {
    let touch = touches[0];
    // If no current stroke, start a new one
    if (!currentStroke) {
      let speed = dist(pmouseX, pmouseY, touch.x, touch.y);
      let weight = map(speed, 0, 20, 30, 5, true);
      currentStroke = new InkStroke(touch.x, touch.y, speed, weight);
      inkStrokes.push(currentStroke);
    } else {
      let speed = dist(pmouseX, pmouseY, touch.x, touch.y);
      let weight = map(speed, 0, 20, 30, 5, true);
      currentStroke.addPoint(touch.x, touch.y, speed, weight);
    }
  }
  lastMouseMovedTime = millis();
  return false; // Prevent default browser touch behavior
}

function touchEnded() {
  currentStroke = null; // End the current stroke
  return false;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Re-create graphics buffers with new dimensions
  pg = createGraphics(width, height);
  pg.pixelDensity(1);
  vignetteGraphics = createGraphics(width, height);
  vignetteGraphics.pixelDensity(1);
  drawVignette(); // Redraw static vignette
  // Note: Existing ink strokes are not resized, they will be drawn at their original coordinates.
  // For a more robust solution, stroke points would need to be remapped.
}

function drawPaperTexture(g) {
  g.push();
  g.noStroke();
  g.fill(240, 230, 210); // Warm cream/beige for rice paper
  g.rect(0, 0, width, height);

  g.blendMode(MULTIPLY); // Darken the texture slightly
  g.fill(0, 10); // Very subtle dark lines

  // Draw subtle horizontal fibers with Perlin noise
  for (let y = 0; y < height; y += 5) {
    let noiseVal = noise(y * 0.005, frameCount * 0.001);
    let alpha = map(noiseVal, 0, 1, 0, 5); // Vary transparency
    g.fill(0, alpha);
    g.rect(0, y, width, 1);
  }

  // Draw subtle vertical fibers with Perlin noise
  for (let x = 0; x < width; x += 5) {
    let noiseVal = noise(x * 0.005, frameCount * 0.001 + 100);
    let alpha = map(noiseVal, 0, 1, 0, 5); // Vary transparency
    g.fill(0, alpha);
    g.rect(x, 0, 1, height);
  }
  g.pop();
}

function drawVignette() {
  vignetteGraphics.push();
  vignetteGraphics.noFill();
  vignetteGraphics.blendMode(MULTIPLY); // Darkens the edges

  let maxDist = dist(0, 0, width / 2, height / 2);
  for (let i = 0; i < maxDist; i += 5) {
    let alpha = map(i, 0, maxDist, 0, 50); // Darker further from center
    vignetteGraphics.stroke(0, alpha);
    vignetteGraphics.strokeWeight(10); // Thicker stroke for smoother gradient
    vignetteGraphics.ellipse(width / 2, height / 2, width - i * 2, height - i * 2);
  }
  vignetteGraphics.pop();
}

function drawRipple(g, x, y) {
  g.push();
  g.blendMode(ADD); // Makes it brighter/more diffuse
  g.noStroke();
  g.fill(0, 10); // Subtle black glow

  // Animate a short-lived ripple
  g.ellipse(x, y, 30, 30);
  g.pop();
}