fields001

const sketch = {

  size: 600,

  fps: 30,

};

let bg, fg, lineCol, lineFillCol;

let lines = [];

let scale;

let cols, rows;

const lineTotal = 125;

const dotsPerLine = 128;

​

function setup() {

  createCanvas(sketch.size, sketch.size);

  colorMode(HSB);

  frameRate(sketch.fps);

​

  bg = color([0, 0, 20]);

  fg = color([0, 0, 80]);

  lineFillCol = color([70, 90, 100, 0.1]);

  lineColor = color([160, 90, 100, 0.1]);

​

  scale = sketch.size / 33;

  rows = int(height / scale);

  cols = int(width / scale);

  addLine();

​

  generateField();

}

​

let field = [];

​

function addLine() {

  if (lines.length < lineTotal) {

    const pt = new p5.Vector(random(0, width * 0.95),

      random(0, height * 0.95));

    lines.push({

      pts: [pt]

    });

  }

}

​

function generateField() {

  for (let i = 0; i < cols; i++) {

    for (let j = 0; j < rows; j++) {

      if (field[i] === undefined) field[i] = [];

      const v = createVector(j + 1, i + 1);

      field[i][j] = v;

    }

  }

}

​

function draw() {

  noStroke();

  let fc;

  for (let i = 0; i < cols; i++) {

    for (let j = 0; j < rows; j++) {

      const v = field[i][j];

      // simple color rule based on angle of vector

      fc = color([map(sin(v.heading()), -1, 1, 220, 280), 80, 90]);

      fill(fc);

      rect(i * scale, j * scale, scale, scale);

    }

  }

​

  fill(lineFillCol);

  for (let l = lines.length - 1; l >= 0; l--) {

    const {

      pts

    } = lines[l];

    const lp = (lines.length - 1 - l) / lines.length;

    strokeWeight(map(lp, 0, 1, 1, scale));

    const lc = [hue(lineColor), map(lp, 0, 1, 30, 90), map(lp, 0, 1, 80, 100), 0.2];

    stroke(lc);

    // main leaves

    beginShape()

    for (let idx = pts.length - 1; idx >= 0; idx--) {

      const pt = pts[idx];

      curveVertex(pt.x, pt.y);

      if (idx === (pts.length - 1) && pts.length < dotsPerLine) {

        const i = constrain(int(pt.x / scale), 0, cols - 1);

        const j = constrain(int(pt.y / scale), 0, rows - 1);

        const v = field[i][j];

​

        let newPt = p5.Vector.fromAngle(v.heading());

        newPt.mult(scale / 4);

        newPt = p5.Vector.add(pt, newPt);

        pts.push(newPt);

      }

    }

    endShape();

​

    // thin spines

    strokeWeight(0.5);

    fc.setAlpha(0.5);

    stroke(fc);

    beginShape()

    for (let idx = pts.length - 1; idx >= 0; idx--) {

      const pt = pts[idx];

      curveVertex(pt.x, pt.y);

    }

    endShape();

  }

​

  addLine();

}