flow-field.js

import {arrayOf} from "./util/array"
import p5 from 'p5' // vector fromAngle
import particle from './particle'

export default function (s) {
  s.createSpan('cellScale')
  const cellScaleSlider = s.createSlider(2, 100, 9, 1)
  s.createSpan('particleCount')
  const particleCountSlider = s.createSlider(2, 10000, 40, 1)
  s.createSpan('frameRate')
  const frameRateSlider = s.createSlider(.1, 60, 60, .1)

  s.createSpan('colorMax')
  const colorMaxSlider = s.createSlider(0, 1000, 500, 1)
  s.createSpan('colorMin')
  const colorMinSlider = s.createSlider(0, 1000, 0, 1)
  s.createSpan('angleMax')
  const angleMaxSlider = s.createSlider(0, 10 * s.TWO_PI, 5* s.TWO_PI, 0.001)
  s.createSpan('angleMin')
  const angleMinSlider = s.createSlider(0, s.TWO_PI, 0, 0.001)
  s.createSpan('muDelta')
  const muDeltaSlider = s.createSlider(0, 0.05, 0.005, 0.001)
  s.createSpan('bgAlpha')
  const bgAlphaSlider = s.createSlider(0, 1, 0.07, 0.001)
  s.createSpan('mu')
  const muSlider = s.createSlider(0, 0.3, 0.1, 0.001)
  s.createSpan('maxSpeed')
  const maxSpeedSlider = s.createSlider(.1, 10, 1, .01)

  let yLength
    , xLength
    , width
    , height
    , xs
    , ys
    , width2
    , height2


    , particleCount = 10
    , cellScale = 10
    , colorMax = 500
    , colorMin = 0
    , angleMax = s.TWO_PI
    , angleMin = 0
    , muDelta = 0.01
    , mu = 0.3
    , bgAlpha = 0.07
    , zMu = 0

    , flow
    , particles


  s.setup = () => {
    s.createCanvas(900, 900)
    /* 3d */
    // s.createCanvas(300, 300, s.WEBGL)
    s.colorMode(s.HSB)
    s.strokeWeight(0.9)
    width2 = s.width / 2
    height2 = s.height / 2
    width = s.width
    height = s.height

    particles = arrayOf(particleCountSlider.value())
      .map(_ => new particle(s, s.random(width), s.random(height))
        .setMaxSpeed(maxSpeedSlider.value()))
  }

  let drawFlow = true

  let checkbox = s.createCheckbox('render flow', true);
  checkbox.changed(myCheckedEvent);

  function myCheckedEvent() {
    drawFlow = this.checked()
  }

  const particleButton = s.createButton('particles!');
  particleButton.mousePressed(doParticleClick);

  function doParticleClick() {
    s.background(0)
    particles = arrayOf(particleCountSlider.value())
      .map(_ => new particle(s, s.random(width), s.random(height))
        .setMaxSpeed(maxSpeedSlider.value()))
  }

  s.draw = () => {
    s.background(0, 0, 0, bgAlpha)
    s.frameRate(frameRateSlider.value())
    xLength = s.floor(1 + width / cellScale)
    yLength = s.floor(height / cellScale)
    xs = arrayOf(xLength)
    ys = arrayOf(yLength)
    flow = new Array(yLength * xLength)
    cellScale = cellScaleSlider.value()
    colorMax = colorMaxSlider.value()
    colorMin = colorMinSlider.value()
    angleMax = angleMaxSlider.value()
    angleMin = angleMinSlider.value()
    muDelta = muDeltaSlider.value()
    bgAlpha = bgAlphaSlider.value()
    mu = muSlider.value()

    /* webgl 3d translate */
    // s.translate(-s.width / 2, -s.height / 2)

    zMu -= muDelta
    let yMu = zMu
    ys.forEach((_, y) => {
      yMu -= mu
      let xMu = zMu
      xs.forEach((_, x) => {
        xMu -= mu

        let noise = s.noise(xMu, yMu, zMu)
        let angle = s.map(noise, 0, 1, angleMin, angleMax)
        let color = s.map(noise, 0, 1, colorMin, colorMax)
        let vec = p5.Vector.fromAngle(angle)
        vec.setMag(0.1)

        flow[y * xLength + x] = vec

        if (!drawFlow) return
        s.strokeWeight(.1)
        s.stroke(color, 255, 255, 10)
        s.push()
        s.translate(x * cellScale, y * cellScale)
        s.rotate(vec.heading())
        s.line(0, 0, cellScale * 2, 0)
        s.pop()
      })
    })

    particles.forEach(p => p
      .follow(flow, cellScale, xLength)
      .update()
      .show())
  }
}