p5.brush flowLines sample

let palette = [
  "#2c695a",
  "#4ad6af",
  "#7facc6",
  "#4e93cc",
  "#f6684f",
  "#ffd300",
];

let fieldNames;
let availableBrushes;

let font;
function preload() {
  font = loadFont("AmaticSC-Regular.ttf");
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  background("#fffceb");

  // font settings
  textFont(font);
  textSize(24);

  // Scale brushes to adapt to canvas size
  brush.scale(1.5);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function draw() {
  if (frameCount == 1) {
    // Activate the flowfield we're going to use
    fieldNames = brush.listFields();
    console.log(fieldNames);

    // brush.box() returns an array with available brushes
    availableBrushes = brush.box();
    console.log(availableBrushes);
  }

  // init
  background("#fffceb");
  translate(-width / 2, -height / 2);

  // field
  setField();
  refreshField();
  debugFieldInfo();

  // flowLines
  let x = -50;
  let w = width * 2;
  let term = height / availableBrushes.length;
  let y = term / 2;

  for (let i = 0; i < availableBrushes.length; i++) {
    // Set the stroke to a indexed brush, color, and weight = 1
    const brushName = availableBrushes[i];
    brush.set(brushName, random(palette), 1);

    // // Draw a random flowLine (x, y, length, direction)
    brush.flowLine(x, y + i * term, w, noise(frameCount) * 0.05);

    // debug show brush name
    fill(0);
    textAlign(LEFT, TOP);
    text(brushName, 10, i * term);
  }
}

let fieldIndex = -1;
function setField() {
  const calc = int(frameCount / 10) % fieldNames.length;

  if (calc == fieldIndex) return;

  fieldIndex = calc;
  brush.field(fieldNames[fieldIndex]);
}

let refreshValue = -1;
function refreshField() {
  const calc = int(frameCount / 10);

  if (calc == refreshValue) return;

  refreshValue = calc;
  brush.refreshField(refreshValue);
}

function debugFieldInfo() {
  fill(0);
  textAlign(RIGHT, BOTTOM);
  text(fieldNames[fieldIndex], width - 10, height - 10 - 32);
  text(refreshValue, width - 10, height - 10);
}